blocks-dusted 0.1.8 → 0.1.10

package/templates/components/HeaderDD02/index.tsx

@@ -1,30 +1,39 @@
-'use client'
+"use client";
 
-import { usePathname } from 'next/navigation'
-import React, { useEffect, useMemo, useState, useRef } from 'react'
-import Link from 'next/link'
+import { usePathname } from "next/navigation";
+import React, { useEffect, useMemo, useState, useRef } from "react";
+import Link from "next/link";
 import {
   NavigationMenu,
   NavigationMenuContent,
   NavigationMenuItem,
   NavigationMenuLink,
   NavigationMenuList,
-  NavigationMenuTrigger
-} from '@/components/ui/navigation-menu'
-import { CircleCheck, CircleHelp, Circle, Home, User, Settings, Mail, Phone } from 'lucide-react'
-import type { Header as HeaderType } from '@/payload-types'
-import RichText from '@/components/RichText'
-import { cn } from '@/utilities/ui'
+  NavigationMenuTrigger,
+} from "@/components/ui/navigation-menu";
+import {
+  CircleCheck,
+  CircleHelp,
+  Circle,
+  Home,
+  User,
+  Settings,
+  Mail,
+  Phone,
+} from "lucide-react";
+import type { Header as HeaderType } from "@/payload-types";
+import RichText from "@/components/RichText";
+import { cn } from "@/utilities/ui";
 
-import * as LucideIcons from 'lucide-react'
-import { motion } from 'framer-motion'
+import * as LucideIcons from "lucide-react";
+import { motion } from "framer-motion";
 
-import MobileBottomNav from './MobileBottomNav'
+import MobileBottomNav from "./MobileBottomNav";
 
 interface HeaderDD02Props {
-  data?: HeaderType
-  variant?: 'default' | 'centered' | 'fullwidth'
-  sticky?: boolean
+  data?: HeaderType;
+  variant?: "default" | "centered" | "fullwidth";
+  sticky?: boolean;
 }
 
 const iconMap = {
@@ -35,76 +44,90 @@ const iconMap = {
   User,
   Settings,
   Mail,
-  Phone
-}
+  Phone,
+};
 
-type CartVisibilityMode = 'always' | 'hide' | 'show'
+type CartVisibilityMode = "always" | "hide" | "show";
 
 type CartVisibilityEntry = {
-  path?: string | null
-}
+  path?: string | null;
+};
 
 type CartVisibilityConfig = {
-  mode?: CartVisibilityMode
-  paths?: CartVisibilityEntry[]
-}
+  mode?: CartVisibilityMode;
+  paths?: CartVisibilityEntry[];
+};
 
