@djangocfg/layouts 2.1.248 → 2.1.249

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.248",
+  "version": "2.1.249",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -74,14 +74,14 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.248",
-    "@djangocfg/centrifugo": "^2.1.248",
-    "@djangocfg/i18n": "^2.1.248",
-    "@djangocfg/monitor": "^2.1.248",
-    "@djangocfg/debuger": "^2.1.248",
-    "@djangocfg/ui-core": "^2.1.248",
-    "@djangocfg/ui-nextjs": "^2.1.248",
-    "@djangocfg/ui-tools": "^2.1.248",
+    "@djangocfg/api": "^2.1.249",
+    "@djangocfg/centrifugo": "^2.1.249",
+    "@djangocfg/i18n": "^2.1.249",
+    "@djangocfg/monitor": "^2.1.249",
+    "@djangocfg/debuger": "^2.1.249",
+    "@djangocfg/ui-core": "^2.1.249",
+    "@djangocfg/ui-nextjs": "^2.1.249",
+    "@djangocfg/ui-tools": "^2.1.249",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -109,15 +109,15 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.248",
-    "@djangocfg/i18n": "^2.1.248",
-    "@djangocfg/centrifugo": "^2.1.248",
-    "@djangocfg/monitor": "^2.1.248",
-    "@djangocfg/debuger": "^2.1.248",
-    "@djangocfg/typescript-config": "^2.1.248",
-    "@djangocfg/ui-core": "^2.1.248",
-    "@djangocfg/ui-nextjs": "^2.1.248",
-    "@djangocfg/ui-tools": "^2.1.248",
+    "@djangocfg/api": "^2.1.249",
+    "@djangocfg/i18n": "^2.1.249",
+    "@djangocfg/centrifugo": "^2.1.249",
+    "@djangocfg/monitor": "^2.1.249",
+    "@djangocfg/debuger": "^2.1.249",
+    "@djangocfg/typescript-config": "^2.1.249",
+    "@djangocfg/ui-core": "^2.1.249",
+    "@djangocfg/ui-nextjs": "^2.1.249",
+    "@djangocfg/ui-tools": "^2.1.249",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

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

@@ -15,17 +15,26 @@ import { useAppT } from '@djangocfg/i18n';
 import { Button } from '@djangocfg/ui-core/components';
 
 import { UserMenu } from '../../_components/UserMenu';
-import { usePublicLayout } from '../context';
+import { usePublicLayoutOptional } from '../context';
 import { useFloatingPanel } from '../hooks';
 
