@djangocfg/layouts 2.1.275 → 2.1.277

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';

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

@@ -1,211 +0,0 @@
-/**
- * Public Layout Mobile Drawer
- *
- * Mobile drawer component for PublicLayout navigation
- */
-
-'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 { publicFloatingChromeClassName } from '../publicShellShadow';
-import { usePublicLayoutOptional } from '../context';
-import { useMobileNavPanel } from '../hooks';
-
-import type { NavigationItem, UserMenuConfig } from '../../types';
-
-interface PublicMobileDrawerProps {
-  isOpen?: boolean;
-  onClose?: () => void;
-  navigation?: NavigationItem[];
-  userMenu?: UserMenuConfig;
-  containerClassName?: string;
-  /**
-   * Tailwind rounding for the drawer panel. Defaults to `rounded-2xl`.
-   * Match `PublicNavigation` `rounding` so bar and sheet align visually.
-   */
-  rounding?: 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 ?? [];
-  const userMenu = props.userMenu;
-  const containerClassName = props.containerClassName;
-  const rounding = props.rounding;
-  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}
-        />
-      )}
-      {/* Outer shell must not capture taps when the panel is closed: with pointer-events-none on the
-          inner panel, events would otherwise hit this transparent fixed layer (z-1000) and block the page. */}
-      <div
-        className="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',
-            publicFloatingChromeClassName,
-            rounding ?? 'rounded-2xl',
-            containerClassName,
-            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))',
-          }}
-        >
-          {/* Scrollable content */}
-          <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} />
-        )}
-
-        {/* Navigation Items */}
-        <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/components/PublicNavbar.tsx

@@ -1,99 +0,0 @@
-'use client';
-
-import React from 'react';
-
-import { PublicMobileDrawer } from './PublicMobileDrawer';
-import { PublicNavigation } from './PublicNavigation';
-
-import type { NavigationItem, UserMenuConfig } from '../../types';
-import type { PublicDesktopDropdownRenderer } from './PublicNavigation';
-import type {
-  PublicNavbarShellConfig,
-  PublicNavbarPosition,
-  PublicNavbarVariant,
-  PublicNavLayout,
-  PublicNavbarHeight,
-} from '../navbarTypes';
-
-export interface PublicNavbarConfig {
-  shell?: PublicNavbarShellConfig;
-  /** Brand: custom React node, or a plain string (wrapped in `<Link href={brandHref}>`). */
-  brand?: React.ReactNode;
-  /** @default '/' */
-  brandHref?: string;
-  navigation?: NavigationItem[];
-  userMenu?: UserMenuConfig;
-  navbarVariant?: PublicNavbarVariant;
-  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 {
-  config: PublicNavbarConfig;
-}
-
-export function PublicNavbar({ config }: PublicNavbarProps) {
-  const navigation = config.navigation ?? [];
-
-  return (
-    <>
-      <PublicNavigation
-        brand={config.brand}
-        brandHref={config.brandHref}
-        navigation={navigation}
-        userMenu={config.userMenu}
-        containerClassName={config.shell?.className}
-        navbarVariant={config.navbarVariant}
-        navbarPosition={config.navbarPosition}
-        renderDesktopDropdown={config.renderDesktopDropdown}
-        desktopMaxPrimaryItems={config.desktopMaxPrimaryItems}
-        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={config.shell?.className}
-        rounding={config.shell?.rounding}
-      />
-    </>
-  );
-}