add basic navigation

package.json

@@ -16,6 +16,7 @@
     "modern-normalize": "^2.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-loader-spinner": "^6.1.6",
     "react-modal": "^3.16.1",
     "react-redux": "^9.1.0",
     "react-router-dom": "^6.22.3",

src/App.jsx

@@ -2,14 +2,18 @@ import { lazy } from "react";
 import { Route, Routes } from "react-router-dom";
 import { AppLayout } from "./components/AppLayout/AppLayout";
 
+const WelcomePage = lazy(() => import("./pages/WelcomePage"));
 const HomePage = lazy(() => import("./pages/HomePage"));
+const FavouritePage = lazy(() => import("./pages/FavouritePage"));
 const NotFoundPage = lazy(() => import("./pages/NotFoundPage"));
 
 function App() {
   return (
     <Routes>
       <Route path="/" element={<AppLayout />}>
-        <Route index element={<HomePage />} />
+        <Route index element={<WelcomePage />} />
+        <Route path="/home" element={<HomePage />} />
+        <Route path="/favourite" element={<FavouritePage />} />
       </Route>
       <Route path="*" element={<NotFoundPage />} />
     </Routes>

src/components/AppLayout/AppLayout.jsx

@@ -3,6 +3,8 @@ import { Suspense, useEffect } from "react";
 import { GlobalStyle } from "../GlobalStyle";
 import { useDispatch } from "react-redux";
 import { fetchCars } from "../../redux/cars/operations";
+import { Header } from "../Header/Header";
+import { Loader } from "../Loader/Loader";
 
 export const AppLayout = () => {
   const dispatch = useDispatch();
@@ -12,8 +14,11 @@ export const AppLayout = () => {
 
   return (
     <>
+      <header>
+        <Header />
+      </header>
       <main>
-        <Suspense fallback={<div>Loader</div>}>
+        <Suspense fallback={<Loader />}>
           <Outlet />
         </Suspense>
       </main>

src/components/Header/Header.jsx

@@ -0,0 +1,14 @@
+import { NavLink } from "react-router-dom";
+import { HeaderContainer, HeaderNavigation } from "./Header.styled";
+
+export const Header = () => {
+  return (
+    <HeaderContainer>
+      <HeaderNavigation>
+        <NavLink to="/">RentCamp</NavLink>
+        <NavLink to="/home">Rent</NavLink>
+        <NavLink to="/favourite">Favourite</NavLink>
+      </HeaderNavigation>
+    </HeaderContainer>
+  );
+};

src/components/Header/Header.styled.js

@@ -0,0 +1,12 @@
+import styled from "styled-components";
+
+export const HeaderContainer = styled.div`
+  margin: 0 auto;
+  padding: 30px 64px;
+  max-width: 1440px;
+`;
+
+export const HeaderNavigation = styled.nav`
+  display: flex;
+  gap: 20px;
+`;

src/components/Loader/Loader.jsx

@@ -0,0 +1,18 @@
+import { RotatingLines } from "react-loader-spinner";
+import { LoaderContainer, Backbrop } from "./Loader.styled";
+
+export const Loader = () => {
+  return (
+    <Backbrop>
+      <LoaderContainer>
+        <RotatingLines
+          strokeColor="#4f58fd"
+          strokeWidth="5"
+          animationDuration="0.75"
+          width="96"
+          visible={true}
+        />
+      </LoaderContainer>
+    </Backbrop>
+  );
+};

src/components/Loader/Loader.styled.js

@@ -0,0 +1,19 @@
+import styled from "styled-components";
+
+export const Backbrop = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100;
+
+  width: 100%;
+  height: 100%;
+  background-color: rgba(46, 47, 66, 0.4);
+`;
+
+export const LoaderContainer = styled.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+`;

src/pages/FavouritePage.jsx

@@ -0,0 +1,7 @@
+export default function FavouritePage() {
+  return (
+    <section className="container">
+      <h1>favourite</h1>
+    </section>
+  );
+}

src/pages/WelcomePage.jsx

@@ -0,0 +1,7 @@
+export default function WelcomePage() {
+  return (
+    <section className="container">
+      <h1>WelcomePage</h1>
+    </section>
+  );
+}