@djangocfg/layouts 2.1.266 → 2.1.268

package/src/layouts/PublicLayout/components/PublicNavigation.tsx

@@ -1,42 +1,45 @@
 /**
- * Public Layout Navigation
+ * Public Layout Navigation — orchestrator.
  *
- * Navigation component for PublicLayout with mobile drawer support.
- *
- * Colors: use Tailwind semantic utilities backed by `@djangocfg/ui-core` theme
- * (`packages/ui-core/src/styles/theme/light.css`, `dark.css`, `tokens.css`).
+ * Logic lives in hooks; rendering lives in NavBrand / NavDesktopItems / NavActions.
+ * This file wires them together and switches on navLayout.
  */
 
 'use client';
 
-import { ChevronDown, Menu, X } from 'lucide-react';
-import Link from 'next/link';
 import React, {
   type ReactNode,
   useEffect,
   useLayoutEffect,
   useMemo,
   useRef,
-  useState,
 } from 'react';
 
-import { useAuth } from '@djangocfg/api/auth';
 import { useAppT } from '@djangocfg/i18n';
-import {
-  Button,
-} from '@djangocfg/ui-core/components';
 import { useIsTabletOrBelow } from '@djangocfg/ui-core/hooks';
 import { cn } from '@djangocfg/ui-core/lib';
-import { usePathnameWithoutLocale } from '../../../hooks';
 
-import { UserMenu } from '../../_components/UserMenu';
+import { usePathnameWithoutLocale } from '../../../hooks';
 import { usePublicLayoutOptional } from '../context';
+import {
+  useDropdownMenu,
+  useNavbarScroll,
+  useNavbarViewportVars,
+} from '../hooks';
+import type {
+  PublicNavbarHeight,
+  PublicNavbarPosition,
+  PublicNavbarVariant,
+  PublicNavLayout,
+} from '../navbarTypes';
 import { publicFloatingChromeClassName } from '../publicShellShadow';
-import type { PublicNavbarPosition, PublicNavbarVariant } from '../navbarTypes';
-
 import type { NavigationItem, UserMenuConfig } from '../../types';
 
