update nav bar with new style

odeta939 · Oct 18, 2023 · aec099f · aec099f
1 parent eb16f87
commit aec099f
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 63 deletions.
diff --git a/vinoa-web/app/globals.css b/vinoa-web/app/globals.css
@@ -2,14 +2,17 @@
 @tailwind components;
 @tailwind utilities;
 
-html {
-  @apply text-grey-highlight;
-}
+
 body {
-  @apply bg-violet-light;
+  @apply bg-white;
+  @apply text-black;
 
   min-height: 100vh;
 }
-nav {
-  @apply bg-violet-darker;
-}
+
+nav li{
+  @apply bg-[#F5F5F5];
+  @apply rounded-md;
+  @apply px-4;
+  @apply py-2;
+}
diff --git a/vinoa-web/components/Navigation/Navigation.tsx b/vinoa-web/components/Navigation/Navigation.tsx
@@ -1,33 +1,41 @@
 'use client';
 import Logo from '@/lib/assets/Logo';
-import ProfileLogo from '@/lib/assets/ProfileLogo';
 import Link from 'next/link';
-import LoginButton from '../LoginButton';
+import { usePathname } from 'next/navigation';
 
 const Navigation = () => {
+  const path = usePathname();
   return (
     <nav className='p-4'>
-      <div className='flex place-items-center justify-between text-xl'>
+      <div className='flex place-items-center justify-between text-l'>
         <div className='flex items-center'>
           <Link href={'/'}>
-            <Logo />
+            <Logo color='#800020' />
           </Link>
         </div>
-        <ul className=' flex justify-end items-center gap-6 '>
-          <li className='hover:underline underline-offset-4'>
+        <ul className='flex justify-end items-center gap-6 '>
+          <li
+            className={`${path == '/' && 'ring-2 ring-black rounded-md'} ${
+              path != '/' && 'hover:underline-offset-4 hover:underline'
+            }  `}
+          >
             <Link href={'/'}>Home</Link>
           </li>
-          <li className='hover:underline underline-offset-4'>
-            <Link href='/monthsWine'>Month&#39;s wine</Link>
-          </li>
-          <li className='hover:underline underline-offset-4'>
+          <li
+            className={`${path == '/wines' && 'ring-2 ring-black rounded-md'} ${
+              path != '/wines' && 'hover:underline-offset-4 hover:underline'
+            } `}
+          >
             <Link href='/wines'>Wines</Link>
           </li>
-          <li>
-            <Link href='/profile'>
-              <ProfileLogo />
-            </Link>
-            <LoginButton />
+          <li
+            className={`${
+              path == '/profile' && 'ring-2 ring-black rounded-md'
+            } ${
+              path != '/profile' && 'hover:underline-offset-4 hover:underline'
+            } `}
+          >
+            <Link href='/profile'>Profile</Link>
           </li>
         </ul>
       </div>