blocks-dusted 0.1.9 → 0.1.11

package/templates/components/HeaderDD02/MobileBottomNav/index.tsx

@@ -1,199 +1,222 @@
-'use client'
-
-import React, { useEffect, useMemo, useState } from 'react'
-import Link from 'next/link'
-import { usePathname } from 'next/navigation'
-import { motion, AnimatePresence } from 'framer-motion'
-import * as LucideIcons from 'lucide-react'
-import { Home, ChevronDown } from 'lucide-react'
-import type { Header as HeaderType } from '@/payload-types'
-import RichText from '@/components/RichText'
-import { cn } from '@/utilities/ui'
+"use client";
+
+import React, { useEffect, useMemo, useState } from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { motion, AnimatePresence } from "framer-motion";
+import * as LucideIcons from "lucide-react";
+import { Home, ChevronDown } from "lucide-react";
+import type { Header as HeaderType } from "@/payload-types";
+import RichText from "@/components/RichText";
+import { cn } from "@/utilities/ui";
 import {
   TooltipProvider,
   Tooltip,
   TooltipTrigger,
-  TooltipContent
-} from '@/components/animate-ui/components/animate/tooltip'
+  TooltipContent,
+} from "@/components/animate-ui/components/animate/tooltip";
 
 interface MobileBottomNavProps {
-  data?: HeaderType
+  data?: HeaderType;
 }
 
