From 96e0fc9e0d482bc18bb79619446774c72a485224 Mon Sep 17 00:00:00 2001
From: ahasani194 <ahasani194@gmail.com>
Date: Mon, 16 Jun 2025 14:02:21 +0330
Subject: [PATCH] refactor: enhance link active state handling in Navbar and
 HamburgerMenu components

---
 Dockerfile                                    |  2 ++
 .../[product_category_id]/page.tsx            |  2 +-
 src/app/[locale]/product-categories/page.tsx  |  2 +-
 src/app/[locale]/projects/page.tsx            |  2 +-
 src/components/layout/hamburgerMenu/index.tsx | 23 +++++++++++++------
 src/components/layout/navbar/index.tsx        | 11 +++++++--
 6 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index d6e8acd..92a1051 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -22,5 +22,7 @@ COPY --from=builder /app/.next ./.next
 COPY --from=builder /app/public ./public
 COPY --from=builder /app/package.json ./package.json
 COPY --from=builder /app/node_modules ./node_modules
+VOLUME ["/app/contactMessages.json"]
+
 EXPOSE 5000
 CMD ["npm", "start"]
diff --git a/src/app/[locale]/product-categories/[product_category_id]/page.tsx b/src/app/[locale]/product-categories/[product_category_id]/page.tsx
index d294677..47b0d18 100644
--- a/src/app/[locale]/product-categories/[product_category_id]/page.tsx
+++ b/src/app/[locale]/product-categories/[product_category_id]/page.tsx
@@ -72,7 +72,7 @@ export default async function ProductPage({
         title={productCategory?.title || t('page_products_default_title')}
         imageSrc={images.homeProductBack.src}
       />
-      <div className="container-fluid mx-auto my-24">
+      <div className="container-fluid mx-auto my-12 md:my-24">
         <Breadcrumb items={breadcrumbItems} />
         <ProductCategoryCardInProducts
           productCategory={productCategory}
diff --git a/src/app/[locale]/product-categories/page.tsx b/src/app/[locale]/product-categories/page.tsx
index dac70cd..2b99cf3 100644
--- a/src/app/[locale]/product-categories/page.tsx
+++ b/src/app/[locale]/product-categories/page.tsx
@@ -33,7 +33,7 @@ export default async function ProductsPage({
         title={t('pages_product_categories_title')}
         imageSrc={images.aboutBanner.src}
       />
-      <div className="container-fluid mx-auto my-24">
+      <div className="container-fluid mx-auto my-12 md:my-24">
         <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
           {productCategories.map((category) => (
             <ProductsCategoryCard key={category.id} {...category} />
diff --git a/src/app/[locale]/projects/page.tsx b/src/app/[locale]/projects/page.tsx
index 849c847..c64ec9f 100644
--- a/src/app/[locale]/projects/page.tsx
+++ b/src/app/[locale]/projects/page.tsx
@@ -32,7 +32,7 @@ export default async function ProjectsPage({
         title={t('pages_projects_title')}
         imageSrc={images.aboutBanner.src}
       />
-      <div className="container-fluid mx-auto my-24">
+      <div className="container-fluid mx-auto my-12 md:my-24">
         <ProjectsGridView />
       </div>
     </main>
diff --git a/src/components/layout/hamburgerMenu/index.tsx b/src/components/layout/hamburgerMenu/index.tsx
index b9ba01e..f309ec9 100644
--- a/src/components/layout/hamburgerMenu/index.tsx
+++ b/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>
diff --git a/src/components/layout/navbar/index.tsx b/src/components/layout/navbar/index.tsx
index 186b6f4..7690ae3 100644
--- a/src/components/layout/navbar/index.tsx
+++ b/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 (
     <>