From 6d7bad560e6ce560989b4a77f066a5c2274a758e Mon Sep 17 00:00:00 2001
From: jkarenzi <j.karenzi@alustudent.com>
Date: Thu, 20 Jun 2024 21:52:29 +0200
Subject: [PATCH] feat(navbar): implement navbar

-implement reusable navbar component
-add appropriate tests

[Delivers #21]
---
 src/__test__/navbar.test.tsx |  2 +-
 src/components/Navbar.tsx    | 30 +++++++++++++++---------------
 src/layout/HomeLayout.tsx    |  5 +++--
 src/pages/About.tsx          |  4 +---
 src/pages/Contact.tsx        |  4 +---
 src/pages/Home.tsx           |  2 +-
 src/pages/Shop.tsx           |  4 +---
 src/routes/AppRoutes.tsx     |  6 ++++++
 tailwind.config.js           |  4 +++-
 9 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/src/__test__/navbar.test.tsx b/src/__test__/navbar.test.tsx
index 70a8ab2a..4842665b 100644
--- a/src/__test__/navbar.test.tsx
+++ b/src/__test__/navbar.test.tsx
@@ -47,7 +47,7 @@ describe('Navbar Component', () => {
     );
 
     expect(screen.getByText('Shop')).toHaveClass(
-      'border-b-[2px] border-custom-purple text-custom-purple'
+      'border-b-[2px] border-primary text-primary'
     );
   });
 
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 00a84352..80aeeedd 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -6,7 +6,7 @@ function Navbar() {
   const [toggleMenu, setToggleMenu] = useState(false);
   const [toggleProfileMenu, setToggleProfileMenu] = useState(false);
   return (
-    <div className="relative flex items-center justify-between w-full h-16  shadow-sm">
+    <div className="relative flex items-center justify-between w-full h-16 shadow-sm">
       <img
         src="/hamburger.png"
         alt="hamburger"
@@ -17,29 +17,29 @@ function Navbar() {
       />
       <div className="flex items-center gap-2 md:ml-8">
         <img src="/logo.png" alt="logo" />
-        <h2 className="text-custom-black font-bold">Dynamites</h2>
+        <h2 className="text-textBlack font-bold">Dynamites</h2>
       </div>
       <nav className="xs:hidden md:flex items-center h-full">
         <Link
           to="/"
-          className={`${location.pathname === '/' ? 'border-b-[2px] border-custom-purple text-custom-purple' : 'text-custom-grey'} h-full flex items-center justify-center pl-4 pr-8`}
+          className={`${location.pathname === '/' ? 'border-b-[2px] border-primary text-primary' : 'text-grey'} h-full flex items-center justify-center pl-4 pr-8`}
         >
           Home
         </Link>
         <Link
           to="/shop"
-          className={`${location.pathname === '/shop' ? 'border-b-[2px] border-custom-purple text-custom-purple' : 'text-custom-grey'} h-full flex items-center justify-center pl-4 pr-8`}
+          className={`${location.pathname === '/shop' ? 'border-b-[2px] border-primary text-primary' : 'text-grey'} h-full flex items-center justify-center pl-4 pr-8`}
         >
           Shop
         </Link>
         <Link
           to="/about"
-          className={`${location.pathname === '/about' ? 'border-b-[2px] border-custom-purple text-custom-purple' : 'text-custom-grey'} h-full flex items-center justify-center pl-4 pr-8`}
+          className={`${location.pathname === '/about' ? 'border-b-[2px] border-primary text-primary' : 'text-grey'} h-full flex items-center justify-center pl-4 pr-8`}
         >
           About Us
         </Link>
         <div
-          className={`${location.pathname === '/contact' ? 'border-b-[2px] border-custom-purple text-custom-purple' : 'text-custom-grey'} flex items-center gap-2 h-full pl-4 pr-8`}
+          className={`${location.pathname === '/contact' ? 'border-b-[2px] border-primary text-primary' : 'text-grey'} flex items-center gap-2 h-full pl-4 pr-8`}
         >
           <Link
             to="/contact"
@@ -68,7 +68,7 @@ function Navbar() {
               alt="profile"
             />
           </div>
-          <h2 className="text-custom-black">Amanda Green</h2>
+          <h2 className="text-textBlack">Amanda Green</h2>
           <img
             src="/down.png"
             width="15"
@@ -79,12 +79,12 @@ function Navbar() {
         </div>
       </div>
       {toggleMenu && (
-        <div className="absolute top-16 flex flex-col items-start p-4 w-full gap-4 text-custom-grey shadow-sm border-b border-custom-lightGrey">
+        <div className="absolute top-16 flex flex-col items-start p-4 w-full gap-4 text-grey shadow-sm border-b border-lightGrey">
           <Link to="/">Home</Link>
           <Link to="/shop">Shop</Link>
           <Link to="/about">About</Link>
           <Link to="contact">Contact</Link>
-          <div className="flex flex-col w-full gap-2 border-b-[1.5px] border-custom-lightGrey py-2">
+          <div className="flex flex-col w-full gap-2 border-b-[1.5px] border-lightGrey py-2">
             <div className="flex gap-2 w-full items-center">
               <img src="/edit.png" width="20" height="20" alt="edit" />
               <h2>Edit profile</h2>
@@ -94,7 +94,7 @@ function Navbar() {
               <h2>Preferences</h2>
             </div>
           </div>
-          <div className="flex items-center w-full justify-between pr-2 py-2 border-b-[1.5px] border-custom-lightGrey">
+          <div className="flex items-center w-full justify-between pr-2 py-2 border-b-[1.5px] border-lightGrey">
             <div className="flex gap-2 items-center">
               <img src="/moon.png" width="20" height="20" alt="moon" />
               <h2>Night mode</h2>
@@ -107,15 +107,15 @@ function Navbar() {
             <img src="/help.png" width="20" height="20" alt="help" />
             <h2>Help center</h2>
           </div>
-          <div className="flex gap-2 w-full items-center border-t-[1.5px] border-custom-lightGrey pt-1 mt-8">
+          <div className="flex gap-2 w-full items-center border-t-[1.5px] border-lightGrey pt-1 mt-8">
             <img src="/signout.png" width="20" height="20" alt="signout" />
             <h2>Sign out</h2>
           </div>
         </div>
       )}
       {toggleProfileMenu && (
-        <div className="absolute top-16 right-0 flex flex-col items-center w-52 shadow-sm py-2 text-custom-grey rounded-b-md border-l border-b border-custom-lightGrey">
-          <div className="flex flex-col w-full gap-2 border-b-[1.5px] border-custom-lightGrey py-2">
+        <div className="absolute top-16 right-0 flex flex-col items-center w-52 shadow-sm py-2 text-grey rounded-b-md border-l border-b border-lightGrey">
+          <div className="flex flex-col w-full gap-2 border-b-[1.5px] border-lightGrey py-2">
             <div className="flex gap-2 w-full items-center px-2">
               <img src="/edit.png" width="20" height="20" alt="edit" />
               <h2>Edit profile</h2>
@@ -125,7 +125,7 @@ function Navbar() {
               <h2>Preferences</h2>
             </div>
           </div>
-          <div className="flex items-center w-full justify-between pr-2 py-2 border-b-[1.5px] border-custom-lightGrey">
+          <div className="flex items-center w-full justify-between pr-2 py-2 border-b-[1.5px] border-lightGrey">
             <div className="flex gap-2 items-center px-2">
               <img src="/moon.png" width="20" height="20" alt="moon" />
               <h2>Night mode</h2>
@@ -138,7 +138,7 @@ function Navbar() {
             <img src="/help.png" width="20" height="20" alt="help" />
             <h2>Help center</h2>
           </div>
-          <div className="flex gap-2 w-full items-center px-2 border-t-[1.5px] border-custom-lightGrey pt-1 mt-8">
+          <div className="flex gap-2 w-full items-center px-2 border-t-[1.5px] border-lightGrey pt-1 mt-8">
             <img src="/signout.png" width="20" height="20" alt="signout" />
             <h2>Sign out</h2>
           </div>
diff --git a/src/layout/HomeLayout.tsx b/src/layout/HomeLayout.tsx
index 4917b997..09dd98f1 100644
--- a/src/layout/HomeLayout.tsx
+++ b/src/layout/HomeLayout.tsx
@@ -1,13 +1,14 @@
 import { Outlet } from 'react-router-dom';
+import Navbar from '@/components/Navbar';
 
 function HomeLayout() {
   return (
     <div>
-      <div>Nav</div>
+      <Navbar />
       <div>
         <Outlet />
       </div>
-      <div>Fotter</div>
+      <div>Footer</div>
     </div>
   );
 }
diff --git a/src/pages/About.tsx b/src/pages/About.tsx
index c1d393b8..06323e81 100644
--- a/src/pages/About.tsx
+++ b/src/pages/About.tsx
@@ -1,7 +1,5 @@
-import Navbar from '@/components/Navbar';
-
 function About() {
-  return <Navbar />;
+  return <p>About</p>;
 }
 
 export default About;
diff --git a/src/pages/Contact.tsx b/src/pages/Contact.tsx
index 7887cd41..3f288ff1 100644
--- a/src/pages/Contact.tsx
+++ b/src/pages/Contact.tsx
@@ -1,7 +1,5 @@
-import Navbar from '@/components/Navbar';
-
 function Contact() {
-  return <Navbar />;
+  return <p>Contact</p>;
 }
 
 export default Contact;
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 4d0a7187..72196de9 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -2,4 +2,4 @@ function Home() {
   return <p className="text-blueBg">Welcome to Dynamites E-commerce</p>;
 }
 
-export default Home;
\ No newline at end of file
+export default Home;
diff --git a/src/pages/Shop.tsx b/src/pages/Shop.tsx
index d7e2c684..3d513ec1 100644
--- a/src/pages/Shop.tsx
+++ b/src/pages/Shop.tsx
@@ -1,7 +1,5 @@
-import Navbar from '@/components/Navbar';
-
 function Shop() {
-  return <Navbar />;
+  return <p>Shop</p>;
 }
 
 export default Shop;
diff --git a/src/routes/AppRoutes.tsx b/src/routes/AppRoutes.tsx
index 08b03535..16b3995b 100644
--- a/src/routes/AppRoutes.tsx
+++ b/src/routes/AppRoutes.tsx
@@ -2,6 +2,9 @@ import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import HomeLayout from '@/layout/HomeLayout';
 import Home from '@/pages/Home';
 import ErrorPage from '@/pages/ErrorPage';
+import Shop from '@/pages/Shop';
+import About from '@/pages/About';
+import Contact from '@/pages/Contact';
 
 function AppRoutes() {
   return (
@@ -9,6 +12,9 @@ function AppRoutes() {
       <Routes>
         <Route element={<HomeLayout />}>
           <Route index path="/" element={<Home />} />
+          <Route path="/shop" element={<Shop />} />
+          <Route path="/about" element={<About />} />
+          <Route path="/contact" element={<Contact />} />
         </Route>
         <Route path="*" element={<ErrorPage />} />
         {/* Add many routes as you want */}
diff --git a/tailwind.config.js b/tailwind.config.js
index f63f318e..410a5761 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -18,7 +18,9 @@ export default {
         grayDark: '#CCD0D8',
         grayLight: '#F3F4F6',
         redBg: '#DC2627',
-        black: '#171A1F',
+        textBlack: '#171A1F',
+        lightGrey:'#DEE1E6',
+        grey: '#565D6D'
       },
       fontFamily: {
         Lexend: ['Lexend'],