-export type { PublicNavbarPosition, PublicNavbarVariant } from '../navbarTypes';
+import { NavActions } from './NavActions';
+import { NavBrand } from './NavBrand';
+import { NavDesktopItems } from './NavDesktopItems';
+
+// ─── Public types (re-exported so PublicNavbar.tsx can use them) ──────────────
 
 export interface PublicDesktopDropdownRenderProps {
   item: NavigationItem;
@@ -47,14 +50,15 @@ export interface PublicDesktopDropdownRenderProps {
   defaultItems: React.ReactNode;
 }
 
-export type PublicDesktopDropdownRenderer = (props: PublicDesktopDropdownRenderProps) => React.ReactNode;
+export type PublicDesktopDropdownRenderer = (props: PublicDesktopDropdownRenderProps) => ReactNode;
+
+export type { PublicNavbarPosition, PublicNavbarVariant } from '../navbarTypes';
+
+// ─── Props ────────────────────────────────────────────────────────────────────
 
 interface PublicNavigationProps {
-  /**
-   * Brand area: any React node, or a plain string (wrapped in `<Link href={brandHref}>` as the title).
-   */
   brand?: ReactNode;
-  /** Used when `brand` is a string; also for deduping a lone nav link that matches this href (desktop). @default '/' */
+  /** @default '/' */
   brandHref?: string;
   navigation?: NavigationItem[];
   userMenu?: UserMenuConfig;
@@ -62,423 +66,222 @@ interface PublicNavigationProps {
   navbarVariant?: PublicNavbarVariant;
   navbarPosition?: PublicNavbarPosition;
   renderDesktopDropdown?: PublicDesktopDropdownRenderer;
-  /** Max visible top-level desktop items before collapsing into "More" */
+  /** Max visible top-level desktop items before collapsing into "More". @default 7 */
   desktopMaxPrimaryItems?: number;
-  /**
-   * Tailwind rounding for the floating navbar shell (e.g. `rounded-3xl`). Defaults to `rounded-2xl`.
-   * Prefer `PublicNavbar` `config.shell.rounding` (or `AppLayout` `publicChrome.navbar.shell.rounding`).
-   */
+  /** Tailwind rounding for floating variant shell. @default 'rounded-2xl' */
   rounding?: string;
   mobileMenuOpen?: boolean;
   onMobileMenuToggle?: () => void;
+  /** Desktop nav arrangement. @default 'default' */
+  navLayout?: PublicNavLayout;
+  /** Navbar vertical padding / height. @default 'md' */
+  navbarHeight?: PublicNavbarHeight;
+  /** Slide navbar off-screen on scroll-down; restore on scroll-up. @default false */
+  hideNavOnScroll?: boolean;
+  /** Transparent at page top, opaque after scrolling past threshold. @default false */
+  transparent?: boolean;
+  /** scrollY threshold for transparent → opaque transition. @default 40 */
+  transparentThreshold?: number;
 }
 
+// ─── Height map ───────────────────────────────────────────────────────────────
+
+const heightCls: Record<PublicNavbarHeight, string> = {
+  sm: 'py-2',
+  md: 'py-3.5',
+  lg: 'py-5',
+};
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
 export function PublicNavigation(props: PublicNavigationProps = {}) {
   const context = usePublicLayoutOptional();
-  const brand = props.brand;
-  const brandHref = props.brandHref ?? '/';
-  const navigation = props.navigation ?? [];
-  const userMenu = props.userMenu;
-  const containerClassName = props.containerClassName;
-  const rounding = props.rounding;
-  const navbarVariant = props.navbarVariant ?? 'floating';
-  const navbarPosition = props.navbarPosition ?? 'sticky';
+
+  // ── Resolve props (context fills missing values) ──────────────────────────
+  const brand           = props.brand;
+  const brandHref       = props.brandHref ?? '/';
+  const navigation      = props.navigation ?? [];
+  const userMenu        = props.userMenu;
+  const containerClassName   = props.containerClassName;
+  const rounding        = props.rounding;
+  const navbarVariant   = props.navbarVariant ?? 'floating';
+  const navbarPosition  = props.navbarPosition ?? 'sticky';
   const renderDesktopDropdown = props.renderDesktopDropdown;
   const desktopMaxPrimaryItems = Math.max(1, props.desktopMaxPrimaryItems ?? 7);
-  const mobileMenuOpen = props.mobileMenuOpen ?? context?.mobileMenuOpen ?? false;
+  const mobileMenuOpen  = props.mobileMenuOpen ?? context?.mobileMenuOpen ?? false;
   const toggleMobileMenu = props.onMobileMenuToggle ?? context?.toggleMobileMenu ?? (() => {});
-  const { isAuthenticated: _isAuthenticated } = useAuth();
-  const isTabletOrBelow = useIsTabletOrBelow();
-  const pathname = usePathnameWithoutLocale();
-  const t = useAppT();
-  const [openDropdownKey, setOpenDropdownKey] = useState<string | null>(null);
-  const openTimerRef = useRef<number | null>(null);
-  const closeTimerRef = useRef<number | null>(null);
-  const navOuterRef = useRef<HTMLDivElement | null>(null);
+  const navLayout       = props.navLayout ?? 'default';
+  const navbarHeight    = props.navbarHeight ?? 'md';
+  const hideNavOnScroll = props.hideNavOnScroll ?? false;
+  const transparent     = props.transparent ?? false;
+  const transparentThreshold = props.transparentThreshold ?? 40;
 
-  const toggleMobileLabel = useMemo(() => t('layouts.navigation.toggleMobile'), [t]);
-
-  /** Long i18n labels: ellipsis instead of stretching the bar (desktop top-level + “More”). */
-  const desktopNavLabelClass = 'min-w-0 max-w-[11rem] truncate sm:max-w-[13rem]';
-  /** Dropdown / overflow menu rows — a bit wider than top-level pills. */
-  /** Top-level desktop nav control — larger hit target, works in light/dark. */
-  const desktopNavItemClass = cn(
-    // No `border-transparent` (1px “ghost” stroke still paints); use `border-0` and only add stroke in dark when needed.
-    'inline-flex min-h-9 items-center justify-center gap-1 rounded-full border-0 px-4 py-1.5 text-sm font-medium',
-    'ring-0 focus-visible:ring-0',
-    'text-foreground/90 transition-colors',
-    'hover:bg-accent/55 hover:text-foreground',
-    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35',
-  );
-  /** Light: fill only. Dark: optional hairline + muted fill. */
-  const desktopNavItemActiveClass =
-    'border-0 bg-accent font-semibold text-foreground shadow-sm dark:border dark:border-border dark:bg-muted dark:shadow-none';
-
-  const subMenuLinkClass = (active: boolean) =>
-    cn(
-      'flex min-h-9 min-w-0 max-w-[min(17rem,calc(100vw-5rem))] items-center rounded-full border-0 px-4 py-2 text-sm font-medium transition-colors',
-      'hover:bg-accent/55',
-      active
-        ? 'border-0 bg-accent font-semibold text-foreground shadow-sm dark:border dark:border-border dark:bg-muted/90 dark:shadow-none'
-        : 'border-0 text-foreground/90',
-    );
-
-  const clearOpenTimer = () => {
-    if (openTimerRef.current) {
-      window.clearTimeout(openTimerRef.current);
-      openTimerRef.current = null;
-    }
-  };
-
-  const clearCloseTimer = () => {
-    if (closeTimerRef.current) {
-      window.clearTimeout(closeTimerRef.current);
-      closeTimerRef.current = null;
-    }
-  };
+  // ── Refs ──────────────────────────────────────────────────────────────────
+  const navOuterRef = useRef<HTMLDivElement | null>(null);
 
-  const scheduleOpen = (key: string) => {
-    clearOpenTimer();
-    clearCloseTimer();
-    openTimerRef.current = window.setTimeout(() => {
-      setOpenDropdownKey(key);
-    }, 80);
-  };
+  // ── Hooks ─────────────────────────────────────────────────────────────────
+  const { hidden, scrolled } = useNavbarScroll({ hideNavOnScroll, transparent, transparentThreshold });
+  const dropdown = useDropdownMenu();
+  useNavbarViewportVars(navOuterRef, [navbarPosition, navbarVariant, containerClassName] as const);
 
-  const scheduleClose = (key: string) => {
-    clearOpenTimer();
-    clearCloseTimer();
-    closeTimerRef.current = window.setTimeout(() => {
-      setOpenDropdownKey((prev) => (prev === key ? null : prev));
-    }, 120);
-  };
+  const isTabletOrBelow = useIsTabletOrBelow();
+  const t = useAppT();
+  const pathname = usePathnameWithoutLocale();
 
+  // Close dropdowns when switching to mobile
   useEffect(() => {
-    return () => {
-      clearOpenTimer();
-      clearCloseTimer();
-    };
-  }, []);
-
-  useEffect(() => {
-    if (isTabletOrBelow) {
-      setOpenDropdownKey(null);
-      clearOpenTimer();
-      clearCloseTimer();
-    }
-  }, [isTabletOrBelow]);
+    if (isTabletOrBelow) dropdown.closeDropdown();
+  }, [isTabletOrBelow, dropdown.closeDropdown]);
 
+  // Sync navbar surface into context
   const setNavbarSurface = context?.setNavbarSurface;
-
   useLayoutEffect(() => {
     if (!setNavbarSurface) return;
     setNavbarSurface({ variant: navbarVariant, position: navbarPosition });
-    return () => {
-      setNavbarSurface(null);
-    };
+    return () => setNavbarSurface(null);
   }, [setNavbarSurface, navbarVariant, navbarPosition]);
 
-  useEffect(() => {
-    const updateDrawerViewportVars = () => {
-      const root = document.documentElement;
-      const navEl = navOuterRef.current;
-      if (!navEl) return;
-
-      const rect = navEl.getBoundingClientRect();
-      const top = Math.max(0, Math.round(rect.bottom + 8));
-      const viewportHeight = window.innerHeight;
-      const maxHeight = Math.max(240, viewportHeight - top - 12);
-
-      root.style.setProperty('--public-navbar-mobile-drawer-top', `${top}px`);
-      root.style.setProperty('--public-navbar-mobile-drawer-max-height', `${maxHeight}px`);
-    };
-
-    updateDrawerViewportVars();
-    const navEl = navOuterRef.current;
-    const observer = navEl ? new ResizeObserver(updateDrawerViewportVars) : null;
-    if (navEl && observer) observer.observe(navEl);
-    window.addEventListener('resize', updateDrawerViewportVars);
-    window.addEventListener('scroll', updateDrawerViewportVars, { passive: true });
-
-    return () => {
-      if (navEl && observer) observer.unobserve(navEl);
-      observer?.disconnect();
-      window.removeEventListener('resize', updateDrawerViewportVars);
-      window.removeEventListener('scroll', updateDrawerViewportVars);
-    };
-  }, [navbarPosition, navbarVariant, containerClassName]);
-
-  const navOuterClassName = (() => {
-    const positionClass =
-      navbarPosition === 'fixed'
-        ? 'fixed'
-        : navbarPosition === 'static'
-          ? 'static'
-          : 'sticky';
-
-    const topClass = navbarVariant === 'floating' ? 'top-3' : 'top-0';
-    const insetPaddingClass = navbarVariant === 'floating' ? 'px-3 sm:px-4 lg:px-6' : '';
-
-    return `${positionClass} ${topClass} inset-x-0 z-50 ${insetPaddingClass}`.trim().replace(/\s+/g, ' ');
-  })();
-
-  const navInnerClassName = cn(
+  // ── Derived values ────────────────────────────────────────────────────────
+  const toggleMobileLabel = useMemo(() => t('layouts.navigation.toggleMobile'), [t]);
+
+  const isActivePath = useMemo(() => (href: string) => {
+    if (href === '/') return pathname === '/';
+    return pathname === href || pathname.startsWith(`${href}/`);
+  }, [pathname]);
+
+  const isGroupActive = useMemo(() => (item: NavigationItem): boolean => {
+    if (isActivePath(item.href)) return true;
+    return item.items?.some((sub) => isActivePath(sub.href)) ?? false;
+  }, [isActivePath]);
+
+  // Desktop: filter lone link duplicating brand (keeps full list in drawer)
+  const desktopNavItems = useMemo(
+    () => navigation.filter((item) => item.items?.length || item.href !== brandHref),
+    [navigation, brandHref],
+  );
+
+  const primaryItems  = desktopNavItems.slice(0, desktopMaxPrimaryItems);
+  const overflowItems = desktopNavItems.slice(desktopMaxPrimaryItems);
+
+  // ── Class names ───────────────────────────────────────────────────────────
+
+  const navOuterClassName = cn(
+    navbarPosition === 'fixed'
+      ? 'fixed'
+      : navbarPosition === 'static'
+        ? 'static'
+        : 'sticky',
+    navbarVariant === 'floating' ? 'top-3' : 'top-0',
+    navbarVariant === 'floating' ? 'px-3 sm:px-4 lg:px-6' : '',
+    'inset-x-0 z-50',
+    hideNavOnScroll && 'transition-transform duration-300 ease-in-out will-change-transform',
+    // Keep visible when mobile menu is open even if scrolling
+    hideNavOnScroll && hidden && !mobileMenuOpen && '-translate-y-full',
+  );
+
+  const navShapeClassName = cn(
     'mx-auto w-full',
     navbarVariant === 'floating'
       ? cn(rounding ?? 'rounded-2xl', publicFloatingChromeClassName)
       : 'rounded-none border-x-0 border-t-0 border-b border-border/40 dark:border-border/70 shadow-none',
     containerClassName,
-    // Last: guarantee shell has no stroke on light; `containerClassName` cannot reintroduce a border.
     navbarVariant === 'floating' && '!border-0 dark:!border dark:!border-border/75',
   );
 
-  const isActivePath = (href: string) => {
-    if (href === '/') return pathname === '/';
-    return pathname === href || pathname.startsWith(`${href}/`);
-  };
+  const navSurfaceClassName = cn(
+    transparent && 'transition-[background-color,backdrop-filter] duration-200 ease-out',
+    !transparent || scrolled
+      ? 'bg-background/72 backdrop-blur-[10px] dark:bg-card/80'
+      : 'bg-transparent backdrop-blur-0 dark:bg-transparent',
+  );
 
-  const isGroupActive = (item: NavigationItem) => {
-    if (isActivePath(item.href)) return true;
-    if (!item.items) return false;
-    return item.items.some((subItem) => isActivePath(subItem.href));
-  };
+  // ── Sub-components ────────────────────────────────────────────────────────
 
-  const closeDropdown = () => setOpenDropdownKey(null);
-
-  /** Desktop: omit a lone top-level link that duplicates the brand link — saves space; drawer keeps full list. */
-  const desktopNavItems = useMemo(() => {
-    return navigation.filter((item) => {
-      if (item.items && item.items.length > 0) return true;
-      return item.href !== brandHref;
-    });
-  }, [navigation, brandHref]);
-
-  const desktopPrimaryNavigation = desktopNavItems.slice(0, desktopMaxPrimaryItems);
-  const desktopOverflowNavigation = desktopNavItems.slice(desktopMaxPrimaryItems);
-
-  const renderDesktopNavItem = (item: NavigationItem) => {
-    if (item.items && item.items.length > 0) {
-      const dropdownKey = `${item.label}-${item.href}`;
-      const defaultItems = (
-        <>
-          {item.items.map((subItem) => {
-            const subActive = isActivePath(subItem.href);
-            return (
-              <div key={`${item.label}-${subItem.href}`} className="rounded-full">
-                {subItem.external ? (
-                  <a
-                    href={subItem.href}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className={subMenuLinkClass(subActive)}
-                  >
-                    <span className="min-w-0 truncate" title={subItem.label}>{subItem.label}</span>
-                  </a>
-                ) : (
-                  <Link href={subItem.href} className={subMenuLinkClass(subActive)}>
-                    <span className="min-w-0 truncate" title={subItem.label}>{subItem.label}</span>
-                  </Link>
-                )}
-              </div>
-            );
-          })}
-        </>
-      );
-
-      const defaultPopover = (
-        <div
-          className="absolute left-0 top-full mt-1 z-[1200] min-w-[14.5rem] rounded-xl border border-border/70 bg-background/95 backdrop-blur-sm p-1.5 shadow-[0_1px_2px_rgba(0,0,0,0.05),0_6px_18px_rgba(0,0,0,0.035)] dark:shadow-[0_6px_20px_rgba(0,0,0,0.12)]"
-          onMouseEnter={() => {
-            clearOpenTimer();
-            clearCloseTimer();
-          }}
-          onMouseLeave={() => scheduleClose(dropdownKey)}
-        >
-          {defaultItems}
-        </div>
-      );
-
-      const isOpen = openDropdownKey === dropdownKey;
-      const isActive = isGroupActive(item);
-      return (
-        <div
-          key={dropdownKey}
-          className="relative"
-          onMouseEnter={() => scheduleOpen(dropdownKey)}
-          onMouseLeave={() => scheduleClose(dropdownKey)}
-        >
-          <Button
-            variant="ghost"
-            size="sm"
-            className={cn(
-              // Override Button base [&_svg]:size-16px so hover/layout doesn’t fight icon size; fixed chevron box avoids neighbor jitter when rotating.
-              'group h-auto min-h-9 max-w-[15rem] gap-1 shadow-none [&_svg]:size-3.5 [&_svg]:shrink-0',
-              desktopNavItemClass,
-              (isOpen || isActive) && desktopNavItemActiveClass,
-              isOpen && 'border-0 dark:border dark:border-border',
-            )}
-          >
-            <span className={desktopNavLabelClass} title={item.label}>{item.label}</span>
-            <span
-              className="inline-flex size-3.5 shrink-0 items-center justify-center"
-              aria-hidden
-            >
-              <ChevronDown
-                className={`size-3.5 origin-center text-muted-foreground transition-transform duration-200 ease-out will-change-transform ${isOpen ? 'rotate-180' : ''}`}
-              />
-            </span>
-          </Button>
-
-          {isOpen && (
-            renderDesktopDropdown
-              ? renderDesktopDropdown({
-                item,
-                isOpen,
-                isActive,
-                close: closeDropdown,
-                defaultPopover,
-                defaultItems,
-              })
-              : defaultPopover
-          )}
-        </div>
-      );
-    }
+  const brandNode = (
+    <div className="min-w-0 shrink-0 flex items-center">
+      <NavBrand brand={brand} brandHref={brandHref} />
+    </div>
+  );
 
-    const linkActive = isActivePath(item.href);
-    return (
-      <Link
-        key={item.href}
-        href={item.href}
-        className={cn(desktopNavItemClass, linkActive && desktopNavItemActiveClass)}
-      >
-        <span className={desktopNavLabelClass} title={item.label}>{item.label}</span>
-      </Link>
-    );
-  };
+  const desktopNavNode = navLayout !== 'split' ? (
+    <NavDesktopItems
+      primaryItems={primaryItems}
+      overflowItems={overflowItems}
+      isActivePath={isActivePath}
+      isGroupActive={isGroupActive}
+      dropdown={dropdown}
+      renderDesktopDropdown={renderDesktopDropdown}
+    />
+  ) : null;
+
+  const actionsNode = (
+    <NavActions
+      userMenu={userMenu}
+      mobileMenuOpen={mobileMenuOpen}
+      onMobileMenuToggle={toggleMobileMenu}
+      toggleMobileLabel={toggleMobileLabel}
+      forceShowMobileTrigger={navLayout === 'split'}
+    />
+  );
 
-  const hasDesktopOverflowNav = desktopOverflowNavigation.length > 0;
-  const isMoreMenuOpen = openDropdownKey === '__overflow-more';
-  const moreMenuButtonActive =
-    isMoreMenuOpen || desktopOverflowNavigation.some((navItem) => isGroupActive(navItem));
+  const h = heightCls[navbarHeight];
 
-  return (
-    <div ref={navOuterRef} className={navOuterClassName}>
-      <nav
-        className={cn(
-          navInnerClassName,
-          // Light: glass over page bg. Dark: slightly lifted vs --background (see ui-core theme/dark.css --card).
-          'bg-background/72 backdrop-blur-[10px] dark:bg-card/80',
-        )}
-      >
-      <div className="w-full pl-6 pr-3 sm:px-4 lg:px-6">
-        <div className="flex items-center justify-between py-3.5">
-          {/* Brand */}
-          <div className="min-w-0 shrink-0 flex items-center">
-            {brand != null && brand !== '' && brand !== false
-              ? typeof brand === 'string'
-                ? (
-                    <Link
-                      href={brandHref}
-                      className="font-bold text-[15px] text-foreground hover:opacity-90 transition-opacity"
-                    >
-                      {brand}
-                    </Link>
-                  )
-                : brand
-              : null}
-          </div>
+  // ── Layout variants ───────────────────────────────────────────────────────
 
-          {/* Desktop Navigation */}
-          <div className="hidden isolate lg:flex items-center gap-1">
-            {desktopPrimaryNavigation.map(renderDesktopNavItem)}
-            {hasDesktopOverflowNav && (
-              <div
-                className="relative"
-                onMouseEnter={() => scheduleOpen('__overflow-more')}
-                onMouseLeave={() => scheduleClose('__overflow-more')}
-              >
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className={cn(
-                    'group h-auto min-h-9 max-w-[15rem] gap-1 shadow-none [&_svg]:size-3.5 [&_svg]:shrink-0',
-                    desktopNavItemClass,
-                    moreMenuButtonActive && desktopNavItemActiveClass,
-                    isMoreMenuOpen && 'border-0 dark:border dark:border-border',
-                  )}
-                >
-                  <span className={desktopNavLabelClass}>More</span>
-                  <span
-                    className="inline-flex size-3.5 shrink-0 items-center justify-center"
-                    aria-hidden
-                  >
-                    <ChevronDown
-                      className={`size-3.5 origin-center text-muted-foreground transition-transform duration-200 ease-out will-change-transform ${
-                        isMoreMenuOpen ? 'rotate-180' : ''
-                      }`}
-                    />
-                  </span>
-                </Button>
-
-                {isMoreMenuOpen && (
-                  <div
-                    className="absolute right-0 top-full mt-1 z-[1200] min-w-[14.5rem] rounded-xl border border-border/70 bg-background/95 backdrop-blur-sm p-1.5 shadow-[0_1px_2px_rgba(0,0,0,0.05),0_6px_18px_rgba(0,0,0,0.035)] dark:shadow-[0_6px_20px_rgba(0,0,0,0.12)]"
-                    onMouseEnter={() => {
-                      clearOpenTimer();
-                      clearCloseTimer();
-                    }}
-                    onMouseLeave={() => scheduleClose('__overflow-more')}
-                  >
-                    {desktopOverflowNavigation.map((navItem) => {
-                      const overflowActive = isGroupActive(navItem);
-                      return (
-                        <div key={`overflow-${navItem.href}`} className="rounded-full">
-                          <Link
-                            href={navItem.href}
-                            className={subMenuLinkClass(overflowActive)}
-                          >
-                            <span className="min-w-0 truncate" title={navItem.label}>{navItem.label}</span>
-                          </Link>
-                        </div>
-                      );
-                    })}
-                  </div>
-                )}
-              </div>
-            )}
+  const renderRow = () => {
+    switch (navLayout) {
+      case 'brand-left':
+        return (
+          <div className={cn('flex items-center gap-1', h)}>
+            <div className="min-w-0 shrink-0 flex items-center mr-4">{brandNode}</div>
+            <div className="hidden isolate lg:flex items-center gap-1">
+              {desktopNavNode}
+            </div>
+            <div className="ml-auto flex items-center gap-4">{actionsNode}</div>
           </div>
-
-          {/* User Menu / Actions */}
-          <div className="flex items-center gap-4">
-            <div className="hidden lg:flex">
-              <>
-                {/* User Menu */}
-                <UserMenu
-                  variant="desktop"
-                  groups={userMenu?.groups}
-                  authPath={userMenu?.authPath}
-                  i18n={userMenu?.i18n}
-                />
-              </>
+        );
+
+      case 'centered':
+        return (
+          <div className={cn('flex items-center justify-center gap-4', h)}>
+            {brandNode}
+            <div className="hidden isolate lg:flex items-center gap-1">
+              {desktopNavNode}
             </div>
+            {actionsNode}
+          </div>
+        );
 
-            {/* Mobile Menu Button */}
-            <Button
-              variant="ghost"
-              size="icon"
-              aria-label={toggleMobileLabel}
-              data-mobile-menu-trigger="true"
-              className="lg:hidden rounded-full"
-              onClick={toggleMobileMenu}
-            >
-              {mobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
-            </Button>
+      case 'split':
+        return (
+          <div className={cn('flex items-center justify-between', h)}>
+            {brandNode}
+            {actionsNode}
           </div>
+        );
+
+      default: // 'default' — brand left, nav truly centered (absolute), actions right
+        return (
+          <div className={cn('relative flex items-center justify-between', h)}>
+            {brandNode}
+            <div className="hidden isolate lg:flex items-center gap-1 absolute left-1/2 -translate-x-1/2">
+              {desktopNavNode}
+            </div>
+            {actionsNode}
+          </div>
+        );
+    }
+  };
+
+  // ── Render ────────────────────────────────────────────────────────────────
+
+  return (
+    <div ref={navOuterRef} className={navOuterClassName}>
+      <nav className={cn(navShapeClassName, navSurfaceClassName)}>
+        <div className="w-full pl-6 pr-3 sm:px-4 lg:px-6">
+          {renderRow()}
         </div>
-      </div>
       </nav>
     </div>
   );
 }
-