Added bold on current page

Maakaf · Mar 12, 2024 · 298b87d · 298b87d
1 parent bb61b2d
commit 298b87d
Showing 1 changed file with 23 additions and 13 deletions.
diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx
@@ -1,9 +1,18 @@
+'use client';
+
 import Image from 'next/image';
 import Link from 'next/link';
 import SizeIndicator from './SizeIndicator';
 import dynamic from 'next/dynamic';
 import { NavDropdown } from './NavDropdown';
 import { LINKS } from '@/config/consts';
+import { usePathname } from 'next/navigation';
+import { log } from 'console';
+
+enum HeaderPages {
+  ABOUT='about',
+  PROJECTS='projects'
+}
 
 const NavRightSide = dynamic(() => import('./NavRightSide'), {
   ssr: false,
@@ -17,6 +26,10 @@ const NavRightSide = dynamic(() => import('./NavRightSide'), {
 });
 
 const Header: React.FC = () => {
+  const pathname = usePathname();
+  const currentPage = pathname.split("/").at(-1);
+  console.log({ currentPage });
+
   return (
     <>
       <nav className="fixed inset-0 z-50 flex items-center justify-between px-10 bg-lightBg dark:bg-darkBg max-h-24">
@@ -25,29 +38,26 @@ const Header: React.FC = () => {
           <li className="flex items-center gap-2 cursor-pointer body-roman">
             <NavDropdown />
           </li>
-          <li className="cursor-pointer body-roman">
-            <Link href={LINKS.PROJECTS} className='transition duration-300 group'>הפרויקטים
-            <span className="block max-w-0 group-hover:max-w-full transition-all duration-500 h-0.5 bg-sky-600"/>
+          <li className={`cursor-pointer body-roman ${currentPage === 'projects' ? 'font-bold' : ''}`}>
+            <Link href={LINKS.PROJECTS} className="transition duration-300 group">
+              <span>הפרויקטים</span>
+              <span className="block max-w-0 group-hover:max-w-full transition-all duration-500 h-0.5 bg-sky-600" />
             </Link>
           </li>
-          <li className="cursor-pointer body-roman ">
-            <Link href={LINKS.ABOUT_US} className='transition duration-300 group'>מי אנחנו
-            <span className="block max-w-0 group-hover:max-w-full transition-all duration-500 h-0.5 bg-sky-600"/>
+          <li className={`cursor-pointer body-roman ${currentPage === 'about' ? 'font-bold' : ''}`}>
+            <Link href={LINKS.ABOUT_US} className="transition duration-300 group">
+              <span>מי אנחנו</span>
+              <span className="block max-w-0 group-hover:max-w-full transition-all duration-500 h-0.5 bg-sky-600" />
             </Link>
           </li>
         </ul>
         <Link href={LINKS.HOME}>
-          <Image
-            src="/images/maakafLogo.png"
-            alt="maakafLogo"
-            width={40}
-            height={42}
-          />
+          <Image src="/images/maakafLogo.png" alt="maakafLogo" width={40} height={42} />
         </Link>
       </nav>
       <SizeIndicator />
     </>
   );
 };
 
-export default Header;
+export default Header;