@djangocfg/layouts 2.1.274 → 2.1.276

package/src/layouts/PublicLayout/{components → primitives}/ThemeBrandMark.tsx

@@ -31,11 +31,6 @@ export interface ThemeBrandMarkProps {
   'aria-label'?: string;
 }
 
-/**
- * Renders two branches; only one is visible. Same idea as pairing
- * `className="dark:hidden"` / `className="hidden dark:block"` on `<img>`, but works with
- * any node (SVG component, picture, etc.).
- */
 export function ThemeBrandMark({ light, dark, className, 'aria-label': ariaLabel }: ThemeBrandMarkProps) {
   return (
     <span
@@ -61,9 +56,6 @@ export interface ThemeBrandMarkImgProps {
   'aria-label'?: string;
 }
 
-/**
- * Convenience wrapper around {@link ThemeBrandMark} for the common “two raster/SVG URLs” case.
- */
 export function ThemeBrandMarkImg({
   srcLight,
   srcDark,

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

@@ -0,0 +1,7 @@
+export { NavBrand } from './NavBrand';
+export { NavActions } from './NavActions';
+export { NavActionItem } from './NavActionItem';
+export type { NavAction } from './NavActionItem';
+export { NavDesktopItems } from './NavDesktopItems';
+export { ThemeBrandMark, ThemeBrandMarkImg } from './ThemeBrandMark';
+export type { ThemeBrandMarkProps, ThemeBrandMarkImgProps } from './ThemeBrandMark';

package/src/layouts/PublicLayout/shared/MobileDrawerShell.tsx

@@ -0,0 +1,205 @@
+/**
+ * MobileDrawerShell — shared drawer body used by every navbar variant.
+ *
+ * Variants differ only in `panelClassName` (rounded/flush, shadow, border) and
+ * optional outer container class.
+ */
+
+'use client';
+
+import { ArrowRight } from 'lucide-react';
+import Link from 'next/link';
+import React, { useMemo } from 'react';
+
+import { useAuth } from '@djangocfg/api/auth';
+import { useAppT } from '@djangocfg/i18n';
+import { Button } from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { usePathnameWithoutLocale } from '../../../hooks';
+import { UserMenu } from '../../_components/UserMenu';
+import { usePublicLayoutOptional } from '../context';
+import { useMobileNavPanel } from '../hooks';
+
+import type { NavigationItem, UserMenuConfig } from '../../types';
+
+export interface MobileDrawerShellProps {
+  isOpen?: boolean;
+  onClose?: () => void;
+  navigation?: NavigationItem[];
+  userMenu?: UserMenuConfig;
+  /** Wrapper around the panel — controls horizontal padding / max width. */
+  outerClassName?: string;
+  /** Panel surface (bg, border, rounding, shadow). */
+  panelClassName?: string;
+}
+
+export function MobileDrawerShell(props: MobileDrawerShellProps) {
+  const context = usePublicLayoutOptional();
+  const mobileMenuOpen = props.isOpen ?? context?.mobileMenuOpen ?? false;
+  const closeMobileMenu = props.onClose ?? context?.closeMobileMenu ?? (() => {});
+  const navigation = props.navigation ?? [];
+  const userMenu = props.userMenu;
+
+  const { isAuthenticated, user } = useAuth();
+  const pathname = usePathnameWithoutLocale();
+  const t = useAppT();
+  const { mounted, visible } = useMobileNavPanel({
+    isOpen: mobileMenuOpen,
+    onClose: closeMobileMenu,
+  });
+
+  const labels = useMemo(() => ({
+    menu: t('layouts.navigation.menu'),
+    quickActions: 'Actions',
+    signIn: t('layouts.profile.login'),
+  }), [t]);
+
+  const mobileNavigation = useMemo(() => {
+    const hasHome = navigation.some((item) => item.href === '/');
+    if (hasHome) return navigation;
+    return [{ label: 'Home', href: '/' }, ...navigation];
+  }, [navigation]);
+
+  const isActivePath = (href: string) => {
+    if (href === '/') return pathname === '/';
+    return pathname === href || pathname.startsWith(`${href}/`);
+  };
+
+  if (!mounted) return null;
+
+  const hasSessionUser = Boolean(isAuthenticated && user);
+  const showSignInFooter = !hasSessionUser;
+
+  return (
+    <>
+      {mobileMenuOpen && (
+        <button
+          type="button"
+          aria-label={t('layouts.mobile.closeMenu')}
+          className="fixed inset-0 z-[998] lg:hidden bg-black/35 transition-opacity duration-200"
+          onClick={closeMobileMenu}
+        />
+      )}
+      <div
+        className={cn(
+          'pointer-events-none fixed inset-x-0 z-1000 lg:hidden px-4 pb-3 sm:px-6 sm:pb-3 lg:px-8',
+        )}
+        style={{
+          top: 'var(--public-navbar-mobile-drawer-top, 5rem)',
+          bottom: 0,
+        }}
+      >
+        <div
+          className={cn(
+            'mx-auto flex h-full min-h-0 max-h-full w-full flex-col overflow-hidden bg-background/72 backdrop-blur-[10px] dark:bg-card/80 transform-gpu will-change-transform transition-[transform,opacity] duration-[220ms] ease-out',
+            props.panelClassName,
+            props.outerClassName,
+            visible
+              ? 'pointer-events-auto opacity-100 translate-y-0 scale-100'
+              : 'pointer-events-none opacity-0 -translate-y-2 scale-[0.985]',
+          )}
+          style={{
+            maxHeight: 'min(var(--public-navbar-mobile-drawer-max-height, calc(100dvh - 5rem - 12px)), calc(100dvh - 12px))',
+          }}
+        >
+          <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">
+                  {labels.quickActions}
+                </h3>
+              </div>
+            )}
+
+            {hasSessionUser && (
+              <UserMenu variant="mobile" groups={userMenu?.groups} authPath={userMenu?.authPath} i18n={userMenu?.i18n} />
+            )}
+
+            <div className="space-y-2">
+              <div className="px-2">
+                <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                  {labels.menu}
+                </h3>
+              </div>
+              <div className="space-y-1">
+                {mobileNavigation.map((item) => {
+                  const childItems = item.items ?? [];
+                  const hasChildNav = childItems.length > 0;
+                  const anyChildActive = hasChildNav && childItems.some((sub) => isActivePath(sub.href));
+                  const parentPageActive = hasChildNav
+                    ? isActivePath(item.href) && !anyChildActive
+                    : isActivePath(item.href);
+                  const parentOnlySectionOpen = hasChildNav && anyChildActive;
+                  return (
+                    <div key={item.href}>
+                      <Link
+                        href={item.href}
+                        onClick={closeMobileMenu}
+                        title={item.label}
+                        className={cn(
+                          'block min-h-11 min-w-0 max-w-full rounded-full border-0 px-5 py-3 text-[15px] font-medium transition-colors ring-0 truncate',
+                          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35',
+                          parentPageActive
+                            ? 'border-0 bg-accent font-semibold text-foreground shadow-sm dark:border dark:border-border dark:bg-muted dark:shadow-none'
+                            : parentOnlySectionOpen
+                              ? 'font-semibold text-foreground'
+                              : 'text-foreground hover:bg-accent/60 hover:text-accent-foreground',
+                        )}
+                      >
+                        {item.label}
+                      </Link>
+                      {hasChildNav && (
+                        <div className="ml-3 mt-1.5 space-y-1 border-l border-border/40 pl-3">
+                          {childItems.map((subItem) => {
+                            const subActive = isActivePath(subItem.href);
+                            return (
+                              <Link
+                                key={`${item.href}-${subItem.href}`}
+                                href={subItem.href}
+                                onClick={closeMobileMenu}
+                                title={subItem.label}
+                                className={cn(
+                                  'flex min-h-11 min-w-0 max-w-full items-center rounded-full border-0 px-4 py-2.5 text-sm font-medium transition-colors ring-0 truncate',
+                                  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35',
+                                  subActive
+                                    ? '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-muted-foreground hover:bg-accent/55 hover:text-foreground',
+                                )}
+                              >
+                                {subItem.label}
+                              </Link>
+                            );
+                          })}
+                        </div>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+
+          {showSignInFooter && (
+            <div className="shrink-0 border-t border-border/50 p-4">
+              <Link
+                href={userMenu?.authPath || '/auth'}
+                onClick={closeMobileMenu}
+                className="block"
+              >
+                <Button className="relative w-full justify-center rounded-full h-11 px-6 pr-12">
+                  {labels.signIn}
+                  <ArrowRight
+                    className="pointer-events-none absolute right-4 top-1/2 h-4 w-4 -translate-y-1/2 shrink-0"
+                    aria-hidden
+                  />
+                </Button>
+              </Link>
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}
+

package/src/layouts/PublicLayout/shared/NavbarShell.tsx

@@ -0,0 +1,295 @@
+/**
+ * NavbarShell — internal orchestrator shared by all public navbar variants.
+ *
+ * Handles the common layer each variant has to wire up anyway:
+ *  - scroll behavior (hide on scroll, transparent → opaque)
+ *  - desktop dropdown hover timers
+ *  - viewport CSS vars (for the mobile drawer anchoring)
+ *  - active-path detection
+ *  - layout rows (default / brand-left / centered / split)
+ *  - context registration (`setNavbarSurface`)
+ *
+ * Variants pass in their own chrome (outer positioning, shape, background) through
+ * class-building render callbacks, then stay thin (just pick defaults, export types).
+ */
+
+'use client';
+
+import React, {
+  type ReactNode,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+} from 'react';
+
+import { useAppT } from '@djangocfg/i18n';
+import { useIsTabletOrBelow } from '@djangocfg/ui-core/hooks';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { usePathnameWithoutLocale } from '../../../hooks';
+import { usePublicLayoutOptional } from '../context';
+import {
+  useDropdownMenu,
+  useNavbarScroll,
+  useNavbarViewportVars,
+} from '../hooks';
+import type {
+  PublicDesktopDropdownRenderer,
+  PublicNavbarHeight,
+  PublicNavbarPosition,
+  PublicNavbarVariant,
+  PublicNavLayout,
+} from '../navbarTypes';
+import type { NavigationItem, UserMenuConfig } from '../../types';
+
+import { NavActions } from '../primitives/NavActions';
+import type { NavAction } from '../primitives/NavActionItem';
+import { NavBrand } from '../primitives/NavBrand';
+import { NavDesktopItems } from '../primitives/NavDesktopItems';
+
+const heightCls: Record<PublicNavbarHeight, string> = {
+  sm: 'py-2',
+  md: 'py-3.5',
+  lg: 'py-5',
+};
+
+interface ShapeInputs {
+  /** true at scrollY >= threshold */
+  scrolled: boolean;
+  /** Matches `transparent` flag at the source. */
+  transparent: boolean;
+}
+
+export interface NavbarShellProps {
+  // ── Surface identity (reported to context) ────────────────────────────────
+  variant: PublicNavbarVariant;
+  position: PublicNavbarPosition;
+
+  // ── Content ───────────────────────────────────────────────────────────────
+  brand?: ReactNode;
+  brandHref?: string;
+  navigation?: NavigationItem[];
+  userMenu?: UserMenuConfig;
+  renderDesktopDropdown?: PublicDesktopDropdownRenderer;
+  /**
+   * Hard cap for how many items to try to fit on desktop. Useful when a
+   * consumer wants to force a compact primary row even if more would fit.
+   * Defaults to the full list length (let the responsive measurer decide).
+   */
+  desktopMaxPrimaryItems?: number;
+
+  // ── Layout ────────────────────────────────────────────────────────────────
+  navLayout?: PublicNavLayout;
+  navbarHeight?: PublicNavbarHeight;
+  /** Inner padding for the row container. */
+  innerPadding?: string;
+
+  // ── Scroll behavior ───────────────────────────────────────────────────────
+  hideNavOnScroll?: boolean;
+  transparent?: boolean;
+  transparentThreshold?: number;
+
+  // ── Chrome (per-variant) ──────────────────────────────────────────────────
+  /** Classes on the outer wrapper (fixed/sticky, top offset, outer x-padding). */
+  outerClassName?: string;
+  /** Classes for the `<nav>` element defining the shape (rounding, border, shadow). */
+  shapeClassName?: string;
+  /** Surface classes (bg, backdrop-blur). Driven by `shapeForState`. */
+  shapeForState?: (inputs: ShapeInputs) => string;
+
+  /**
+   * Replaces the default actions column (UserMenu + mobile-toggle).
+   * Variant owns the mobile toggle too. Receives helpers so it can build the
+   * right-hand side however it wants.
+   */
+  renderActions?: (ctx: NavbarActionsContext) => ReactNode;
+
+  // ── Default-actions slots (only used when `renderActions` is NOT provided) ─
+  /** Typed CTA pills (Book a demo / Get started / …) before UserMenu. */
+  actions?: NavAction[];
+  /** Arbitrary ReactNode between actions and UserMenu. */
+  actionsLeadingSlot?: ReactNode;
+  /** Arbitrary ReactNode after the mobile toggle. */
+  actionsTrailingSlot?: ReactNode;
+
+  // ── Props override (used by variants that proxy ctx differently) ──────────
+  mobileMenuOpen?: boolean;
+  onMobileMenuToggle?: () => void;
+}
+
+export interface NavbarActionsContext {
+  userMenu?: UserMenuConfig;
+  mobileMenuOpen: boolean;
+  toggleMobileMenu: () => void;
+  toggleMobileLabel: string;
+  navLayout: PublicNavLayout;
+}
+
+export function NavbarShell(props: NavbarShellProps) {
+  const context = usePublicLayoutOptional();
+
+  const {
+    variant,
+    position,
+    brand,
+    brandHref = '/',
+    navigation = [],
+    userMenu,
+    renderDesktopDropdown,
+    desktopMaxPrimaryItems: desktopMaxPrimaryItemsProp,
+    navLayout = 'default',
+    navbarHeight = 'md',
+    innerPadding = 'w-full pl-6 pr-3 sm:px-4 lg:px-6',
+    hideNavOnScroll = false,
+    transparent = false,
+    transparentThreshold = 40,
+    outerClassName,
+    shapeClassName,
+    shapeForState,
+  } = props;
+
+  const desktopMaxPrimaryItems = desktopMaxPrimaryItemsProp
+    ? Math.max(1, desktopMaxPrimaryItemsProp)
+    : undefined;
+  const mobileMenuOpen = props.mobileMenuOpen ?? context?.mobileMenuOpen ?? false;
+  const toggleMobileMenu = props.onMobileMenuToggle ?? context?.toggleMobileMenu ?? (() => {});
+
+  const navOuterRef = useRef<HTMLDivElement | null>(null);
+
+  const { hidden, scrolled } = useNavbarScroll({ hideNavOnScroll, transparent, transparentThreshold });
+  const dropdown = useDropdownMenu();
+  useNavbarViewportVars(navOuterRef, [position, variant, outerClassName, shapeClassName] as const);
+
+  const isTabletOrBelow = useIsTabletOrBelow();
+  const t = useAppT();
+  const pathname = usePathnameWithoutLocale();
+
+  // Close dropdowns when switching to mobile
+  useEffect(() => {
+    if (isTabletOrBelow) dropdown.closeDropdown();
+  }, [isTabletOrBelow, dropdown.closeDropdown]);
+
+  // Sync navbar surface into context
+  const setNavbarSurface = context?.setNavbarSurface;
+  useLayoutEffect(() => {
+    if (!setNavbarSurface) return;
+    setNavbarSurface({ variant, position });
+    return () => setNavbarSurface(null);
+  }, [setNavbarSurface, variant, position]);
+
+  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]);
+
+  // 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 desktopItems = desktopNavItems;
+
+  const outerCls = cn(
+    outerClassName,
+    'inset-x-0 z-50',
+    hideNavOnScroll && 'transition-transform duration-300 ease-in-out will-change-transform',
+    hideNavOnScroll && hidden && !mobileMenuOpen && '-translate-y-full',
+  );
+
+  const surfaceCls = shapeForState?.({ scrolled, transparent });
+
+  const brandNode = (
+    <div className="min-w-0 shrink-0 flex items-center">
+      <NavBrand brand={brand} brandHref={brandHref} />
+    </div>
+  );
+
+  const desktopNavNode = navLayout !== 'split' ? (
+    <NavDesktopItems
+      items={desktopItems}
+      maxVisible={desktopMaxPrimaryItems}
+      isActivePath={isActivePath}
+      isGroupActive={isGroupActive}
+      dropdown={dropdown}
+      renderDesktopDropdown={renderDesktopDropdown}
+    />
+  ) : null;
+
+  const actionsNode = props.renderActions ? (
+    props.renderActions({
+      userMenu,
+      mobileMenuOpen,
+      toggleMobileMenu,
+      toggleMobileLabel,
+      navLayout,
+    })
+  ) : (
+    <NavActions
+      userMenu={userMenu}
+      mobileMenuOpen={mobileMenuOpen}
+      onMobileMenuToggle={toggleMobileMenu}
+      toggleMobileLabel={toggleMobileLabel}
+      forceShowMobileTrigger={navLayout === 'split'}
+      actions={props.actions}
+      leadingSlot={props.actionsLeadingSlot}
+      trailingSlot={props.actionsTrailingSlot}
+    />
+  );
+
+  const h = heightCls[navbarHeight];
+
+  const row = (() => {
+    switch (navLayout) {
+      case 'brand-left':
+        return (
+          <div className={cn('flex items-center gap-4', h)}>
+            <div className="min-w-0 shrink-0 flex items-center">{brandNode}</div>
+            <div className="hidden isolate lg:flex min-w-0 flex-1 items-center gap-1">{desktopNavNode}</div>
+            <div className="flex shrink-0 items-center gap-4">{actionsNode}</div>
+          </div>
+        );
+      case 'centered':
+        return (
+          <div className={cn('flex items-center gap-4', h)}>
+            <div className="shrink-0">{brandNode}</div>
+            <div className="hidden isolate lg:flex min-w-0 flex-1 items-center justify-center gap-1">{desktopNavNode}</div>
+            <div className="flex shrink-0 items-center">{actionsNode}</div>
+          </div>
+        );
+      case 'split':
+        return (
+          <div className={cn('flex items-center justify-between', h)}>
+            {brandNode}
+            {actionsNode}
+          </div>
+        );
+      default:
+        return (
+          <div className={cn('flex items-center gap-4', h)}>
+            <div className="shrink-0">{brandNode}</div>
+            <div className="hidden isolate lg:flex min-w-0 flex-1 items-center justify-center gap-1">
+              {desktopNavNode}
+            </div>
+            <div className="flex shrink-0 items-center">{actionsNode}</div>
+          </div>
+        );
+    }
+  })();
+
+  return (
+    <div ref={navOuterRef} className={outerCls}>
+      <nav className={cn(shapeClassName, surfaceCls)}>
+        <div className={innerPadding}>{row}</div>
+      </nav>
+    </div>
+  );
+}

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

@@ -0,0 +1,4 @@
+export { NavbarShell } from './NavbarShell';
+export type { NavbarShellProps, NavbarActionsContext } from './NavbarShell';
+export { MobileDrawerShell } from './MobileDrawerShell';
+export type { MobileDrawerShellProps } from './MobileDrawerShell';