@djangocfg/layouts 2.1.266 → 2.1.267

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

@@ -1,2 +1,6 @@
 export { useMobileNavPanel } from './useMobileNavPanel';
-
+export { useDropdownMenu } from './useDropdownMenu';
+export type { UseDropdownMenuReturn } from './useDropdownMenu';
+export { useNavbarScroll } from './useNavbarScroll';
+export type { UseNavbarScrollOptions, UseNavbarScrollReturn } from './useNavbarScroll';
+export { useNavbarViewportVars } from './useNavbarViewportVars';

package/src/layouts/PublicLayout/hooks/useDropdownMenu.ts

@@ -0,0 +1,58 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+export interface UseDropdownMenuReturn {
+  openDropdownKey: string | null;
+  scheduleOpen: (key: string) => void;
+  scheduleClose: (key: string) => void;
+  closeDropdown: () => void;
+}
+
+/** Hover-based open/close with debounce timers for desktop dropdown menus. */
+export function useDropdownMenu(): UseDropdownMenuReturn {
+  const [openDropdownKey, setOpenDropdownKey] = useState<string | null>(null);
+  const openTimerRef = useRef<number | null>(null);
+  const closeTimerRef = useRef<number | null>(null);
+
+  const clearOpenTimer = useCallback(() => {
+    if (openTimerRef.current !== null) {
+      window.clearTimeout(openTimerRef.current);
+      openTimerRef.current = null;
+    }
+  }, []);
+
+  const clearCloseTimer = useCallback(() => {
+    if (closeTimerRef.current !== null) {
+      window.clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+  }, []);
+
+  const scheduleOpen = useCallback((key: string) => {
+    clearOpenTimer();
+    clearCloseTimer();
+    openTimerRef.current = window.setTimeout(() => {
+      setOpenDropdownKey(key);
+    }, 80);
+  }, [clearOpenTimer, clearCloseTimer]);
+
+  const scheduleClose = useCallback((key: string) => {
+    clearOpenTimer();
+    clearCloseTimer();
+    closeTimerRef.current = window.setTimeout(() => {
+      setOpenDropdownKey((prev) => (prev === key ? null : prev));
+    }, 120);
+  }, [clearOpenTimer, clearCloseTimer]);
+
+  const closeDropdown = useCallback(() => setOpenDropdownKey(null), []);
+
+  useEffect(() => {
+    return () => {
+      clearOpenTimer();
+      clearCloseTimer();
+    };
+  }, [clearOpenTimer, clearCloseTimer]);
+
+  return { openDropdownKey, scheduleOpen, scheduleClose, closeDropdown };
+}

package/src/layouts/PublicLayout/hooks/useNavbarScroll.ts

@@ -0,0 +1,61 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+
+export interface UseNavbarScrollOptions {
+  /** Slide navbar up on scroll-down, back on scroll-up. @default false */
+  hideNavOnScroll?: boolean;
+  /** Transparent at page top, opaque after threshold. @default false */
+  transparent?: boolean;
+  /** scrollY threshold for hide + transparent triggers. @default 40 */
+  transparentThreshold?: number;
+}
+
+export interface UseNavbarScrollReturn {
+  /** true → apply `-translate-y-full` to outer wrapper */
+  hidden: boolean;
+  /** true → scrollY >= threshold; drives opaque background */
+  scrolled: boolean;
+}
+
+export function useNavbarScroll(options: UseNavbarScrollOptions = {}): UseNavbarScrollReturn {
+  const { hideNavOnScroll = false, transparent = false, transparentThreshold = 40 } = options;
+
+  const [hidden, setHidden] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+  const lastScrollY = useRef(0);
+
+  useEffect(() => {
+    if (!hideNavOnScroll && !transparent) {
+      setHidden(false);
+      setScrolled(false);
+      return;
+    }
+
+    const handleScroll = () => {
+      const currentY = window.scrollY;
+      const delta = currentY - lastScrollY.current;
+
+      if (transparent) {
+        setScrolled(currentY >= transparentThreshold);
+      }
+
+      if (hideNavOnScroll) {
+        if (currentY > transparentThreshold) {
+          if (delta > 0) setHidden(true);
+          else if (delta < 0) setHidden(false);
+        } else {
+          setHidden(false);
+        }
+      }
+
+      lastScrollY.current = currentY;
+    };
+
+    handleScroll();
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [hideNavOnScroll, transparent, transparentThreshold]);
+
+  return { hidden, scrolled };
+}

package/src/layouts/PublicLayout/hooks/useNavbarViewportVars.ts

@@ -0,0 +1,46 @@
+'use client';
+
+import { type RefObject, useEffect } from 'react';
+
+/**
+ * Tracks the bottom edge of the navbar outer element and writes CSS vars:
+ *   --public-navbar-mobile-drawer-top
+ *   --public-navbar-mobile-drawer-max-height
+ *
+ * @param navOuterRef - ref on the outermost navbar wrapper div
+ * @param deps        - values that should re-trigger observer setup (position, variant, containerClassName)
+ */
+export function useNavbarViewportVars(
+  navOuterRef: RefObject<HTMLDivElement | null>,
+  deps: readonly unknown[],
+): void {
+  useEffect(() => {
+    const update = () => {
+      const root = document.documentElement;
+      const navEl = navOuterRef.current;
+      if (!navEl) return;
+
+      const rect = navEl.getBoundingClientRect();
+      const top = Math.max(0, Math.round(rect.bottom + 8));
+      const maxHeight = Math.max(240, window.innerHeight - top - 12);
+
+      root.style.setProperty('--public-navbar-mobile-drawer-top', `${top}px`);
+      root.style.setProperty('--public-navbar-mobile-drawer-max-height', `${maxHeight}px`);
+    };
+
+    update();
+    const navEl = navOuterRef.current;
+    const observer = navEl ? new ResizeObserver(update) : null;
+    if (navEl && observer) observer.observe(navEl);
+    window.addEventListener('resize', update);
+    window.addEventListener('scroll', update, { passive: true });
+
+    return () => {
+      if (navEl && observer) observer.unobserve(navEl);
+      observer?.disconnect();
+      window.removeEventListener('resize', update);
+      window.removeEventListener('scroll', update);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+}

package/src/layouts/PublicLayout/index.ts

@@ -10,7 +10,11 @@ export type {
   PublicNavbarVariant,
   PublicNavbarPosition,
   PublicNavbarShellConfig,
+  PublicNavLayout,
+  PublicNavbarHeight,
 } from './navbarTypes';
+export type { UseNavbarScrollOptions, UseNavbarScrollReturn } from './hooks/useNavbarScroll';
+export type { UseDropdownMenuReturn } from './hooks/useDropdownMenu';
 export type {
   PublicDesktopDropdownRenderer,
   PublicDesktopDropdownRenderProps,

package/src/layouts/PublicLayout/navbarTypes.ts

@@ -6,6 +6,23 @@ export type PublicNavbarVariant = 'floating' | 'flush';
 
 export type PublicNavbarPosition = 'sticky' | 'fixed' | 'static';
 
+/**
+ * Desktop nav layout variant.
+ * - `default`     — brand left | nav **centered** (absolute) | actions right
+ * - `brand-left`  — brand left | nav immediately after brand | actions pushed right
+ * - `centered`    — brand + nav + actions all centered in one row
+ * - `split`       — brand left | actions right | no desktop nav (drawer only)
+ */
+export type PublicNavLayout = 'default' | 'brand-left' | 'centered' | 'split';
+
+/**
+ * Navbar vertical padding / height.
+ * - `sm` → py-2
+ * - `md` → py-3.5  (default, matches current)
+ * - `lg` → py-5
+ */
+export type PublicNavbarHeight = 'sm' | 'md' | 'lg';
+
 export interface PublicNavbarSurface {
   variant: PublicNavbarVariant;
   position: PublicNavbarPosition;

package/src/utils/pathMatcher.ts

@@ -105,12 +105,15 @@ export function matchesPath(pathname: string, enabledPath?: string | string[]):
   if (!enabledPath) return false;
 
   const matchSinglePath = (path: string): boolean => {
+    // Normalize both sides — strip trailing slash (except root)
+    const normalPath = pathname.length > 1 ? pathname.replace(/\/+$/, '') : pathname;
+    const normalPattern = path.length > 1 ? path.replace(/\/+$/, '') : path;
     // If pattern contains glob characters, use pattern matching
-    if (path.includes('*')) {
-      return matchGlobPattern(pathname, path);
+    if (normalPattern.includes('*')) {
+      return matchGlobPattern(normalPath, normalPattern);
     }
     // Otherwise, exact or prefix match
-    return pathname === path || pathname.startsWith(path + '/');
+    return normalPath === normalPattern || normalPath.startsWith(normalPattern + '/');
   };
 
   if (typeof enabledPath === 'string') {