+type HeaderNavItem = NonNullable<
+  NonNullable<HeaderType["header02"]>["navItems"]
+>[number] &
+  Record<string, any>;
+type HeaderChildItem = Record<string, any>;
+
 const getLinkHref = (link: any): string => {
-  if (!link) return '#'
+  if (!link) return "#";
 
-  if (link.type === 'reference') {
-    const value = link.reference?.value
+  if (link.type === "reference") {
+    const value = link.reference?.value;
 
-    if (typeof value === 'object' && 'slug' in value) {
-      return `/${value.slug}`
+    if (typeof value === "object" && "slug" in value) {
+      return `/${value.slug}`;
     }
   }
 
-  return link.url || '#'
-}
+  return link.url || "#";
+};
 
 const resolveCustomIconUrl = (customIcon?: any): string | null => {
-  if (!customIcon) return null
-  if (typeof customIcon === 'string') return customIcon
-  if (typeof customIcon === 'number') return null
-
-  if (typeof customIcon === 'object' && 'url' in customIcon && typeof customIcon.url === 'string') {
-    return customIcon.url
+  if (!customIcon) return null;
+  if (typeof customIcon === "string") return customIcon;
+  if (typeof customIcon === "number") return null;
+
+  if (
+    typeof customIcon === "object" &&
+    "url" in customIcon &&
+    typeof customIcon.url === "string"
+  ) {
+    return customIcon.url;
   }
 
-  return null
-}
+  return null;
+};
 
 const normalizePath = (value?: string | null) => {
-  if (!value) return '/'
+  if (!value) return "/";
 
-  const [base] = value.split(/[?#]/)
+  const [base] = value.split(/[?#]/);
 
-  if (!base) return '/'
+  if (!base) return "/";
 
-  if (base !== '/' && base.endsWith('/')) {
-    return base.slice(0, -1)
+  if (base !== "/" && base.endsWith("/")) {
+    return base.slice(0, -1);
   }
 
-  return base || '/'
-}
+  return base || "/";
+};
 
 const normalizeProductRoute = (href?: string | null, label?: string | null) => {
-  const normalizedHref = normalizePath(href)
-  const normalizedLabel = (label || '').toLowerCase().trim()
+  const normalizedHref = normalizePath(href);
+  const normalizedLabel = (label || "").toLowerCase().trim();
 
-  if (normalizedHref === '/templates' || normalizedLabel === 'templates') {
-    return '/products/templates'
+  if (normalizedHref === "/templates" || normalizedLabel === "templates") {
+    return "/products/templates";
   }
 
-  if (normalizedHref === '/components' || normalizedLabel === 'components') {
-    return '/products/components'
+  if (normalizedHref === "/components" || normalizedLabel === "components") {
+    return "/products/components";
   }
 
-  return normalizedHref
-}
+  return normalizedHref;
+};
 
-const isPathActive = (href: string, currentPathname: string, label?: string | null) => {
-  const normalizedHref = normalizeProductRoute(href, label)
-  const normalizedCurrentPathname = normalizePath(currentPathname)
+const isPathActive = (
+  href: string,
+  currentPathname: string,
+  label?: string | null,
+) => {
+  const normalizedHref = normalizeProductRoute(href, label);
+  const normalizedCurrentPathname = normalizePath(currentPathname);
 
-  if (normalizedHref === normalizedCurrentPathname) return true
-  if (normalizedHref === '/') return false
+  if (normalizedHref === normalizedCurrentPathname) return true;
+  if (normalizedHref === "/") return false;
 
-  return normalizedCurrentPathname.startsWith(`${normalizedHref}/`)
-}
+  return normalizedCurrentPathname.startsWith(`${normalizedHref}/`);
+};
 
-const renderIcon = (iconName?: string | null, className?: string, customIcon?: any) => {
-  const customUrl = resolveCustomIconUrl(customIcon)
+const renderIcon = (
+  iconName?: string | null,
+  className?: string,
+  customIcon?: any,
+) => {
+  const customUrl = resolveCustomIconUrl(customIcon);
 
   if (customUrl) {
     return (
       <img
         src={customUrl}
-        className={className || 'size-5'}
+        className={className || "size-5"}
         alt=""
         aria-hidden="true"
         loading="lazy"
       />
-    )
+    );
   }
 
-  if (!iconName) return null
+  if (!iconName) return null;
 
-  const IconComponent = (LucideIcons as any)[iconName]
+  const IconComponent = (LucideIcons as any)[iconName];
 
-  if (!IconComponent) return null
+  if (!IconComponent) return null;
 
-  return <IconComponent className={className || 'size-5'} />
-}
+  return <IconComponent className={className || "size-5"} />;
+};
 
 const menuButtonVariants = {
   top: {
     closed: { rotate: 0, translateY: 0 },
-    open: { rotate: 45, translateY: 6 }
+    open: { rotate: 45, translateY: 6 },
   },
   middle: {
     closed: { opacity: 1 },
-    open: { opacity: 0 }
+    open: { opacity: 0 },
   },
   bottom: {
     closed: { rotate: 0, translateY: 0 },
-    open: { rotate: -45, translateY: -6 }
-  }
-}
+    open: { rotate: -45, translateY: -6 },
+  },
+};
 
-const barClass = 'menubar absolute left-0 h-[1.8px] w-full bg-current'
+const barClass = "menubar absolute left-0 h-[1.8px] w-full bg-current";
 
 export default function MobileBottomNav({ data }: MobileBottomNavProps) {
-  const [isMenuOpen, setIsMenuOpen] = useState(false)
-  const [expandedDropdown, setExpandedDropdown] = useState<number | null>(null)
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [expandedDropdown, setExpandedDropdown] = useState<number | null>(null);
 
-  const pathname = usePathname()
-  const normalizedCurrentPathname = useMemo(() => normalizePath(pathname), [pathname])
+  const pathname = usePathname();
+  const normalizedCurrentPathname = useMemo(
+    () => normalizePath(pathname),
+    [pathname],
+  );
 
-  const navItems = data?.header02?.navItems || (data as any)?.navItems || []
-  const showLabels = data?.header02?.showMobileLabels ?? true
+  const navItems: HeaderNavItem[] = (data?.header02?.navItems ||
+    (data as any)?.navItems ||
+    []) as HeaderNavItem[];
+  const showLabels = data?.header02?.showMobileLabels ?? true;
 
   useEffect(() => {
     if (isMenuOpen) {
-      const scrollY = window.scrollY
-
-      document.documentElement.style.overflow = 'hidden'
-      document.documentElement.style.touchAction = 'none'
-      document.documentElement.style.overscrollBehavior = 'none'
-
-      document.body.style.overflow = 'hidden'
-      document.body.style.position = 'fixed'
-      document.body.style.top = `-${scrollY}px`
-      document.body.style.width = '100%'
-      document.body.style.touchAction = 'none'
-      document.body.style.overscrollBehavior = 'none'
+      const scrollY = window.scrollY;
+
+      document.documentElement.style.overflow = "hidden";
+      document.documentElement.style.touchAction = "none";
+      document.documentElement.style.overscrollBehavior = "none";
+
+      document.body.style.overflow = "hidden";
+      document.body.style.position = "fixed";
+      document.body.style.top = `-${scrollY}px`;
+      document.body.style.width = "100%";
+      document.body.style.touchAction = "none";
+      document.body.style.overscrollBehavior = "none";
     } else {
-      const scrollY = document.body.style.top
+      const scrollY = document.body.style.top;
 
-      document.documentElement.style.overflow = ''
-      document.documentElement.style.touchAction = ''
-      document.documentElement.style.overscrollBehavior = ''
+      document.documentElement.style.overflow = "";
+      document.documentElement.style.touchAction = "";
+      document.documentElement.style.overscrollBehavior = "";
 
-      document.body.style.overflow = ''
-      document.body.style.position = ''
-      document.body.style.top = ''
-      document.body.style.width = ''
-      document.body.style.touchAction = ''
-      document.body.style.overscrollBehavior = ''
+      document.body.style.overflow = "";
+      document.body.style.position = "";
+      document.body.style.top = "";
+      document.body.style.width = "";
+      document.body.style.touchAction = "";
+      document.body.style.overscrollBehavior = "";
 
-      window.scrollTo(0, parseInt(scrollY || '0', 10) * -1)
+      window.scrollTo(0, parseInt(scrollY || "0", 10) * -1);
     }
 
     return () => {
-      document.documentElement.style.overflow = ''
-      document.documentElement.style.touchAction = ''
-      document.documentElement.style.overscrollBehavior = ''
-
-      document.body.style.overflow = ''
-      document.body.style.position = ''
-      document.body.style.top = ''
-      document.body.style.width = ''
-      document.body.style.touchAction = ''
-      document.body.style.overscrollBehavior = ''
-    }
-  }, [isMenuOpen])
+      document.documentElement.style.overflow = "";
+      document.documentElement.style.touchAction = "";
+      document.documentElement.style.overscrollBehavior = "";
+
+      document.body.style.overflow = "";
+      document.body.style.position = "";
+      document.body.style.top = "";
+      document.body.style.width = "";
+      document.body.style.touchAction = "";
+      document.body.style.overscrollBehavior = "";
+    };
+  }, [isMenuOpen]);
 
   // Include both simple links and dropdowns (using first child's link)
-  const bottomNavLinks = navItems.slice(0, 4)
+  const bottomNavLinks = navItems.slice(0, 4);
 
   const toggleDropdown = (index: number) => {
-    setExpandedDropdown(expandedDropdown === index ? null : index)
-  }
+    setExpandedDropdown(expandedDropdown === index ? null : index);
+  };
 
   // Helper to get URL for bottom nav items (handles both links and dropdowns)
   const getBottomNavHref = (navItem: any) => {
-    const label = getBottomNavLabel(navItem)
+    const label = getBottomNavLabel(navItem);
 
-    if (navItem.type === 'link') {
-      return normalizeProductRoute(getLinkHref(navItem.link), label)
+    if (navItem.type === "link") {
+      return normalizeProductRoute(getLinkHref(navItem.link), label);
     }
 
     const children =
@@ -201,33 +224,40 @@ export default function MobileBottomNav({ data }: MobileBottomNavProps) {
       navItem.v2_children ||
       navItem.v4_children ||
       navItem.v5_children ||
-      navItem.v6_children
+      navItem.v6_children;
 
-    return normalizeProductRoute(children?.[0]?.link ? getLinkHref(children[0].link) : '#', label)
-  }
+    return normalizeProductRoute(
+      children?.[0]?.link ? getLinkHref(children[0].link) : "#",
+      label,
+    );
+  };
 
   // Helper to get label for bottom nav items
   const getBottomNavLabel = (navItem: any) => {
-    return navItem.type === 'link' ? navItem.link?.label : navItem.label
-  }
+    return navItem.type === "link" ? navItem.link?.label : navItem.label;
+  };
 
   // Helper to get icon for bottom nav items
   const getBottomNavIcon = (navItem: any) => {
-    if (navItem.type === 'link') {
-      return renderIcon(navItem.link?.icon, 'size-6', navItem.link?.customIcon)
+    if (navItem.type === "link") {
+      return renderIcon(
+        navItem.link?.icon,
+        "size-6",
+        (navItem.link as any)?.customIcon,
+      );
     }
-    return renderIcon(navItem.triggerIcon, 'size-6')
-  }
+    return renderIcon(navItem.triggerIcon, "size-6");
+  };
 
   return (
     <>
       <nav
         className={cn(
-          'mobile-bottom-nav fixed bottom-0 left-0 right-0 z-[999] mx-4 mb-4 flex rounded-full border-t border-border px-4 backdrop-blur-md',
-          'bg-[var(--navbar-background)] shadow-[0_-2px_10px_rgba(0,0,0,0.1)]',
-          'pb-[env(safe-area-inset-bottom)] [filter:drop-shadow(2px_4px_6px_black)]',
-          'animate-[slideUpNav_0.3s_ease-out]',
-          'min-[978px]:hidden'
+          "mobile-bottom-nav fixed bottom-0 left-0 right-0 z-[999] mx-4 mb-4 flex rounded-full border-t border-border px-4 backdrop-blur-md",
+          "bg-[var(--navbar-background)] shadow-[0_-2px_10px_rgba(0,0,0,0.1)]",
+          "pb-[env(safe-area-inset-bottom)] [filter:drop-shadow(2px_4px_6px_black)]",
+          "animate-[slideUpNav_0.3s_ease-out]",
+          "min-[978px]:hidden",
         )}
       >
         <TooltipProvider>
@@ -235,7 +265,7 @@ export default function MobileBottomNav({ data }: MobileBottomNavProps) {
             <Tooltip>
               <TooltipTrigger asChild>
                 <motion.button
-                  aria-label={isMenuOpen ? 'Close menu' : 'Open menu'}
+                  aria-label={isMenuOpen ? "Close menu" : "Open menu"}
                   aria-expanded={isMenuOpen}
                   onClick={() => setIsMenuOpen(!isMenuOpen)}
                   whileTap={{ scale: 0.96 }}
@@ -244,45 +274,61 @@ export default function MobileBottomNav({ data }: MobileBottomNavProps) {
                   <span className="relative block h-4 w-4">
                     <motion.span
                       className={barClass}
-                      style={{ top: '0px' }}
-                      animate={isMenuOpen ? 'open' : 'closed'}
+                      style={{ top: "0px" }}
+                      animate={isMenuOpen ? "open" : "closed"}
                       variants={menuButtonVariants.top}
-                      transition={{ type: 'spring', stiffness: 600, damping: 30 }}
+                      transition={{
+                        type: "spring",
+                        stiffness: 600,
+                        damping: 30,
+                      }}
                     />
 
                     <motion.span
                       className={barClass}
-                      style={{ top: '6px' }}
-                      animate={isMenuOpen ? 'open' : 'closed'}
+                      style={{ top: "6px" }}
+                      animate={isMenuOpen ? "open" : "closed"}
                       variants={menuButtonVariants.middle}
                       transition={{ duration: 0.18, ease: [0.22, 1, 0.36, 1] }}
                     />
 
                     <motion.span
                       className="menubar absolute left-0 h-[1.8px] w-full bg-lime-500"
-                      style={{ top: '12px' }}
-                      animate={isMenuOpen ? 'open' : 'closed'}
+                      style={{ top: "12px" }}
+                      animate={isMenuOpen ? "open" : "closed"}
                       variants={menuButtonVariants.bottom}
-                      transition={{ type: 'spring', stiffness: 600, damping: 30 }}
+                      transition={{
+                        type: "spring",
+                        stiffness: 600,
+                        damping: 30,
+                      }}
                     />
                   </span>
 
-                  {showLabels && <span className="text-xs font-medium">Menu</span>}
+                  {showLabels && (
+                    <span className="text-xs font-medium">Menu</span>
+                  )}
                 </motion.button>
               </TooltipTrigger>
 
               <TooltipContent className="bg-white text-black">
-                {isMenuOpen ? 'Close menu' : 'Menu'}
+                {isMenuOpen ? "Close menu" : "Menu"}
               </TooltipContent>
             </Tooltip>
 
             {bottomNavLinks.map((navItem, index) => {
-              const label = getBottomNavLabel(navItem)
-              const href = getBottomNavHref(navItem)
-              const isActive = isPathActive(href, normalizedCurrentPathname, label)
-              const icon = getBottomNavIcon(navItem)
+              const label = getBottomNavLabel(navItem);
+              const href = getBottomNavHref(navItem);
+              const isActive = isPathActive(
+                href,
+                normalizedCurrentPathname,
+                label,
+              );
+              const icon = getBottomNavIcon(navItem);
               const showLabelForItem =
-                navItem.type === 'link' ? showLabels && (navItem.showLabel ?? true) : showLabels
+                navItem.type === "link"
+                  ? showLabels && (navItem.showLabel ?? true)
+                  : showLabels;
 
               return (
                 <Tooltip key={index}>
@@ -290,28 +336,32 @@ export default function MobileBottomNav({ data }: MobileBottomNavProps) {
                     <Link
                       href={href}
                       className={cn(
-                        'nav-button flex h-8 w-8 flex-col items-center justify-center gap-1 px-3 py-0 text-stone-300 dark:text-stone-300 transition-colors hover:text-foreground',
+                        "nav-button flex h-8 w-8 flex-col items-center justify-center gap-1 px-3 py-0 text-stone-300 dark:text-stone-300 transition-colors hover:text-foreground",
                         isActive &&
-                          'nav-button-active border-b-[3px] border-lime-500 font-semibold text-foreground transition-all duration-300'
+                          "nav-button-active border-b-[3px] border-lime-500 font-semibold text-foreground transition-all duration-300",
                       )}
-                      {...(navItem.type === 'link' && navItem.link?.newTab
-                        ? { target: '_blank', rel: 'noopener noreferrer' }
+                      {...(navItem.type === "link" && navItem.link?.newTab
+                        ? { target: "_blank", rel: "noopener noreferrer" }
                         : {})}
-                      aria-current={isActive ? 'page' : undefined}
+                      aria-current={isActive ? "page" : undefined}
                       aria-label={label || undefined}
                       onClick={() => setIsMenuOpen(false)}
                     >
                       {icon || <Home className="size-6" />}
 
                       {showLabelForItem && (
-                        <span className="max-w-[60px] truncate text-xs font-medium">{label}</span>
+                        <span className="max-w-[60px] truncate text-xs font-medium">
+                          {label}
+                        </span>
                       )}
                     </Link>
                   </TooltipTrigger>
 
-                  <TooltipContent className="bg-white text-black">{label}</TooltipContent>
+                  <TooltipContent className="bg-white text-black">
+                    {label}
+                  </TooltipContent>
                 </Tooltip>
-              )
+              );
             })}
           </div>
         </TooltipProvider>
@@ -330,10 +380,10 @@ export default function MobileBottomNav({ data }: MobileBottomNavProps) {
             onClick={() => setIsMenuOpen(false)}
           >
             <motion.div
-              initial={{ y: '100%' }}
+              initial={{ y: "100%" }}
               animate={{ y: 0 }}
-              exit={{ y: '100%' }}
-              transition={{ duration: 0.3, ease: 'easeOut' }}
+              exit={{ y: "100%" }}
+              transition={{ duration: 0.3, ease: "easeOut" }}
               className="absolute inset-0 flex flex-col bg-background"
               onClick={(e) => e.stopPropagation()}
             >
@@ -346,39 +396,57 @@ export default function MobileBottomNav({ data }: MobileBottomNavProps) {
                 data-lenis-prevent
               >
                 {navItems.map((navItem, index) => {
-                  if (navItem.type === 'link') {
-                    const label = getBottomNavLabel(navItem)
-                    const href = normalizeProductRoute(getLinkHref(navItem.link), label)
-                    const isActive = isPathActive(href, normalizedCurrentPathname, label)
-                    const icon = renderIcon(navItem.link?.icon, 'size-5', navItem.link?.customIcon)
-                    const iconPosition = navItem.link?.iconPosition || 'before'
+                  if (navItem.type === "link") {
+                    const label = getBottomNavLabel(navItem);
+                    const href = normalizeProductRoute(
+                      getLinkHref(navItem.link),
+                      label,
+                    );
+                    const isActive = isPathActive(
+                      href,
+                      normalizedCurrentPathname,
+                      label,
+                    );
+                    const icon = renderIcon(
+                      navItem.link?.icon,
+                      "size-5",
+                      (navItem.link as any)?.customIcon,
+                    );
+                    const iconPosition =
+                      (navItem.link as any)?.iconPosition || "before";
 
                     return (
                       <Link
                         key={index}
                         href={href}
-                        aria-current={isActive ? 'page' : undefined}
+                        aria-current={isActive ? "page" : undefined}
                         onClick={() => setIsMenuOpen(false)}
                         className={cn(
-                          'flex items-center gap-3 rounded-lg px-4 py-3 transition-colors hover:bg-stone-800/30',
-                          isActive && 'bg-accent font-semibold text-accent-foreground'
+                          "flex items-center gap-3 rounded-lg px-4 py-3 transition-colors hover:bg-stone-800/30",
+                          isActive &&
+                            "bg-accent font-semibold text-accent-foreground",
                         )}
                         {...(navItem.link?.newTab
-                          ? { target: '_blank', rel: 'noopener noreferrer' }
+                          ? { target: "_blank", rel: "noopener noreferrer" }
                           : {})}
                       >
-                        {icon && iconPosition === 'before' && icon}
-                        <span className="text-base font-medium">{navItem.link?.label}</span>
-                        {icon && iconPosition === 'after' && icon}
+                        {icon && iconPosition === "before" && icon}
+                        <span className="text-base font-medium">
+                          {navItem.link?.label}
+                        </span>
+                        {icon && iconPosition === "after" && icon}
                       </Link>
-                    )
+                    );
                   }
 
-                  const triggerIcon = renderIcon(navItem.triggerIcon, 'size-5')
-                  const isExpanded = expandedDropdown === index
+                  const triggerIcon = renderIcon(navItem.triggerIcon, "size-5");
+                  const isExpanded = expandedDropdown === index;
 
                   return (
-                    <div key={index} className="overflow-hidden rounded-lg border border-border">
+                    <div
+                      key={index}
+                      className="overflow-hidden rounded-lg border border-border"
+                    >
                       <button
                         aria-expanded={isExpanded}
                         onClick={() => toggleDropdown(index)}
@@ -386,13 +454,15 @@ export default function MobileBottomNav({ data }: MobileBottomNavProps) {
                       >
                         <div className="flex items-center gap-3">
                           {triggerIcon}
-                          <span className="text-base font-medium">{navItem.label}</span>
+                          <span className="text-base font-medium">
+                            {navItem.label}
+                          </span>
                         </div>
 
                         <ChevronDown
                           className={cn(
-                            'size-5 transition-transform duration-200',
-                            isExpanded && 'rotate-180'
+                            "size-5 transition-transform duration-200",
+                            isExpanded && "rotate-180",
                           )}
                         />
                       </button>
@@ -401,12 +471,12 @@ export default function MobileBottomNav({ data }: MobileBottomNavProps) {
                         {isExpanded && (
                           <motion.div
                             initial={{ height: 0, opacity: 0 }}
-                            animate={{ height: 'auto', opacity: 1 }}
+                            animate={{ height: "auto", opacity: 1 }}
                             exit={{ height: 0, opacity: 0 }}
                             transition={{ duration: 0.2 }}
                             className="overflow-hidden bg-muted/50"
                           >
-                            {navItem.type === 'dropdown-richtext' && (
+                            {navItem.type === "dropdown-richtext" && (
                               <div className="space-y-4 p-4">
                                 {navItem.richTextContent && (
                                   <div className="rounded-md bg-gradient-to-b from-muted/50 to-muted px-3 py-2">
@@ -420,106 +490,131 @@ export default function MobileBottomNav({ data }: MobileBottomNavProps) {
                                 )}
 
                                 <div className="space-y-1 grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-8 ">
-                                  {navItem.v1_children?.map((child, childIndex) => {
-                                    const childLabel = child.link?.label
-                                    const childHref = normalizeProductRoute(
-                                      getLinkHref(child.link),
-                                      childLabel
-                                    )
-                                    const isChildActive = isPathActive(
-                                      childHref,
-                                      normalizedCurrentPathname,
-                                      childLabel
-                                    )
-                                    const childIcon = renderIcon(
-                                      child.link?.icon,
-                                      'size-5',
-                                      child.link?.customIcon
-                                    )
-                                    const childIconPosition = child.link?.iconPosition || 'before'
-                                    const showChildLabel =
-                                      showLabels &&
-                                      (('showLabel' in child ? child.showLabel : undefined) ?? true)
-
-                                    return (
-                                      <Link
-                                        key={childIndex}
-                                        href={childHref}
-                                        aria-current={isChildActive ? 'page' : undefined}
-                                        onClick={() => setIsMenuOpen(false)}
-                                        className={cn(
-                                          'rounded-md px-1 py-1 md:px-3 md:py-2 transition-colors hover:bg-stone-800/30 flex flex-col items-start justify-end align-top',
-                                          isChildActive &&
-                                            'bg-accent font-semibold text-stone-200 dark:text-stone-200'
-                                        )}
-                                      >
-                                        <div className="flex items-center gap-3">
-                                          {childIcon && childIconPosition === 'before' && childIcon}
-
-                                          {/* show Label inside menu */}
-                                          <span className="text-sm font-medium text-stone-200 dark:text-stone-200">
-                                            {child.link?.label}
-                                          </span>
+                                  {navItem.v1_children?.map(
+                                    (
+                                      child: HeaderChildItem,
+                                      childIndex: number,
+                                    ) => {
+                                      const childLabel = child.link?.label;
+                                      const childHref = normalizeProductRoute(
+                                        getLinkHref(child.link),
+                                        childLabel,
+                                      );
+                                      const isChildActive = isPathActive(
+                                        childHref,
+                                        normalizedCurrentPathname,
+                                        childLabel,
+                                      );
+                                      const childIcon = renderIcon(
+                                        child.link?.icon,
+                                        "size-5",
+                                        child.link?.customIcon,
+                                      );
+                                      const childIconPosition =
+                                        child.link?.iconPosition || "before";
+                                      const showChildLabel =
+                                        showLabels &&
+                                        (("showLabel" in child
+                                          ? child.showLabel
+                                          : undefined) ??
+                                          true);
+
+                                      return (
+                                        <Link
+                                          key={childIndex}
+                                          href={childHref}
+                                          aria-current={
+                                            isChildActive ? "page" : undefined
+                                          }
+                                          onClick={() => setIsMenuOpen(false)}
+                                          className={cn(
+                                            "rounded-md px-1 py-1 md:px-3 md:py-2 transition-colors hover:bg-stone-800/30 flex flex-col items-start justify-end align-top",
+                                            isChildActive &&
+                                              "bg-accent font-semibold text-stone-200 dark:text-stone-200",
+                                          )}
+                                        >
+                                          <div className="flex items-center gap-3">
+                                            {childIcon &&
+                                              childIconPosition === "before" &&
+                                              childIcon}
+
+                                            {/* show Label inside menu */}
+                                            <span className="text-sm font-medium text-stone-200 dark:text-stone-200">
+                                              {child.link?.label}
+                                            </span>
 
-                                          {/* {showChildLabel && (
+                                            {/* {showChildLabel && (
                                             <span className="text-sm font-medium text-stone-200 dark:text-stone-200">
                                               {child.link?.label}
                                             </span>
                                           )} */}
 
-                                          {childIcon && childIconPosition === 'after' && childIcon}
-                                        </div>
-
-                                        {'description' in child && child.description && (
-                                          <p className="mt-1 text-xs text-stone-400 dark:text-stone-400 text-ellipsis [-webkit-line-clamp:2] [display:-webkit-box] [-webkit-box-orient:vertical] overflow-hidden">
-                                            {child.description}
-                                          </p>
-                                        )}
-                                      </Link>
-                                    )
-                                  })}
+                                            {childIcon &&
+                                              childIconPosition === "after" &&
+                                              childIcon}
+                                          </div>
+
+                                          {"description" in child &&
+                                            child.description && (
+                                              <p className="mt-1 text-xs text-stone-400 dark:text-stone-400 text-ellipsis [-webkit-line-clamp:2] [display:-webkit-box] [-webkit-box-orient:vertical] overflow-hidden">
+                                                {child.description}
+                                              </p>
+                                            )}
+                                        </Link>
+                                      );
+                                    },
+                                  )}
                                 </div>
                               </div>
                             )}
 
-                            {(navItem.type === 'dropdown-single-desc' ||
-                              navItem.type === 'dropdown-single' ||
-                              navItem.type === 'dropdown-icons') && (
+                            {(navItem.type === "dropdown-single-desc" ||
+                              navItem.type === "dropdown-single" ||
+                              navItem.type === "dropdown-icons") && (
                               <div className="space-y-1 p-4">
-                                {(navItem.type === 'dropdown-single-desc'
+                                {(navItem.type === "dropdown-single-desc"
                                   ? navItem.v4_children
-                                  : navItem.type === 'dropdown-single'
+                                  : navItem.type === "dropdown-single"
                                     ? navItem.v5_children
                                     : navItem.v6_children
-                                )?.map((child, childIndex) => (
-                                  <Link
-                                    key={childIndex}
-                                    href={normalizeProductRoute(getLinkHref(child.link), child.link?.label)}
-                                    onClick={() => setIsMenuOpen(false)}
-                                    className="block rounded-md px-3 py-2 transition-colors hover:bg-stone-800/30"
-                                  >
-                                    <div className="flex items-center gap-2">
-                                      {renderIcon(child.link?.icon, 'size-4')}
-
-                                      <span className="text-sm font-medium text-stone-200 dark:text-stone-200">
-                                        {child.link?.label}
-                                      </span>
-                                    </div>
-
-                                    {'description' in child && child.description && (
-                                      <p className="mt-1 text-xs text-stone-300 dark:text-stone-300 text-ellipsis [-webkit-line-clamp:2] [display:-webkit-box] [-webkit-box-orient:vertical] overflow-hidden">
-                                        {String(child.description)}
-                                      </p>
-                                    )}
-                                  </Link>
-                                ))}
+                                )?.map(
+                                  (
+                                    child: HeaderChildItem,
+                                    childIndex: number,
+                                  ) => (
+                                    <Link
+                                      key={childIndex}
+                                      href={normalizeProductRoute(
+                                        getLinkHref(child.link),
+                                        child.link?.label,
+                                      )}
+                                      onClick={() => setIsMenuOpen(false)}
+                                      className="block rounded-md px-3 py-2 transition-colors hover:bg-stone-800/30"
+                                    >
+                                      <div className="flex items-center gap-2">
+                                        {renderIcon(child.link?.icon, "size-4")}
+
+                                        <span className="text-sm font-medium text-stone-200 dark:text-stone-200">
+                                          {child.link?.label}
+                                        </span>
+                                      </div>
+
+                                      {"description" in child &&
+                                        child.description && (
+                                          <p className="mt-1 text-xs text-stone-300 dark:text-stone-300 text-ellipsis [-webkit-line-clamp:2] [display:-webkit-box] [-webkit-box-orient:vertical] overflow-hidden">
+                                            {String(child.description)}
+                                          </p>
+                                        )}
+                                    </Link>
+                                  ),
+                                )}
                               </div>
                             )}
                           </motion.div>
                         )}
                       </AnimatePresence>
                     </div>
-                  )
+                  );
                 })}
               </div>
             </motion.div>
@@ -541,5 +636,5 @@ export default function MobileBottomNav({ data }: MobileBottomNavProps) {
         }
       `}</style>
     </>
-  )
+  );
 }