@djangocfg/layouts 2.1.274 → 2.1.276

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}
-      />
-    </>
-  );
-}

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

@@ -1,287 +0,0 @@
-/**
- * Public Layout Navigation — orchestrator.
- *
- * Logic lives in hooks; rendering lives in NavBrand / NavDesktopItems / NavActions.
- * This file wires them together and switches on navLayout.
- */
-
-'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 {
-  PublicNavbarHeight,
-  PublicNavbarPosition,
-  PublicNavbarVariant,
-  PublicNavLayout,
-} from '../navbarTypes';
-import { publicFloatingChromeClassName } from '../publicShellShadow';
-import type { NavigationItem, UserMenuConfig } from '../../types';
-
-import { NavActions } from './NavActions';
-import { NavBrand } from './NavBrand';
-import { NavDesktopItems } from './NavDesktopItems';
-
-// ─── Public types (re-exported so PublicNavbar.tsx can use them) ──────────────
-
-export interface PublicDesktopDropdownRenderProps {
-  item: NavigationItem;
-  isOpen: boolean;
-  isActive: boolean;
-  close: () => void;
-  defaultPopover: React.ReactNode;
-  defaultItems: React.ReactNode;
-}
-
-export type PublicDesktopDropdownRenderer = (props: PublicDesktopDropdownRenderProps) => ReactNode;
-
-export type { PublicNavbarPosition, PublicNavbarVariant } from '../navbarTypes';
-
-// ─── Props ────────────────────────────────────────────────────────────────────
-
-interface PublicNavigationProps {
-  brand?: ReactNode;
-  /** @default '/' */
-  brandHref?: string;
-  navigation?: NavigationItem[];
-  userMenu?: UserMenuConfig;
-  containerClassName?: string;
-  navbarVariant?: PublicNavbarVariant;
-  navbarPosition?: PublicNavbarPosition;
-  renderDesktopDropdown?: PublicDesktopDropdownRenderer;
-  /** Max visible top-level desktop items before collapsing into "More". @default 7 */
-  desktopMaxPrimaryItems?: number;
-  /** Tailwind rounding for floating variant shell. @default 'rounded-2xl' */
-  rounding?: string;
-  mobileMenuOpen?: boolean;
-  onMobileMenuToggle?: () => void;
-  /** Desktop nav arrangement. @default 'default' */
-  navLayout?: PublicNavLayout;
-  /** Navbar vertical padding / height. @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 past threshold. @default false */
-  transparent?: boolean;
-  /** scrollY threshold for transparent → opaque transition. @default 40 */
-  transparentThreshold?: number;
-}
-
-// ─── Height map ───────────────────────────────────────────────────────────────
-
-const heightCls: Record<PublicNavbarHeight, string> = {
-  sm: 'py-2',
-  md: 'py-3.5',
-  lg: 'py-5',
-};
-
-// ─── Component ────────────────────────────────────────────────────────────────
-
-export function PublicNavigation(props: PublicNavigationProps = {}) {
-  const context = usePublicLayoutOptional();
-
-  // ── Resolve props (context fills missing values) ──────────────────────────
-  const brand           = props.brand;
-  const brandHref       = props.brandHref ?? '/';
-  const navigation      = props.navigation ?? [];
-  const userMenu        = props.userMenu;
-  const containerClassName   = props.containerClassName;
-  const rounding        = props.rounding;
-  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 navLayout       = props.navLayout ?? 'default';
-  const navbarHeight    = props.navbarHeight ?? 'md';
-  const hideNavOnScroll = props.hideNavOnScroll ?? false;
-  const transparent     = props.transparent ?? false;
-  const transparentThreshold = props.transparentThreshold ?? 40;
-
-  // ── Refs ──────────────────────────────────────────────────────────────────
-  const navOuterRef = useRef<HTMLDivElement | null>(null);
-
-  // ── Hooks ─────────────────────────────────────────────────────────────────
-  const { hidden, scrolled } = useNavbarScroll({ hideNavOnScroll, transparent, transparentThreshold });
-  const dropdown = useDropdownMenu();
-  useNavbarViewportVars(navOuterRef, [navbarPosition, navbarVariant, containerClassName] 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: navbarVariant, position: navbarPosition });
-    return () => setNavbarSurface(null);
-  }, [setNavbarSurface, navbarVariant, navbarPosition]);
-
-  // ── Derived values ────────────────────────────────────────────────────────
-  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]);
-
-  // Desktop: 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 primaryItems  = desktopNavItems.slice(0, desktopMaxPrimaryItems);
-  const overflowItems = desktopNavItems.slice(desktopMaxPrimaryItems);
-
-  // ── Class names ───────────────────────────────────────────────────────────
-
-  const navOuterClassName = cn(
-    navbarPosition === 'fixed'
-      ? 'fixed'
-      : navbarPosition === 'static'
-        ? 'static'
-        : 'sticky',
-    navbarVariant === 'floating' ? 'top-3' : 'top-0',
-    navbarVariant === 'floating' ? 'px-3 sm:px-4 lg:px-6' : '',
-    'inset-x-0 z-50',
-    hideNavOnScroll && 'transition-transform duration-300 ease-in-out will-change-transform',
-    // Keep visible when mobile menu is open even if scrolling
-    hideNavOnScroll && hidden && !mobileMenuOpen && '-translate-y-full',
-  );
-
-  const navShapeClassName = cn(
-    'mx-auto w-full',
-    navbarVariant === 'floating'
-      ? cn(rounding ?? 'rounded-2xl', publicFloatingChromeClassName)
-      : 'rounded-none border-x-0 border-t-0 border-b border-border/40 dark:border-border/70 shadow-none',
-    containerClassName,
-    navbarVariant === 'floating' && '!border-0 dark:!border dark:!border-border/75',
-  );
-
-  const navSurfaceClassName = cn(
-    transparent && 'transition-[background-color,backdrop-filter] duration-200 ease-out',
-    !transparent || scrolled
-      ? 'bg-background/72 backdrop-blur-[10px] dark:bg-card/80'
-      : 'bg-transparent backdrop-blur-0 dark:bg-transparent',
-  );
-
-  // ── Sub-components ────────────────────────────────────────────────────────
-
-  const brandNode = (
-    <div className="min-w-0 shrink-0 flex items-center">
-      <NavBrand brand={brand} brandHref={brandHref} />
-    </div>
-  );
-
-  const desktopNavNode = navLayout !== 'split' ? (
-    <NavDesktopItems
-      primaryItems={primaryItems}
-      overflowItems={overflowItems}
-      isActivePath={isActivePath}
-      isGroupActive={isGroupActive}
-      dropdown={dropdown}
-      renderDesktopDropdown={renderDesktopDropdown}
-    />
-  ) : null;
-
-  const actionsNode = (
-    <NavActions
-      userMenu={userMenu}
-      mobileMenuOpen={mobileMenuOpen}
-      onMobileMenuToggle={toggleMobileMenu}
-      toggleMobileLabel={toggleMobileLabel}
-      forceShowMobileTrigger={navLayout === 'split'}
-    />
-  );
-
-  const h = heightCls[navbarHeight];
-
-  // ── Layout variants ───────────────────────────────────────────────────────
-
-  const renderRow = () => {
-    switch (navLayout) {
-      case 'brand-left':
-        return (
-          <div className={cn('flex items-center gap-1', h)}>
-            <div className="min-w-0 shrink-0 flex items-center mr-4">{brandNode}</div>
-            <div className="hidden isolate lg:flex items-center gap-1">
-              {desktopNavNode}
-            </div>
-            <div className="ml-auto flex items-center gap-4">{actionsNode}</div>
-          </div>
-        );
-
-      case 'centered':
-        return (
-          <div className={cn('flex items-center justify-center gap-4', h)}>
-            {brandNode}
-            <div className="hidden isolate lg:flex items-center gap-1">
-              {desktopNavNode}
-            </div>
-            {actionsNode}
-          </div>
-        );
-
-      case 'split':
-        return (
-          <div className={cn('flex items-center justify-between', h)}>
-            {brandNode}
-            {actionsNode}
-          </div>
-        );
-
-      default: // 'default' — brand left, nav truly centered (absolute), actions right
-        return (
-          <div className={cn('relative flex items-center justify-between', h)}>
-            {brandNode}
-            <div className="hidden isolate lg:flex items-center gap-1 absolute left-1/2 -translate-x-1/2">
-              {desktopNavNode}
-            </div>
-            {actionsNode}
-          </div>
-        );
-    }
-  };
-
-  // ── Render ────────────────────────────────────────────────────────────────
-
-  return (
-    <div ref={navOuterRef} className={navOuterClassName}>
-      <nav className={cn(navShapeClassName, navSurfaceClassName)}>
-        <div className="w-full pl-6 pr-3 sm:px-4 lg:px-6">
-          {renderRow()}
-        </div>
-      </nav>
-    </div>
-  );
-}

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

@@ -1,11 +0,0 @@
-/**
- * Public Layout Components
- */
-
-export { PublicNavigation } from './PublicNavigation';
-export { PublicMobileDrawer } from './PublicMobileDrawer';
-export { PublicNavbar } from './PublicNavbar';
-export { PublicFooter } from './PublicFooter';
-export { ThemeBrandMark, ThemeBrandMarkImg } from './ThemeBrandMark';
-export type { ThemeBrandMarkProps, ThemeBrandMarkImgProps } from './ThemeBrandMark';
-