@djangocfg/layouts 2.1.275 → 2.1.277

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