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

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"]

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}

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} />

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>

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 ${
+                className={`rounded-lg px-4 py-3 text-center text-sm font-medium ${linkClass(
-                  isActive
+                  link(),
-                    ? 'bg-primary text-white'
+                )}`}
-                    : 'border border-white/10 text-white hover:bg-white/10'
-                }`}
               >
                 {title}
               </Link>

src/components/layout/navbar/index.tsx

@@ -28,8 +28,15 @@ export default function Navbar() {
     routes.contact,
   ];
 
-  const linkClass = (href: string) =>
+  const linkClass = (href: string) => {
-    pathname === href ? 'text-primary font-semibold' : 'text-white';
+    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 (
     <>