-type HeaderDD02Data = HeaderType['header02'] & {
-  cartButtonVisibility?: CartVisibilityConfig
-}
+type HeaderNavItem = NonNullable<
+  NonNullable<HeaderType["header02"]>["navItems"]
+>[number] &
+  Record<string, any>;
+type HeaderChildItem = Record<string, any>;
+
+type HeaderDD02Data = HeaderType["header02"] & {
+  cartButtonVisibility?: CartVisibilityConfig;
+};
 
 const normalizePath = (value?: string | null) => {
-  if (!value) return '/'
-  const [base] = value.split(/[?#]/)
-  if (!base) return '/'
-  if (base !== '/' && base.endsWith('/')) {
-    return base.slice(0, -1)
+  if (!value) return "/";
+  const [base] = value.split(/[?#]/);
+  if (!base) return "/";
+  if (base !== "/" && base.endsWith("/")) {
+    return base.slice(0, -1);
   }
-  return base || '/'
-}
+  return base || "/";
+};
 
 // Helper to extract href from link field
 const getLinkHref = (link: any): string => {
-  if (!link) return '#'
-  if (link.type === 'reference') {
-    const value = link.reference?.value
-    if (typeof value === 'object' && 'slug' in value) {
-      return `/${value.slug}`
+  if (!link) return "#";
+  if (link.type === "reference") {
+    const value = link.reference?.value;
+    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;
+};
 
 // Helper to render icon from link field or fallback
-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-4'}
+        className={className || "size-4"}
         alt=""
         aria-hidden="true"
         loading="lazy"
       />
-    )
+    );
   }
 
-  if (!iconName) return null
-  const IconComponent = (LucideIcons as any)[iconName]
-  if (!IconComponent) return null
-  return <IconComponent className={className || 'size-4'} />
-}
+  if (!iconName) return null;
+  const IconComponent = (LucideIcons as any)[iconName];
+  if (!IconComponent) return null;
+  return <IconComponent className={className || "size-4"} />;
+};
 
 const dropdownStyles = `
   .dropdown-richtext-content {
@@ -129,7 +152,7 @@ const dropdownStyles = `
     max-height: var(--radix-navigation-menu-viewport-height);
     overflow: auto;
   }
-`
+`;
 
 function ListItem({
   title,
@@ -137,14 +160,14 @@ function ListItem({
   href,
   className,
   icon,
-  iconPosition = 'before'
+  iconPosition = "before",
 }: {
-  title: string
-  children?: React.ReactNode
-  href: string
-  className?: string
-  icon?: React.ReactNode
-  iconPosition?: 'before' | 'after'
+  title: string;
+  children?: React.ReactNode;
+  href: string;
+  className?: string;
+  icon?: React.ReactNode;
+  iconPosition?: "before" | "after";
 }) {
   return (
     <li>
@@ -152,19 +175,19 @@ function ListItem({
         <Link
           href={href}
           className={cn(
-            'block select-none space-y-1 no-underline outline-none transition-colors hover:bg-zinc-800/50 duration-300 rounded-sm hover:text-accent  focus:bg-accent focus:text-stone-200 py-2 px-3',
-            className
+            "block select-none space-y-1 no-underline outline-none transition-colors hover:bg-zinc-800/50 duration-300 rounded-sm hover:text-accent  focus:bg-accent focus:text-stone-200 py-2 px-3",
+            className,
           )}
         >
           <div className="text-sm font-medium leading-none flex items-center gap-2">
-            {icon && iconPosition === 'before' && icon}
+            {icon && iconPosition === "before" && icon}
             {title}
-            {icon && iconPosition === 'after' && icon}
+            {icon && iconPosition === "after" && icon}
           </div>
           {children && (
             <p
               className="line-clamp-2 text-xs leading-snug text-stone-400 mt-0 !pt-1 -translate-y-2"
-              style={{ lineHeight: '1.3' }}
+              style={{ lineHeight: "1.3" }}
             >
               {children}
             </p>
@@ -172,21 +195,21 @@ function ListItem({
         </Link>
       </NavigationMenuLink>
     </li>
-  )
+  );
 }
 
 function ListItemWithIcon({
   title,
   href,
   icon,
-  className
+  className,
 }: {
-  title: string
-  href: string
-  icon: string
-  className?: string
+  title: string;
+  href: string;
+  icon: string;
+  className?: string;
 }) {
-  const IconComponent = iconMap[icon as keyof typeof iconMap]
+  const IconComponent = iconMap[icon as keyof typeof iconMap];
 
   return (
     <li>
@@ -194,8 +217,8 @@ function ListItemWithIcon({
         <Link
           href={href}
           className={cn(
-            'flex items-center gap-2 select-none no-underline outline-none transition-colors hover:bg-accent hover:text-stone-200 focus:bg-accent focus:text-stone-200 py-2 px-3',
-            className
+            "flex items-center gap-2 select-none no-underline outline-none transition-colors hover:bg-accent hover:text-stone-200 focus:bg-accent focus:text-stone-200 py-2 px-3",
+            className,
           )}
         >
           {IconComponent && <IconComponent className="size-4" />}
@@ -203,55 +226,68 @@ function ListItemWithIcon({
         </Link>
       </NavigationMenuLink>
     </li>
-  )
+  );
 }
 
-export default function HeaderDD02({ data, variant = 'default', sticky = true }: HeaderDD02Props) {
+export default function HeaderDD02({
+  data,
+  variant = "default",
+  sticky = true,
+}: HeaderDD02Props) {
   // Get scroll settings from data with defaults
-  const enableHideOnScroll = data?.header02?.enableHideOnScroll ?? true
-  const scrollThreshold = data?.header02?.scrollThreshold ?? 100
-  const animationDuration = data?.header02?.animationDuration ?? 0.3
-  const [forceOpen, setForceOpen] = useState(true)
+  const enableHideOnScroll = data?.header02?.enableHideOnScroll ?? true;
+  const scrollThreshold = data?.header02?.scrollThreshold ?? 100;
+  const animationDuration = data?.header02?.animationDuration ?? 0.3;
+  const [forceOpen, setForceOpen] = useState(true);
 
   // State for handling scroll behavior
-  const [isHidden, setIsHidden] = useState(false)
-  const lastScrollY = useRef(0)
-  const pathname = usePathname()
-  const normalizedCurrentPathname = useMemo(() => normalizePath(pathname), [pathname])
-  const header02Data = data?.header02 as HeaderDD02Data | undefined
+  const [isHidden, setIsHidden] = useState(false);
+  const lastScrollY = useRef(0);
+  const pathname = usePathname();
+  const normalizedCurrentPathname = useMemo(
+    () => normalizePath(pathname),
+    [pathname],
+  );
+  const header02Data = data?.header02 as HeaderDD02Data | undefined;
   const cartVisibilityConfig =
-    header02Data?.cartButtonVisibility ?? (data as any)?.header02CartButtonVisibility
-  const normalizedPathname = useMemo(() => normalizePath(pathname), [pathname])
-  const cartVisibilityPaths = useMemo(
+    header02Data?.cartButtonVisibility ??
+    (data as any)?.header02CartButtonVisibility;
+  const normalizedPathname = useMemo(() => normalizePath(pathname), [pathname]);
+  const cartVisibilityPaths = useMemo<string[]>(
     () =>
-      (cartVisibilityConfig?.paths ?? [])
+      ((cartVisibilityConfig?.paths ?? []) as CartVisibilityEntry[])
         .map((entry) => normalizePath(entry?.path))
         .filter((path): path is string => Boolean(path)),
-    [cartVisibilityConfig?.paths]
-  )
-  const cartVisibilityMode = cartVisibilityConfig?.mode ?? 'always'
+    [cartVisibilityConfig?.paths],
+  );
+  const cartVisibilityMode = cartVisibilityConfig?.mode ?? "always";
   const showCartButton = useMemo(() => {
-    if (cartVisibilityMode === 'always') return true
-    const matches = cartVisibilityPaths.includes(normalizedPathname)
-    return cartVisibilityMode === 'hide' ? !matches : matches
-  }, [cartVisibilityMode, cartVisibilityPaths, normalizedPathname])
+    if (cartVisibilityMode === "always") return true;
+    const matches = cartVisibilityPaths.includes(normalizedPathname);
+    return cartVisibilityMode === "hide" ? !matches : matches;
+  }, [cartVisibilityMode, cartVisibilityPaths, normalizedPathname]);
 
   // Effect for scroll hide/show behavior
   useEffect(() => {
-    if (!enableHideOnScroll) return
+    if (!enableHideOnScroll) return;
 
     const handleScroll = () => {
-      const currentScrollY = window.scrollY
-      setIsHidden(currentScrollY > lastScrollY.current && currentScrollY > scrollThreshold)
-      lastScrollY.current = currentScrollY
-    }
-
-    window.addEventListener('scroll', handleScroll, { passive: true })
-    return () => window.removeEventListener('scroll', handleScroll)
-  }, [enableHideOnScroll, scrollThreshold])
+      const currentScrollY = window.scrollY;
+      setIsHidden(
+        currentScrollY > lastScrollY.current &&
+          currentScrollY > scrollThreshold,
+      );
+      lastScrollY.current = currentScrollY;
+    };
+
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [enableHideOnScroll, scrollThreshold]);
 
   // Extract navItems from header02 data
-  const navItems = data?.header02?.navItems || (data as any)?.navItems || []
+  const navItems: HeaderNavItem[] = (data?.header02?.navItems ||
+    (data as any)?.navItems ||
+    []) as HeaderNavItem[];
 
   return (
     <>
@@ -259,74 +295,85 @@ export default function HeaderDD02({ data, variant = 'default', sticky = true }:
         {dropdownStyles}
       </style>
       {/* Desktop Navigation - Hidden on mobile */}
-      <header className="header-02 fixed container left-0 right-0 mx-auto w-screen mt-2 justify-between hidden md:flex">
+      <header className="header-02 fixed container left-0 right-0 mx-auto w-screen mt-2 justify-center md:flex">
         <motion.nav
           initial={{ opacity: 1, y: 0 }}
           animate={{ opacity: 1, y: enableHideOnScroll && isHidden ? -100 : 0 }}
           transition={{ duration: animationDuration }}
-          className={`navbar fixed top-0 z-50 right-0 ${variant === 'default' ? 'text-left' : ''} ${sticky ? 'sticky top-0 z-50' : ''} transition-transform duration-300 ease-out`}
+          className={`navbar fixed top-0 z-50 right-0 ${variant === "default" ? "text-left" : ""} ${sticky ? "sticky top-0 z-50" : ""} transition-transform duration-300 ease-out`}
           id="topnav"
         >
           <div className="nav">
             <NavigationMenu
               viewport={false}
-              className="header02-navigation-menu shadow-glass dark:border-neutral-700 !flex w-full items-center justify-between rounded-2xl border px-5 py-0 pr-2.5 backdrop-blur-md relative"
+              className="header02-navigation-menu shadow-glass dark:border-neutral-700 flex! w-full items-center justify-between rounded-xl border px-6 py-0 backdrop-blur-md relative"
             >
-              <NavigationMenuList className="ml-2 gap-4 md:gap-6 flex">
+              <NavigationMenuList className="gap-4 md:gap-6 flex">
                 {navItems.map((navItem, index) => {
                   // Simple Link - works
-                  if (navItem.type === 'link') {
-                    const href = getLinkHref(navItem.link)
-                    const normalizedHref = normalizePath(href)
-                    const isActive = normalizedHref === normalizedCurrentPathname
-                    const icon = renderIcon(navItem.link?.icon, undefined, navItem.link?.customIcon)
-                    const iconPosition = navItem.link?.iconPosition || 'before'
-                    const showLabel = navItem.showLabel ?? true
+                  if (navItem.type === "link") {
+                    const href = getLinkHref(navItem.link);
+                    const normalizedHref = normalizePath(href);
+                    const isActive =
+                      normalizedHref === normalizedCurrentPathname;
+                    const icon = renderIcon(
+                      navItem.link?.icon,
+                      undefined,
+                      (navItem.link as any)?.customIcon,
+                    );
+                    const iconPosition =
+                      (navItem.link as any)?.iconPosition || "before";
+                    const showLabel = navItem.showLabel ?? true;
                     return (
                       <NavigationMenuItem key={index}>
                         <NavigationMenuLink
                           asChild
                           className={cn(
-                            'header02-nav-btn !flex flex-row items-center justify-center px-0 bg-transparent text-stone-200 dark:text-stone-200 gap-0 text-sm transition-colors focus:outline-none',
+                            "header02-nav-btn !flex flex-row items-center justify-center px-0 bg-transparent text-stone-200 dark:text-stone-200 gap-0 text-sm transition-colors focus:outline-none",
                             isActive &&
-                              'header02-nav-btn-active text-stone-200 dark:text-stone-200 font-semibold'
+                              "header02-nav-btn-active text-stone-200 dark:text-stone-200 font-semibold",
                           )}
                         >
                           <Link
                             href={href}
                             {...(navItem.link?.newTab
-                              ? { target: '_blank', rel: 'noopener noreferrer' }
+                              ? { target: "_blank", rel: "noopener noreferrer" }
                               : {})}
                             className="flex items-center gap-1 h-[2.5rem] card-bottom-lit"
                           >
-                            {icon && iconPosition === 'before' && icon}
+                            {icon && iconPosition === "before" && icon}
                             {showLabel && navItem.link?.label}
-                            {icon && iconPosition === 'after' && icon}
+                            {icon && iconPosition === "after" && icon}
                           </Link>
                         </NavigationMenuLink>
                       </NavigationMenuItem>
-                    )
+                    );
                   }
 
                   // Dropdown with RichText + Links (Variant 1) - works
-                  if (navItem.type === 'dropdown-richtext') {
-                    const triggerIcon = renderIcon(navItem.triggerIcon)
-                    const triggerIconPosition = navItem.triggerIconPosition || 'before'
+                  if (navItem.type === "dropdown-richtext") {
+                    const triggerIcon = renderIcon(navItem.triggerIcon);
+                    const triggerIconPosition =
+                      navItem.triggerIconPosition || "before";
                     return (
                       <NavigationMenuItem
                         key={index}
                         className="header02-nav-btn card-bottom-lit bg-transparent text-stone-200 dark:text-stone-200"
                       >
                         <NavigationMenuTrigger className="flex items-center gap-2">
-                          {triggerIcon && triggerIconPosition === 'before' && triggerIcon}
+                          {triggerIcon &&
+                            triggerIconPosition === "before" &&
+                            triggerIcon}
                           {navItem.label}
-                          {triggerIcon && triggerIconPosition === 'after' && triggerIcon}
+                          {triggerIcon &&
+                            triggerIconPosition === "after" &&
+                            triggerIcon}
                         </NavigationMenuTrigger>
                         <NavigationMenuContent className="header02-dropdown">
                           <motion.div
                             initial={{ opacity: 0, x: -50 }}
                             animate={{ opacity: 1, x: 0 }}
-                            transition={{ duration: 0.2, ease: 'easeOut' }}
+                            transition={{ duration: 0.2, ease: "easeOut" }}
                             className="border border-border rounded-md overflow-hidden grid gap-3 pt-0 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]"
                           >
                             <div className="row-span-4">
@@ -344,165 +391,202 @@ export default function HeaderDD02({ data, variant = 'default', sticky = true }:
                               </NavigationMenuLink>
                             </div>
                             <ul className="flex flex-col gap-2 pt-4 p-1">
-                              {navItem.v1_children?.map((child, childIndex) => (
-                                <ListItem
-                                  key={childIndex}
-                                  title={child.link?.label || ''}
-                                  href={getLinkHref(child.link)}
-                                  icon={renderIcon(
-                                    child.link?.icon,
-                                    undefined,
-                                    child.link?.customIcon
-                                  )}
-                                  iconPosition={child.link?.iconPosition || 'before'}
-                                  className="text-sm"
-                                >
-                                  {child.description}
-                                </ListItem>
-                              ))}
+                              {navItem.v1_children?.map(
+                                (
+                                  child: HeaderChildItem,
+                                  childIndex: number,
+                                ) => (
+                                  <ListItem
+                                    key={childIndex}
+                                    title={child.link?.label || ""}
+                                    href={getLinkHref(child.link)}
+                                    icon={renderIcon(
+                                      child.link?.icon,
+                                      undefined,
+                                      child.link?.customIcon,
+                                    )}
+                                    iconPosition={
+                                      child.link?.iconPosition || "before"
+                                    }
+                                    className="text-sm"
+                                  >
+                                    {child.description}
+                                  </ListItem>
+                                ),
+                              )}
                             </ul>
                           </motion.div>
                         </NavigationMenuContent>
                       </NavigationMenuItem>
-                    )
+                    );
                   }
 
                   // Dropdown - Single Column with Description (Variant 4) - works
-                  if (navItem.type === 'dropdown-single-desc') {
-                    const triggerIcon = renderIcon(navItem.triggerIcon)
-                    const triggerIconPosition = navItem.triggerIconPosition || 'before'
+                  if (navItem.type === "dropdown-single-desc") {
+                    const triggerIcon = renderIcon(navItem.triggerIcon);
+                    const triggerIconPosition =
+                      navItem.triggerIconPosition || "before";
                     return (
                       <NavigationMenuItem
                         key={index}
                         className="header02-nav-btn card-bottom-lit text-stone-200 dark:text-stone-200"
                       >
                         <NavigationMenuTrigger className="flex items-center gap-2">
-                          {triggerIcon && triggerIconPosition === 'before' && triggerIcon}
+                          {triggerIcon &&
+                            triggerIconPosition === "before" &&
+                            triggerIcon}
                           {navItem.label}
-                          {triggerIcon && triggerIconPosition === 'after' && triggerIcon}
+                          {triggerIcon &&
+                            triggerIconPosition === "after" &&
+                            triggerIcon}
                         </NavigationMenuTrigger>
                         <NavigationMenuContent className="p-0">
                           <motion.ul
                             initial={{ opacity: 0, x: -50 }}
                             animate={{ opacity: 1, x: 0 }}
-                            transition={{ duration: 0.2, ease: 'easeOut' }}
+                            transition={{ duration: 0.2, ease: "easeOut" }}
                             className="bg-7 border border-border rounded-md overflow-hidden grid gap-3 p-1 w-fit md:w-[14rem]"
                           >
-                            {navItem.v1_children?.map((child, childIndex) => (
-                              <ListItem
-                                key={childIndex}
-                                title={child.link?.label || ''}
-                                href={getLinkHref(child.link)}
-                                icon={renderIcon(
-                                  child.link?.icon,
-                                  undefined,
-                                  child.link?.customIcon
-                                )}
-                                iconPosition={child.link?.iconPosition || 'before'}
-                              >
-                                {child.description}
-                              </ListItem>
-                            ))}
+                            {navItem.v4_children?.map(
+                              (child: HeaderChildItem, childIndex: number) => (
+                                <ListItem
+                                  key={childIndex}
+                                  title={child.link?.label || ""}
+                                  href={getLinkHref(child.link)}
+                                  icon={renderIcon(
+                                    child.link?.icon,
+                                    undefined,
+                                    child.link?.customIcon,
+                                  )}
+                                  iconPosition={
+                                    child.link?.iconPosition || "before"
+                                  }
+                                >
+                                  {child.description}
+                                </ListItem>
+                              ),
+                            )}
                           </motion.ul>
                         </NavigationMenuContent>
                       </NavigationMenuItem>
-                    )
+                    );
                   }
 
                   // Dropdown - Single Column no Description (Variant 5) - works
-                  if (navItem.type === 'dropdown-single') {
-                    const triggerIcon = renderIcon(navItem.triggerIcon)
-                    const triggerIconPosition = navItem.triggerIconPosition || 'before'
+                  if (navItem.type === "dropdown-single") {
+                    const triggerIcon = renderIcon(navItem.triggerIcon);
+                    const triggerIconPosition =
+                      navItem.triggerIconPosition || "before";
                     return (
                       <NavigationMenuItem
                         key={index}
                         className="header02-nav-btn card-bottom-lit bg-transparent text-stone-200 dark:text-stone-200"
                       >
                         <NavigationMenuTrigger className="flex items-center gap-2">
-                          {triggerIcon && triggerIconPosition === 'before' && triggerIcon}
+                          {triggerIcon &&
+                            triggerIconPosition === "before" &&
+                            triggerIcon}
                           {navItem.label}
-                          {triggerIcon && triggerIconPosition === 'after' && triggerIcon}
+                          {triggerIcon &&
+                            triggerIconPosition === "after" &&
+                            triggerIcon}
                         </NavigationMenuTrigger>
                         <NavigationMenuContent className="p-0">
                           <motion.ul
                             initial={{ opacity: 0, x: -50 }}
                             animate={{ opacity: 1, x: 0 }}
-                            transition={{ duration: 0.2, ease: 'easeOut' }}
+                            transition={{ duration: 0.2, ease: "easeOut" }}
                             className="bg-7 border border-border rounded-md overflow-hidden flex flex-col gap-2 p-1 w-fit"
                           >
-                            {navItem.v5_children?.map((child, childIndex) => (
-                              <ListItem
-                                key={childIndex}
-                                title={child.link?.label || ''}
-                                href={getLinkHref(child.link)}
-                                icon={renderIcon(
-                                  child.link?.icon,
-                                  undefined,
-                                  child.link?.customIcon
-                                )}
-                                iconPosition={child.link?.iconPosition || 'before'}
-                              />
-                            ))}
+                            {navItem.v5_children?.map(
+                              (child: HeaderChildItem, childIndex: number) => (
+                                <ListItem
+                                  key={childIndex}
+                                  title={child.link?.label || ""}
+                                  href={getLinkHref(child.link)}
+                                  icon={renderIcon(
+                                    child.link?.icon,
+                                    undefined,
+                                    child.link?.customIcon,
+                                  )}
+                                  iconPosition={
+                                    child.link?.iconPosition || "before"
+                                  }
+                                />
+                              ),
+                            )}
                           </motion.ul>
                         </NavigationMenuContent>
                       </NavigationMenuItem>
-                    )
+                    );
                   }
 
                   // Dropdown - Single Column with Icons (Variant 6) - works
-                  if (navItem.type === 'dropdown-icons') {
-                    const triggerIcon = renderIcon(navItem.triggerIcon)
-                    const triggerIconPosition = navItem.triggerIconPosition || 'before'
+                  if (navItem.type === "dropdown-icons") {
+                    const triggerIcon = renderIcon(navItem.triggerIcon);
+                    const triggerIconPosition =
+                      navItem.triggerIconPosition || "before";
                     return (
                       <NavigationMenuItem
                         key={index}
                         className="header02-nav-btn card-bottom-lit bg-transparent text-stone-200 dark:text-stone-200"
                       >
                         <NavigationMenuTrigger className="flex items-center gap-2">
-                          {triggerIcon && triggerIconPosition === 'before' && triggerIcon}
+                          {triggerIcon &&
+                            triggerIconPosition === "before" &&
+                            triggerIcon}
                           {navItem.label}
-                          {triggerIcon && triggerIconPosition === 'after' && triggerIcon}
+                          {triggerIcon &&
+                            triggerIconPosition === "after" &&
+                            triggerIcon}
                         </NavigationMenuTrigger>
                         <NavigationMenuContent className="p-0">
                           <motion.ul
                             initial={{ opacity: 0, x: -50 }}
                             animate={{ opacity: 1, x: 0 }}
-                            transition={{ duration: 0.2, ease: 'easeOut' }}
+                            transition={{ duration: 0.2, ease: "easeOut" }}
                             className="bg-7 border border-border rounded-md overflow-hidden flex flex-col gap-2 p-1 w-fit"
                           >
-                            {navItem.v6_children?.map((child, childIndex) => {
-                              const icon = renderIcon(
-                                child.link?.icon,
-                                'size-4',
-                                child.link?.customIcon
-                              )
-                              const iconPosition = child.link?.iconPosition || 'before'
-                              return (
-                                <li key={childIndex}>
-                                  <NavigationMenuLink asChild>
-                                    <Link
-                                      href={getLinkHref(child.link)}
-                                      className={cn(
-                                        'flex items-center gap-2 select-none no-underline outline-none transition-colors rounded-sm group bg-8 hover:bg-zinc-600/50 !hover:text-stone-200 focus:bg-accent focus:text-stone-200 py-2 px-3'
-                                      )}
-                                    >
-                                      {' '}
-                                      {icon && iconPosition === 'before' && icon}
-                                      <span className="!text-xs group font-medium leading-none scale-75 !hover:text-stone-200 ">
-                                        {child.link?.label}
-                                      </span>
-                                      {icon && iconPosition === 'after' && icon}
-                                    </Link>
-                                  </NavigationMenuLink>
-                                </li>
-                              )
-                            })}
+                            {navItem.v6_children?.map(
+                              (child: HeaderChildItem, childIndex: number) => {
+                                const icon = renderIcon(
+                                  child.link?.icon,
+                                  "size-4",
+                                  child.link?.customIcon,
+                                );
+                                const iconPosition =
+                                  child.link?.iconPosition || "before";
+                                return (
+                                  <li key={childIndex}>
+                                    <NavigationMenuLink asChild>
+                                      <Link
+                                        href={getLinkHref(child.link)}
+                                        className={cn(
+                                          "flex items-center gap-2 select-none no-underline outline-none transition-colors rounded-sm group bg-8 hover:bg-zinc-600/50 !hover:text-stone-200 focus:bg-accent focus:text-stone-200 py-2 px-3",
+                                        )}
+                                      >
+                                        {" "}
+                                        {icon &&
+                                          iconPosition === "before" &&
+                                          icon}
+                                        <span className="!text-xs group font-medium leading-none scale-75 !hover:text-stone-200 ">
+                                          {child.link?.label}
+                                        </span>
+                                        {icon &&
+                                          iconPosition === "after" &&
+                                          icon}
+                                      </Link>
+                                    </NavigationMenuLink>
+                                  </li>
+                                );
+                              },
+                            )}
                           </motion.ul>
                         </NavigationMenuContent>
                       </NavigationMenuItem>
-                    )
+                    );
                   }
-                  return null
+                  return null;
                 })}
               </NavigationMenuList>
             </NavigationMenu>
@@ -513,5 +597,5 @@ export default function HeaderDD02({ data, variant = 'default', sticky = true }:
       {/* Mobile Bottom Navigation - Visible only on mobile */}
       <MobileBottomNav data={data} />
     </>
-  )
+  );
 }