refactor: enhance link active state handling in Navbar and HamburgerMenu components

src/components/layout/hamburgerMenu/index.tsx

@@ -28,11 +28,23 @@ export default function HamburgerMenu({ isOpen, onClose }: Props) {
     routes.home,
     routes.about,
     routes.contact,
-    routes.products,
+    routes.productCategories,
     routes.projects,
     routes.blog,
   ];
 
+  const linkClass = (href: string) => {
+    let isActive = false;
+    if (href === '/' || href === `/${locale}`) {
+      isActive = pathname === '/' || pathname === `/${locale}`;
+    } else {
+      isActive = pathname.startsWith(href);
+    }
+    return isActive
+      ? 'bg-primary text-white'
+      : 'border border-white/10 text-white hover:bg-white/10';
+  };
+
   useEffect(() => {
     function handleClickOutside(event: MouseEvent) {
       if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
@@ -76,17 +88,14 @@ export default function HamburgerMenu({ isOpen, onClose }: Props) {
 
         <nav className="flex flex-col gap-6">
           {links.map(({ route: link, title }) => {
-            const isActive = pathname === link();
             return (
               <Link
                 key={link()}
                 href={link()}
                 onClick={onClose}
-                className={`rounded-lg px-4 py-3 text-center text-sm font-medium ${
-                  isActive
-                    ? 'bg-primary text-white'
-                    : 'border border-white/10 text-white hover:bg-white/10'
-                }`}
+                className={`rounded-lg px-4 py-3 text-center text-sm font-medium ${linkClass(
+                  link(),
+                )}`}
               >
                 {title}
               </Link>

src/components/layout/navbar/index.tsx

@@ -28,8 +28,15 @@ export default function Navbar() {
     routes.contact,
   ];
 
-  const linkClass = (href: string) =>
-    pathname === href ? 'text-primary font-semibold' : 'text-white';
+  const linkClass = (href: string) => {
+    let isActive = false;
+    if (href === '/' || href === `/${locale}`) {
+      isActive = pathname === '/' || pathname === `/${locale}`;
+    } else {
+      isActive = pathname.startsWith(href);
+    }
+    return isActive ? 'text-primary font-semibold' : 'text-white';
+  };
 
   return (
     <>