@djangocfg/layouts 2.1.248 → 2.1.251

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

@@ -6,92 +6,367 @@
 
 'use client';
 
-import { Menu, X } from 'lucide-react';
+import { ChevronDown, Menu, X } from 'lucide-react';
 import Link from 'next/link';
-import React, { useMemo } from 'react';
+import React, { type ReactNode, useEffect, useMemo, useRef, useState } from 'react';
 
 import { useAuth } from '@djangocfg/api/auth';
 import { useAppT } from '@djangocfg/i18n';
-import { Button } from '@djangocfg/ui-core/components';
-// useIsMobile is used for conditional rendering
-import { useIsMobile } from '@djangocfg/ui-core/hooks';
+import {
+  Button,
+} from '@djangocfg/ui-core/components';
+import { useIsTabletOrBelow } from '@djangocfg/ui-core/hooks';
 // cn is reserved for future conditional styling
 import { cn as _cn } from '@djangocfg/ui-core/lib';
+import { usePathnameWithoutLocale } from '../../../hooks';
 
 import { UserMenu } from '../../_components/UserMenu';
-import { usePublicLayout } from '../context';
-
-export function PublicNavigation() {
-  const {
-    logo,
-    siteName,
-    navigation,
-    userMenu,
-    containerClassName,
-    mobileMenuOpen,
-    toggleMobileMenu,
-  } = usePublicLayout();
+import { usePublicLayoutOptional } from '../context';
+
+import type { NavigationItem, UserMenuConfig } from '../../types';
+
+export type PublicNavbarVariant = 'floating' | 'flush';
+export type PublicNavbarPosition = 'sticky' | 'fixed' | 'static';
+
+export interface PublicDesktopDropdownRenderProps {
+  item: NavigationItem;
+  isOpen: boolean;
+  isActive: boolean;
+  close: () => void;
+  defaultPopover: React.ReactNode;
+  defaultItems: React.ReactNode;
+}
+
+export type PublicDesktopDropdownRenderer = (props: PublicDesktopDropdownRenderProps) => React.ReactNode;
+
+interface PublicNavigationProps {
+  /** Custom brand node (full control over logo/text/link) */
+  brand?: ReactNode;
+  /** Brand link for default brand renderer */
+  brandHref?: string;
+  logo?: string;
+  siteName?: string;
+  navigation?: NavigationItem[];
+  userMenu?: UserMenuConfig;
+  containerClassName?: string;
+  navbarVariant?: PublicNavbarVariant;
+  navbarPosition?: PublicNavbarPosition;
+  renderDesktopDropdown?: PublicDesktopDropdownRenderer;
+  /** Max visible top-level desktop items before collapsing into "More" */
+  desktopMaxPrimaryItems?: number;
+  mobileMenuOpen?: boolean;
+  onMobileMenuToggle?: () => void;
+}
+
+export function PublicNavigation(props: PublicNavigationProps = {}) {
+  const context = usePublicLayoutOptional();
+  const brand = props.brand;
+  const brandHref = props.brandHref ?? '/';
+  const logo = props.logo;
+  const siteName = props.siteName ?? 'App';
+  const navigation = props.navigation ?? [];
+  const userMenu = props.userMenu;
+  const containerClassName = props.containerClassName;
+  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 toggleMobileMenu = props.onMobileMenuToggle ?? context?.toggleMobileMenu ?? (() => {});
   const { isAuthenticated: _isAuthenticated } = useAuth();
-  const isMobile = useIsMobile();
+  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 toggleMobileLabel = useMemo(() => t('layouts.navigation.toggleMobile'), [t]);
+  const desktopNavItemClass =
+    'inline-flex h-8 items-center rounded-md px-2 text-sm font-medium text-foreground/90 transition-colors hover:text-foreground hover:bg-accent/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50';
+
+  const clearOpenTimer = () => {
+    if (openTimerRef.current) {
+      window.clearTimeout(openTimerRef.current);
+      openTimerRef.current = null;
+    }
+  };
+
+  const clearCloseTimer = () => {
+    if (closeTimerRef.current) {
+      window.clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+  };
+
+  const scheduleOpen = (key: string) => {
+    clearOpenTimer();
+    clearCloseTimer();
+    openTimerRef.current = window.setTimeout(() => {
+      setOpenDropdownKey(key);
+    }, 80);
+  };
+
+  const scheduleClose = (key: string) => {
+    clearOpenTimer();
+    clearCloseTimer();
+    closeTimerRef.current = window.setTimeout(() => {
+      setOpenDropdownKey((prev) => (prev === key ? null : prev));
+    }, 120);
+  };
+
+  useEffect(() => {
+    return () => {
+      clearOpenTimer();
+      clearCloseTimer();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (isTabletOrBelow) {
+      setOpenDropdownKey(null);
+      clearOpenTimer();
+      clearCloseTimer();
+    }
+  }, [isTabletOrBelow]);
+
+  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 = (() => {
+    const base =
+      'mx-auto w-full border border-border/40 dark:border-border/70';
+
+    const visual =
+      navbarVariant === 'floating'
+        ? 'rounded-2xl shadow-[0_10px_28px_rgba(0,0,0,0.14)] dark:shadow-[0_10px_28px_rgba(0,0,0,0.22)]'
+        : 'rounded-none border-x-0 border-t-0 shadow-none';
+
+    return `${base} ${visual} ${containerClassName || ''}`.trim().replace(/\s+/g, ' ');
+  })();
+
+  const isActivePath = (href: string) => {
+    if (href === '/') return pathname === '/';
+    return pathname === href || pathname.startsWith(`${href}/`);
+  };
+
+  const isGroupActive = (item: NavigationItem) => {
+    if (isActivePath(item.href)) return true;
+    if (!item.items) return false;
+    return item.items.some((subItem) => isActivePath(subItem.href));
+  };
 
-  const navClass = 'sticky top-3 z-50 px-4 sm:px-6 lg:px-8';
+  const closeDropdown = () => setOpenDropdownKey(null);
+  const desktopPrimaryNavigation = navigation.slice(0, desktopMaxPrimaryItems);
+  const desktopOverflowNavigation = navigation.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) => (
+            <div key={`${item.label}-${subItem.href}`} className="rounded-md">
+              {subItem.external ? (
+                <a
+                  href={subItem.href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="block rounded-md px-2.5 py-2 text-sm font-medium hover:bg-accent/40"
+                >
+                  {subItem.label}
+                </a>
+              ) : (
+                <Link
+                  href={subItem.href}
+                  className="block rounded-md px-2.5 py-2 text-sm font-medium hover:bg-accent/40"
+                >
+                  {subItem.label}
+                </Link>
+              )}
+            </div>
+          ))}
+        </>
+      );
+
+      const defaultPopover = (
+        <div
+          className="absolute left-0 top-full mt-1 z-[1200] min-w-56 rounded-xl border border-border/70 bg-background/95 backdrop-blur-sm p-1 shadow-[0_10px_28px_rgba(0,0,0,0.22)]"
+          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={`group ${desktopNavItemClass} ${isOpen || isActive ? 'bg-accent/50 text-foreground' : ''}`}
+          >
+            <span>{item.label}</span>
+            <ChevronDown
+              className={`ml-1 h-3.5 w-3.5 text-muted-foreground transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}
+            />
+          </Button>
+
+          {isOpen && (
+            renderDesktopDropdown
+              ? renderDesktopDropdown({
+                item,
+                isOpen,
+                isActive,
+                close: closeDropdown,
+                defaultPopover,
+                defaultItems,
+              })
+              : defaultPopover
+          )}
+        </div>
+      );
+    }
+
+    return (
+      <Link
+        key={item.href}
+        href={item.href}
+        className={`${desktopNavItemClass} ${isActivePath(item.href) ? 'bg-accent/50 text-foreground' : ''}`}
+      >
+        {item.label}
+      </Link>
+    );
+  };
 
   return (
-    <div className={navClass}>
+    <div ref={navOuterRef} className={navOuterClassName}>
       <nav
-        className={`mx-auto w-full rounded-2xl border border-border/40 dark:border-border/70 shadow-[0_10px_28px_rgba(0,0,0,0.14)] dark:shadow-[0_10px_28px_rgba(0,0,0,0.22)] ${containerClassName || ''}`}
+        className={navInnerClassName}
         style={{ backgroundColor: 'hsl(var(--background) / 0.72)', backdropFilter: 'blur(10px)' }}
       >
-      <div className="w-full px-4 sm:px-6 lg:px-8">
-        <div
-          className="flex items-center justify-between py-3.5"
-          onClick={isMobile ? toggleMobileMenu : undefined}
-          onKeyDown={isMobile ? (event) => {
-            if (event.key === 'Enter' || event.key === ' ') {
-              event.preventDefault();
-              toggleMobileMenu();
-            }
-          } : undefined}
-          role={isMobile ? 'button' : undefined}
-          tabIndex={isMobile ? 0 : undefined}
-          aria-label={isMobile ? toggleMobileLabel : undefined}
-        >
+      <div className="w-full px-3 sm:px-4 lg:px-6">
+        <div className="flex items-center justify-between py-3.5">
           {/* Logo */}
-          {isMobile ? (
-            <div className="flex items-center gap-2">
-              {logo && (
-                <img src={logo} alt={siteName} className="h-6 w-auto object-contain" />
-              )}
-              <span className="font-bold text-lg">{siteName}</span>
-            </div>
+          {brand ? (
+            brand
           ) : (
-            <Link href="/" className="flex items-center gap-2">
+            <Link href={brandHref} className="flex items-center gap-1.5">
               {logo && (
-                <img src={logo} alt={siteName} className="h-6 w-auto object-contain" />
+                <img src={logo} alt={siteName} className="h-5.5 w-auto object-contain" />
               )}
-              <span className="font-bold text-lg">{siteName}</span>
+              <span className="font-bold text-[15px]">{siteName}</span>
             </Link>
           )}
 
           {/* Desktop Navigation */}
-          <div className="hidden md:flex items-center gap-6">
-            {navigation.map((item) => (
-              <Link
-                key={item.href}
-                href={item.href}
-                className="text-sm font-medium hover:text-primary transition-colors"
+          <div className="hidden lg:flex items-center gap-3">
+            {desktopPrimaryNavigation.map(renderDesktopNavItem)}
+            {desktopOverflowNavigation.length > 0 && (
+              <div
+                className="relative"
+                onMouseEnter={() => scheduleOpen('__overflow-more')}
+                onMouseLeave={() => scheduleClose('__overflow-more')}
               >
-                {item.label}
-              </Link>
-            ))}
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className={`group ${desktopNavItemClass} ${
+                    openDropdownKey === '__overflow-more' || desktopOverflowNavigation.some((item) => isGroupActive(item))
+                      ? 'bg-accent/50 text-foreground'
+                      : ''
+                  }`}
+                >
+                  <span>More</span>
+                  <ChevronDown
+                    className={`ml-1 h-3.5 w-3.5 text-muted-foreground transition-transform duration-200 ${
+                      openDropdownKey === '__overflow-more' ? 'rotate-180' : ''
+                    }`}
+                  />
+                </Button>
+
+                {openDropdownKey === '__overflow-more' && (
+                  <div
+                    className="absolute right-0 top-full mt-1 z-[1200] min-w-56 rounded-xl border border-border/70 bg-background/95 backdrop-blur-sm p-1 shadow-[0_10px_28px_rgba(0,0,0,0.22)]"
+                    onMouseEnter={() => {
+                      clearOpenTimer();
+                      clearCloseTimer();
+                    }}
+                    onMouseLeave={() => scheduleClose('__overflow-more')}
+                  >
+                    {desktopOverflowNavigation.map((item) => (
+                      <div key={`overflow-${item.href}`} className="rounded-md">
+                        <Link
+                          href={item.href}
+                          className={`block rounded-md px-2.5 py-2 text-sm font-medium hover:bg-accent/40 ${
+                            isGroupActive(item) ? 'bg-accent/45 text-foreground' : ''
+                          }`}
+                        >
+                          {item.label}
+                        </Link>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            )}
           </div>
 
           {/* User Menu / Actions */}
           <div className="flex items-center gap-4">
-            {!isMobile && (
+            <div className="hidden lg:flex">
               <>
                 {/* User Menu */}
                 <UserMenu
@@ -100,20 +375,19 @@ export function PublicNavigation() {
                   authPath={userMenu?.authPath}
                 />
               </>
-            )}
+            </div>
 
             {/* Mobile Menu Button */}
-            {isMobile && (
-              <Button
-                variant="ghost"
-                size="icon"
-                aria-label={toggleMobileLabel}
-                data-mobile-menu-trigger="true"
-                className="pointer-events-none"
-              >
-                {mobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
-              </Button>
-            )}
+            <Button
+              variant="ghost"
+              size="icon"
+              aria-label={toggleMobileLabel}
+              data-mobile-menu-trigger="true"
+              className="lg:hidden"
+              onClick={toggleMobileMenu}
+            >
+              {mobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+            </Button>
           </div>
         </div>
       </div>

package/src/layouts/PublicLayout/components/index.ts

@@ -4,5 +4,6 @@
 
 export { PublicNavigation } from './PublicNavigation';
 export { PublicMobileDrawer } from './PublicMobileDrawer';
+export { PublicNavbar } from './PublicNavbar';
 export { PublicFooter } from './PublicFooter';
 

package/src/layouts/PublicLayout/context.tsx

@@ -2,16 +2,7 @@
 
 import React, { createContext, useContext } from 'react';
 
-import type { I18nLayoutConfig } from '../AppLayout/AppLayout';
-import type { NavigationItem, UserMenuConfig } from '../types';
-
 export interface PublicLayoutContextValue {
-  logo?: string;
-  siteName: string;
-  navigation: NavigationItem[];
-  userMenu?: UserMenuConfig;
-  i18n?: I18nLayoutConfig;
-  containerClassName?: string;
   mobileMenuOpen: boolean;
   toggleMobileMenu: () => void;
   closeMobileMenu: () => void;
@@ -37,3 +28,7 @@ export function usePublicLayout() {
   return context;
 }
 
+export function usePublicLayoutOptional() {
+  return useContext(PublicLayoutContext);
+}
+

package/src/layouts/PublicLayout/index.ts

@@ -4,6 +4,14 @@
 
 export { PublicLayout } from './PublicLayout';
 export type { PublicLayoutProps } from './PublicLayout';
+export { PublicNavigation, PublicMobileDrawer, PublicNavbar } from './components';
+export type {
+  PublicNavbarVariant,
+  PublicNavbarPosition,
+  PublicDesktopDropdownRenderer,
+  PublicDesktopDropdownRenderProps,
+} from './components/PublicNavigation';
+export type { PublicNavbarConfig, PublicNavbarProps } from './components/PublicNavbar';
 export {
   PublicFooter,
   FooterProjectInfo,
@@ -15,4 +23,5 @@ export {
 export type {
   PublicFooterProps,
 } from './components/PublicFooter';
+export { PublicLayoutProvider, usePublicLayout } from './context';
 

package/src/layouts/types/ui.types.ts

@@ -16,6 +16,8 @@ export interface NavigationItem {
   icon?: LucideIcon | string;
   badge?: string | number;
   external?: boolean;
+  /** Optional nested items for desktop dropdown navigation */
+  items?: NavigationItem[];
 }
 
 export interface NavigationSection {