@djangocfg/layouts 2.1.266 → 2.1.267

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

@@ -0,0 +1,207 @@
+'use client';
+
+import { ChevronDown } from 'lucide-react';
+import Link from 'next/link';
+import React from 'react';
+
+import { Button } from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import type { NavigationItem } from '../../types';
+import type { UseDropdownMenuReturn } from '../hooks/useDropdownMenu';
+import type { PublicDesktopDropdownRenderer } from './PublicNavigation';
+
+interface NavDesktopItemsProps {
+  primaryItems: NavigationItem[];
+  overflowItems: NavigationItem[];
+  isActivePath: (href: string) => boolean;
+  isGroupActive: (item: NavigationItem) => boolean;
+  dropdown: UseDropdownMenuReturn;
+  renderDesktopDropdown?: PublicDesktopDropdownRenderer;
+}
+
+const navItemCls = cn(
+  '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',
+);
+
+const navItemActiveCls =
+  'border-0 bg-accent font-semibold text-foreground shadow-sm dark:border dark:border-border dark:bg-muted dark:shadow-none';
+
+const labelCls = 'min-w-0 max-w-[11rem] truncate sm:max-w-[13rem]';
+
+function subMenuLinkCls(active: boolean) {
+  return 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 popoverCls =
+  '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)]';
+
+export function NavDesktopItems({
+  primaryItems,
+  overflowItems,
+  isActivePath,
+  isGroupActive,
+  dropdown,
+  renderDesktopDropdown,
+}: NavDesktopItemsProps) {
+  const { openDropdownKey, scheduleOpen, scheduleClose, closeDropdown } = dropdown;
+
+  const renderItem = (item: NavigationItem) => {
+    if (item.items && item.items.length > 0) {
+      const key = `${item.label}-${item.href}`;
+      const isOpen = openDropdownKey === key;
+      const isActive = isGroupActive(item);
+
+      const defaultItems = (
+        <>
+          {item.items.map((sub) => {
+            const subActive = isActivePath(sub.href);
+            return (
+              <div key={`${item.label}-${sub.href}`} className="rounded-full">
+                {sub.external ? (
+                  <a
+                    href={sub.href}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className={subMenuLinkCls(subActive)}
+                  >
+                    <span className="min-w-0 truncate" title={sub.label}>{sub.label}</span>
+                  </a>
+                ) : (
+                  <Link href={sub.href} className={subMenuLinkCls(subActive)}>
+                    <span className="min-w-0 truncate" title={sub.label}>{sub.label}</span>
+                  </Link>
+                )}
+              </div>
+            );
+          })}
+        </>
+      );
+
+      const defaultPopover = (
+        <div
+          className={popoverCls}
+          onMouseEnter={() => { scheduleOpen(key); }}
+          onMouseLeave={() => scheduleClose(key)}
+        >
+          {defaultItems}
+        </div>
+      );
+
+      return (
+        <div
+          key={key}
+          className="relative"
+          onMouseEnter={() => scheduleOpen(key)}
+          onMouseLeave={() => scheduleClose(key)}
+        >
+          <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',
+              navItemCls,
+              (isOpen || isActive) && navItemActiveCls,
+              isOpen && 'border-0 dark:border dark:border-border',
+            )}
+          >
+            <span className={labelCls} title={item.label}>{item.label}</span>
+            <span className="inline-flex size-3.5 shrink-0 items-center justify-center" aria-hidden>
+              <ChevronDown
+                className={cn(
+                  '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 active = isActivePath(item.href);
+    return (
+      <Link
+        key={item.href}
+        href={item.href}
+        className={cn(navItemCls, active && navItemActiveCls)}
+      >
+        <span className={labelCls} title={item.label}>{item.label}</span>
+      </Link>
+    );
+  };
+
+  const hasOverflow = overflowItems.length > 0;
+  const isMoreOpen = openDropdownKey === '__overflow-more';
+  const moreActive = isMoreOpen || overflowItems.some((i) => isGroupActive(i));
+
+  return (
+    <>
+      {primaryItems.map(renderItem)}
+
+      {hasOverflow && (
+        <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',
+              navItemCls,
+              moreActive && navItemActiveCls,
+              isMoreOpen && 'border-0 dark:border dark:border-border',
+            )}
+          >
+            <span className={labelCls}>More</span>
+            <span className="inline-flex size-3.5 shrink-0 items-center justify-center" aria-hidden>
+              <ChevronDown
+                className={cn(
+                  'size-3.5 origin-center text-muted-foreground transition-transform duration-200 ease-out will-change-transform',
+                  isMoreOpen && 'rotate-180',
+                )}
+              />
+            </span>
+          </Button>
+
+          {isMoreOpen && (
+            <div
+              className={cn(popoverCls, 'left-auto right-0')}
+              onMouseEnter={() => { scheduleOpen('__overflow-more'); }}
+              onMouseLeave={() => scheduleClose('__overflow-more')}
+            >
+              {overflowItems.map((item) => {
+                const active = isGroupActive(item);
+                return (
+                  <div key={`overflow-${item.href}`} className="rounded-full">
+                    <Link href={item.href} className={subMenuLinkCls(active)}>
+                      <span className="min-w-0 truncate" title={item.label}>{item.label}</span>
+                    </Link>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      )}
+    </>
+  );
+}

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

@@ -108,7 +108,7 @@ export function PublicMobileDrawer(props: PublicMobileDrawerProps = {}) {
           }}
         >
           {/* Scrollable content */}
-          <div className="flex-1 min-h-0 overflow-y-auto px-4 py-4 space-y-5">
+          <div className="flex-1 min-h-0 overflow-y-auto px-4 py-4 pb-10 space-y-5">
         {hasSessionUser && (
           <div className="px-2">
             <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">

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

@@ -11,6 +11,8 @@ import type {
   PublicNavbarShellConfig,
   PublicNavbarPosition,
   PublicNavbarVariant,
+  PublicNavLayout,
+  PublicNavbarHeight,
 } from '../navbarTypes';
 
 export interface PublicNavbarConfig {
@@ -25,6 +27,39 @@ export interface PublicNavbarConfig {
   navbarPosition?: PublicNavbarPosition;
   renderDesktopDropdown?: PublicDesktopDropdownRenderer;
   desktopMaxPrimaryItems?: number;
+  /**
+   * Desktop nav arrangement.
+   * - `default`    — brand left | nav centered | actions right
+   * - `brand-left` — brand left | nav after brand | actions pushed right
+   * - `centered`   — all items centered in one row
+   * - `split`      — brand left | actions right | no desktop nav (drawer only)
+   * @default 'default'
+   */
+  navLayout?: PublicNavLayout;
+  /**
+   * Navbar vertical padding / height.
+   * - `sm` → compact
+   * - `md` → default
+   * - `lg` → tall
+   * @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.
+   * Pair with `navbarVariant="floating"` for best results.
+   * @default false
+   */
+  transparent?: boolean;
+  /**
+   * scrollY threshold (px) for transparent → opaque transition.
+   * @default 40
+   */
+  transparentThreshold?: number;
 }
 
 export interface PublicNavbarProps {
@@ -32,8 +67,6 @@ export interface PublicNavbarProps {
 }
 
 export function PublicNavbar({ config }: PublicNavbarProps) {
-  const rounding = config.shell?.rounding;
-  const containerClassName = config.shell?.className;
   const navigation = config.navigation ?? [];
 
   return (
@@ -43,18 +76,23 @@ export function PublicNavbar({ config }: PublicNavbarProps) {
         brandHref={config.brandHref}
         navigation={navigation}
         userMenu={config.userMenu}
-        containerClassName={containerClassName}
+        containerClassName={config.shell?.className}
         navbarVariant={config.navbarVariant}
         navbarPosition={config.navbarPosition}
         renderDesktopDropdown={config.renderDesktopDropdown}
         desktopMaxPrimaryItems={config.desktopMaxPrimaryItems}
-        rounding={rounding}
+        rounding={config.shell?.rounding}
+        navLayout={config.navLayout}
+        navbarHeight={config.navbarHeight}
+        hideNavOnScroll={config.hideNavOnScroll}
+        transparent={config.transparent}
+        transparentThreshold={config.transparentThreshold}
       />
       <PublicMobileDrawer
         navigation={navigation}
         userMenu={config.userMenu}
-        containerClassName={containerClassName}
-        rounding={rounding}
+        containerClassName={config.shell?.className}
+        rounding={config.shell?.rounding}
       />
     </>
   );