@djangocfg/layouts 2.1.256 → 2.1.259

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

@@ -13,11 +13,13 @@ 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 { useFloatingPanel } from '../hooks';
+import { useMobileNavPanel } from '../hooks';
 
 import type { NavigationItem, UserMenuConfig } from '../../types';
 
@@ -27,6 +29,11 @@ interface PublicMobileDrawerProps {
   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 = {}) {
@@ -36,10 +43,11 @@ export function PublicMobileDrawer(props: PublicMobileDrawerProps = {}) {
   const navigation = props.navigation ?? [];
   const userMenu = props.userMenu;
   const containerClassName = props.containerClassName;
-  const { isAuthenticated } = useAuth();
+  const rounding = props.rounding;
+  const { isAuthenticated, user } = useAuth();
   const pathname = usePathnameWithoutLocale();
   const t = useAppT();
-  const { isRendered, isActive, onTransitionEnd } = useFloatingPanel({
+  const { mounted, visible } = useMobileNavPanel({
     isOpen: mobileMenuOpen,
     onClose: closeMobileMenu,
   });
@@ -61,7 +69,10 @@ export function PublicMobileDrawer(props: PublicMobileDrawerProps = {}) {
     return pathname === href || pathname.startsWith(`${href}/`);
   };
 
-  if (!isRendered) return null;
+  if (!mounted) return null;
+
+  const hasSessionUser = Boolean(isAuthenticated && user);
+  const showSignInFooter = !hasSessionUser;
 
   return (
     <>
@@ -73,26 +84,32 @@ export function PublicMobileDrawer(props: PublicMobileDrawerProps = {}) {
           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="fixed inset-x-0 z-1000 lg:hidden px-4 sm:px-6 lg:px-8"
-        style={{ top: 'var(--public-navbar-mobile-drawer-top, 5rem)' }}
+        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
-          onTransitionEnd={onTransitionEnd}
-          className={`mx-auto w-full rounded-2xl border border-border/60 bg-background/95 backdrop-blur-xl shadow-2xl overflow-hidden flex flex-col transform-gpu will-change-transform transition-[transform,opacity] duration-[220ms] ease-out ${containerClassName || ''} ${
-            isActive
-              ? 'opacity-100 translate-y-0 scale-100'
-              : 'opacity-0 -translate-y-2 scale-[0.985] pointer-events-none'
-          }`}
+          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))',
-            backgroundColor: 'hsl(var(--background) / 0.72)',
-            backdropFilter: 'blur(10px)',
           }}
         >
           {/* Scrollable content */}
           <div className="flex-1 min-h-0 overflow-y-auto px-4 py-4 space-y-5">
-        {isAuthenticated && (
+        {hasSessionUser && (
           <div className="px-2">
             <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
               {labels.quickActions}
@@ -100,8 +117,8 @@ export function PublicMobileDrawer(props: PublicMobileDrawerProps = {}) {
           </div>
         )}
 
-        {isAuthenticated && (
-          <UserMenu variant="mobile" groups={userMenu?.groups} authPath={userMenu?.authPath} />
+        {hasSessionUser && (
+          <UserMenu variant="mobile" groups={userMenu?.groups} authPath={userMenu?.authPath} i18n={userMenu?.i18n} />
         )}
 
         {/* Navigation Items */}
@@ -112,49 +129,76 @@ export function PublicMobileDrawer(props: PublicMobileDrawerProps = {}) {
             </h3>
           </div>
           <div className="space-y-1">
-            {mobileNavigation.map((item) => (
+            {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}
-                  className={`block px-3 py-2.5 rounded-lg text-[15px] font-medium transition-colors ${
-                    isActivePath(item.href)
-                      ? 'bg-accent/55 text-foreground'
-                      : 'text-foreground hover:bg-accent/70 hover:text-accent-foreground'
-                  }`}
+                  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>
-                {item.items && item.items.length > 0 && (
-                  <div className="ml-3 mt-1 space-y-1 border-l border-border/40 pl-3">
-                    {item.items.map((subItem) => (
-                      <Link
-                        key={`${item.href}-${subItem.href}`}
-                        href={subItem.href}
-                        onClick={closeMobileMenu}
-                        className="block px-2 py-2 rounded-md text-sm text-muted-foreground transition-colors hover:text-foreground hover:bg-accent/40"
-                      >
-                        {subItem.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>
 
-          {!isAuthenticated && (
+          {showSignInFooter && (
             <div className="shrink-0 border-t border-border/50 p-4">
               <Link
                 href={userMenu?.authPath || '/auth'}
                 onClick={closeMobileMenu}
                 className="block"
               >
-                <Button className="w-full justify-between rounded-lg h-11">
-                  <span>{labels.signIn}</span>
-                  <ArrowRight className="h-4 w-4" />
+                <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>

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

@@ -6,69 +6,56 @@ import { PublicMobileDrawer } from './PublicMobileDrawer';
 import { PublicNavigation } from './PublicNavigation';
 
 import type { NavigationItem, UserMenuConfig } from '../../types';
+import type { PublicDesktopDropdownRenderer } from './PublicNavigation';
 import type {
-  PublicDesktopDropdownRenderer,
+  PublicNavbarShellConfig,
   PublicNavbarPosition,
   PublicNavbarVariant,
-} from './PublicNavigation';
+} 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;
-  logo?: string;
-  siteName?: string;
   navigation?: NavigationItem[];
   userMenu?: UserMenuConfig;
-  containerClassName?: string;
   navbarVariant?: PublicNavbarVariant;
   navbarPosition?: PublicNavbarPosition;
   renderDesktopDropdown?: PublicDesktopDropdownRenderer;
   desktopMaxPrimaryItems?: number;
 }
 
-export interface PublicNavbarProps extends PublicNavbarConfig {
-  /**
-   * Preferred API: pass everything as a single config object.
-   * Flat props are still supported and override `config`.
-   */
-  config?: PublicNavbarConfig;
+export interface PublicNavbarProps {
+  config: PublicNavbarConfig;
 }
 
-export function PublicNavbar(props: PublicNavbarProps = {}) {
-  const cfg = props.config ?? {};
-  const brand = props.brand ?? cfg.brand;
-  const brandHref = props.brandHref ?? cfg.brandHref;
-  const logo = props.logo ?? cfg.logo;
-  const siteName = props.siteName ?? cfg.siteName;
-  const navigation = props.navigation ?? cfg.navigation ?? [];
-  const userMenu = props.userMenu ?? cfg.userMenu;
-  const containerClassName = props.containerClassName ?? cfg.containerClassName;
-  const navbarVariant = props.navbarVariant ?? cfg.navbarVariant;
-  const navbarPosition = props.navbarPosition ?? cfg.navbarPosition;
-  const renderDesktopDropdown = props.renderDesktopDropdown ?? cfg.renderDesktopDropdown;
-  const desktopMaxPrimaryItems = props.desktopMaxPrimaryItems ?? cfg.desktopMaxPrimaryItems;
+export function PublicNavbar({ config }: PublicNavbarProps) {
+  const rounding = config.shell?.rounding;
+  const containerClassName = config.shell?.className;
+  const navigation = config.navigation ?? [];
 
   return (
     <>
       <PublicNavigation
-        brand={brand}
-        brandHref={brandHref}
-        logo={logo}
-        siteName={siteName}
+        brand={config.brand}
+        brandHref={config.brandHref}
         navigation={navigation}
-        userMenu={userMenu}
+        userMenu={config.userMenu}
         containerClassName={containerClassName}
-        navbarVariant={navbarVariant}
-        navbarPosition={navbarPosition}
-        renderDesktopDropdown={renderDesktopDropdown}
-        desktopMaxPrimaryItems={desktopMaxPrimaryItems}
+        navbarVariant={config.navbarVariant}
+        navbarPosition={config.navbarPosition}
+        renderDesktopDropdown={config.renderDesktopDropdown}
+        desktopMaxPrimaryItems={config.desktopMaxPrimaryItems}
+        rounding={rounding}
       />
       <PublicMobileDrawer
         navigation={navigation}
-        userMenu={userMenu}
+        userMenu={config.userMenu}
         containerClassName={containerClassName}
+        rounding={rounding}
       />
     </>
   );
 }
-