-export function PublicMobileDrawer() {
-  const {
-    mobileMenuOpen,
-    closeMobileMenu,
-    navigation,
-    userMenu,
-    containerClassName,
-  } = usePublicLayout();
+import type { NavigationItem, UserMenuConfig } from '../../types';
+
+interface PublicMobileDrawerProps {
+  isOpen?: boolean;
+  onClose?: () => void;
+  navigation?: NavigationItem[];
+  userMenu?: UserMenuConfig;
+  containerClassName?: string;
+}
+
+export function PublicMobileDrawer(props: PublicMobileDrawerProps = {}) {
+  const context = usePublicLayoutOptional();
+  const mobileMenuOpen = props.isOpen ?? context?.mobileMenuOpen ?? false;
+  const closeMobileMenu = props.onClose ?? context?.closeMobileMenu ?? (() => {});
+  const navigation = props.navigation ?? context?.navigation ?? [];
+  const userMenu = props.userMenu ?? context?.userMenu;
+  const containerClassName = props.containerClassName ?? context?.containerClassName;
   const { isAuthenticated } = useAuth();
   const t = useAppT();
   const { isRendered, isActive, onTransitionEnd } = useFloatingPanel({
@@ -54,15 +63,15 @@ export function PublicMobileDrawer() {
       <div className="fixed inset-x-0 top-20 z-1000 lg:hidden px-4 sm:px-6 lg:px-8">
         <div
           onTransitionEnd={onTransitionEnd}
-          className={`mx-auto w-full rounded-2xl border border-border/60 bg-background/95 backdrop-blur-xl shadow-2xl overflow-hidden transform-gpu will-change-transform transition-[transform,opacity] duration-[220ms] ease-out ${containerClassName || ''} ${
+          className={`mx-auto w-full max-h-[80vh] rounded-2xl border border-border/60 bg-background/95 backdrop-blur-xl shadow-2xl overflow-hidden flex flex-col transform-gpu will-change-transform transition-[transform,opacity] duration-[220ms] ease-out ${containerClassName || ''} ${
             isActive
               ? 'opacity-100 translate-y-0 scale-100'
               : 'opacity-0 -translate-y-2 scale-[0.985] pointer-events-none'
           }`}
           style={{ backgroundColor: 'hsl(var(--background) / 0.72)', backdropFilter: 'blur(10px)' }}
         >
-          {/* Content */}
-          <div className="max-h-[min(72vh,560px)] overflow-y-auto px-4 py-4 space-y-5">
+          {/* Scrollable content */}
+          <div className="flex-1 min-h-0 overflow-y-auto px-4 py-4 space-y-5">
         {isAuthenticated && (
           <div className="px-2">
             <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
@@ -84,33 +93,48 @@ export function PublicMobileDrawer() {
           </div>
           <div className="space-y-1">
             {navigation.map((item) => (
-              <Link
-                key={item.href}
-                href={item.href}
-                onClick={closeMobileMenu}
-                className="block px-3 py-2.5 rounded-lg text-[15px] font-medium transition-colors text-foreground hover:bg-accent/70 hover:text-accent-foreground"
-              >
-                {item.label}
-              </Link>
+              <div key={item.href}>
+                <Link
+                  href={item.href}
+                  onClick={closeMobileMenu}
+                  className="block px-3 py-2.5 rounded-lg text-[15px] font-medium transition-colors text-foreground hover:bg-accent/70 hover:text-accent-foreground"
+                >
+                  {item.label}
+                </Link>
+                {item.items && item.items.length > 0 && (
+                  <div className="ml-3 mt-1 space-y-1 border-l border-border/40 pl-3">
+                    {item.items.map((subItem) => (
+                      <Link
+                        key={`${item.href}-${subItem.href}`}
+                        href={subItem.href}
+                        onClick={closeMobileMenu}
+                        className="block px-2 py-2 rounded-md text-sm text-muted-foreground transition-colors hover:text-foreground hover:bg-accent/40"
+                      >
+                        {subItem.label}
+                      </Link>
+                    ))}
+                  </div>
+                )}
+              </div>
             ))}
           </div>
         </div>
-
-        {!isAuthenticated && (
-          <div className="pt-4 border-t border-border/50">
-            <Link
-              href={userMenu?.authPath || '/auth'}
-              onClick={closeMobileMenu}
-              className="block"
-            >
-              <Button className="w-full justify-between rounded-lg h-11">
-                <span>{labels.signIn}</span>
-                <ArrowRight className="h-4 w-4" />
-              </Button>
-            </Link>
-          </div>
-        )}
           </div>
+
+          {!isAuthenticated && (
+            <div className="shrink-0 border-t border-border/50 p-4">
+              <Link
+                href={userMenu?.authPath || '/auth'}
+                onClick={closeMobileMenu}
+                className="block"
+              >
+                <Button className="w-full justify-between rounded-lg h-11">
+                  <span>{labels.signIn}</span>
+                  <ArrowRight className="h-4 w-4" />
+                </Button>
+              </Link>
+            </div>
+          )}
         </div>
       </div>
     </>

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

@@ -6,36 +6,91 @@
 
 '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, { useEffect, useMemo, useRef, useState } from 'react';
 
 import { useAuth } from '@djangocfg/api/auth';
 import { useAppT } from '@djangocfg/i18n';
-import { Button } from '@djangocfg/ui-core/components';
+import {
+  Button,
+} from '@djangocfg/ui-core/components';
 // useIsMobile is used for conditional rendering
 import { useIsMobile } from '@djangocfg/ui-core/hooks';
 // cn is reserved for future conditional styling
 import { cn as _cn } from '@djangocfg/ui-core/lib';
 
 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';
+
+interface PublicNavigationProps {
+  logo?: string;
+  siteName?: string;
+  navigation?: NavigationItem[];
+  userMenu?: UserMenuConfig;
+  containerClassName?: string;
+  mobileMenuOpen?: boolean;
+  onMobileMenuToggle?: () => void;
+}
+
+export function PublicNavigation(props: PublicNavigationProps = {}) {
+  const context = usePublicLayoutOptional();
+  const logo = props.logo ?? context?.logo;
+  const siteName = props.siteName ?? context?.siteName ?? 'App';
+  const navigation = props.navigation ?? context?.navigation ?? [];
+  const userMenu = props.userMenu ?? context?.userMenu;
+  const containerClassName = props.containerClassName ?? context?.containerClassName;
+  const mobileMenuOpen = props.mobileMenuOpen ?? context?.mobileMenuOpen ?? false;
+  const toggleMobileMenu = props.onMobileMenuToggle ?? context?.toggleMobileMenu ?? (() => {});
   const { isAuthenticated: _isAuthenticated } = useAuth();
   const isMobile = useIsMobile();
   const t = useAppT();
+  const [openDropdownKey, setOpenDropdownKey] = useState<string | null>(null);
+  const openTimerRef = useRef<number | null>(null);
+  const closeTimerRef = useRef<number | 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();
+    };
+  }, []);
 
   const navClass = 'sticky top-3 z-50 px-4 sm:px-6 lg:px-8';
 
@@ -65,28 +120,86 @@ export function PublicNavigation() {
               {logo && (
                 <img src={logo} alt={siteName} className="h-6 w-auto object-contain" />
               )}
-              <span className="font-bold text-lg">{siteName}</span>
+              <span className="font-bold text-base">{siteName}</span>
             </div>
           ) : (
             <Link href="/" 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>
+              <span className="font-bold text-base">{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"
-              >
-                {item.label}
-              </Link>
-            ))}
+          <div className="hidden md:flex items-center gap-3">
+            {navigation.map((item) => {
+              if (item.items && item.items.length > 0) {
+                const dropdownKey = `${item.label}-${item.href}`;
+                return (
+                  <div
+                    key={dropdownKey}
+                    className="relative"
+                    onMouseEnter={() => scheduleOpen(dropdownKey)}
+                    onMouseLeave={() => scheduleClose(dropdownKey)}
+                  >
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className={`group ${desktopNavItemClass} ${openDropdownKey === dropdownKey ? '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 ${openDropdownKey === dropdownKey ? 'rotate-180' : ''}`}
+                      />
+                    </Button>
+
+                    {openDropdownKey === dropdownKey && (
+                      <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)}
+                      >
+                        {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>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                );
+              }
+
+              return (
+                <Link
+                  key={item.href}
+                  href={item.href}
+                  className={desktopNavItemClass}
+                >
+                  {item.label}
+                </Link>
+              );
+            })}
           </div>
 
           {/* User Menu / Actions */}

package/src/layouts/PublicLayout/context.tsx

@@ -37,3 +37,7 @@ export function usePublicLayout() {
   return context;
 }
 
+export function usePublicLayoutOptional() {
+  return useContext(PublicLayoutContext);
+}
+

package/src/layouts/PublicLayout/index.ts

@@ -4,6 +4,7 @@
 
 export { PublicLayout } from './PublicLayout';
 export type { PublicLayoutProps } from './PublicLayout';
+export { PublicNavigation, PublicMobileDrawer } from './components';
 export {
   PublicFooter,
   FooterProjectInfo,
@@ -15,4 +16,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 {