@djangocfg/layouts 2.1.275 → 2.1.277

package/src/layouts/PublicLayout/{components → primitives}/NavActions.tsx

@@ -1,13 +1,15 @@
 'use client';
 
 import { Menu, X } from 'lucide-react';
-import React from 'react';
+import React, { type ReactNode } from 'react';
 
 import { Button } from '@djangocfg/ui-core/components';
 
 import { UserMenu } from '../../_components/UserMenu';
 import type { UserMenuConfig } from '../../types';
 
+import { NavActionItem, type NavAction } from './NavActionItem';
+
 interface NavActionsProps {
   userMenu?: UserMenuConfig;
   mobileMenuOpen: boolean;
@@ -15,6 +17,12 @@ interface NavActionsProps {
   toggleMobileLabel: string;
   /** When true, mobile trigger is always visible (not hidden on lg+). Used for `split` layout. */
   forceShowMobileTrigger?: boolean;
+  /** Typed CTA pills rendered before UserMenu (desktop only). */
+  actions?: NavAction[];
+  /** Arbitrary slot rendered between actions and UserMenu (desktop only). */
+  leadingSlot?: ReactNode;
+  /** Arbitrary slot rendered after the mobile toggle (desktop + mobile). */
+  trailingSlot?: ReactNode;
 }
 
 export function NavActions({
@@ -23,9 +31,24 @@ export function NavActions({
   onMobileMenuToggle,
   toggleMobileLabel,
   forceShowMobileTrigger = false,
+  actions,
+  leadingSlot,
+  trailingSlot,
 }: NavActionsProps) {
+  const hasActions = actions && actions.length > 0;
+
   return (
     <div className="flex items-center gap-4">
+      {hasActions && (
+        <div className="hidden lg:flex shrink-0 items-center gap-1.5">
+          {actions!.map((a) => (
+            <NavActionItem key={`${a.label}-${a.href}`} action={a} />
+          ))}
+        </div>
+      )}
+
+      {leadingSlot && <div className="hidden lg:flex shrink-0 items-center">{leadingSlot}</div>}
+
       <div className="hidden lg:flex">
         <UserMenu
           variant="desktop"
@@ -45,6 +68,8 @@ export function NavActions({
       >
         {mobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
       </Button>
+
+      {trailingSlot && <div className="shrink-0 flex items-center">{trailingSlot}</div>}
     </div>
   );
 }

package/src/layouts/PublicLayout/{components → primitives}/NavBrand.tsx

@@ -1,8 +1,9 @@
 'use client';
 
-import Link from 'next/link';
 import React, { type ReactNode } from 'react';
 
+import { SmartNavLink } from './SmartNavLink';
+
 interface NavBrandProps {
   brand?: ReactNode;
   brandHref?: string;
@@ -13,12 +14,12 @@ export function NavBrand({ brand, brandHref = '/' }: NavBrandProps) {
 
   if (typeof brand === 'string') {
     return (
-      <Link
+      <SmartNavLink
         href={brandHref}
         className="font-bold text-[15px] text-foreground hover:opacity-90 transition-opacity"
       >
         {brand}
-      </Link>
+      </SmartNavLink>
     );
   }
 

package/src/layouts/PublicLayout/{components → primitives}/NavDesktopItems.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { ChevronDown } from 'lucide-react';
-import Link from 'next/link';
 import React from 'react';
 
 import { Button } from '@djangocfg/ui-core/components';
@@ -9,11 +8,15 @@ import { cn } from '@djangocfg/ui-core/lib';
 
 import type { NavigationItem } from '../../types';
 import type { UseDropdownMenuReturn } from '../hooks/useDropdownMenu';
-import type { PublicDesktopDropdownRenderer } from './PublicNavigation';
+import { useResponsiveOverflow } from '../hooks/useResponsiveOverflow';
+import type { PublicDesktopDropdownRenderer } from '../navbarTypes';
+import { SmartNavLink } from './SmartNavLink';
 
 interface NavDesktopItemsProps {
-  primaryItems: NavigationItem[];
-  overflowItems: NavigationItem[];
+  /** Full ordered item list; overflow is computed responsively. */
+  items: NavigationItem[];
+  /** Optional hard cap — measurer will never show more than this. */
+  maxVisible?: number;
   isActivePath: (href: string) => boolean;
   isGroupActive: (item: NavigationItem) => boolean;
   dropdown: UseDropdownMenuReturn;
@@ -29,7 +32,7 @@ const navItemCls = cn(
 );
 
 const navItemActiveCls =
-  'border-0 bg-accent font-semibold text-foreground shadow-sm dark:border dark:border-border dark:bg-muted dark:shadow-none';
+  'border-0 bg-accent font-semibold text-foreground shadow-sm dark:bg-muted dark:shadow-none';
 
 const labelCls = 'min-w-0 max-w-[11rem] truncate sm:max-w-[13rem]';
 
@@ -38,7 +41,7 @@ function subMenuLinkCls(active: boolean) {
     'flex min-h-9 min-w-0 max-w-[min(17rem,calc(100vw-5rem))] items-center rounded-full border-0 px-4 py-2 text-sm font-medium transition-colors',
     'hover:bg-accent/55',
     active
-      ? 'border-0 bg-accent font-semibold text-foreground shadow-sm dark:border dark:border-border dark:bg-muted/90 dark:shadow-none'
+      ? 'border-0 bg-accent font-semibold text-foreground shadow-sm dark:bg-muted/90 dark:shadow-none'
       : 'border-0 text-foreground/90',
   );
 }
@@ -47,8 +50,8 @@ const popoverCls =
   'absolute left-0 top-full mt-1 z-[1200] min-w-[14.5rem] rounded-xl border border-border/70 bg-background/95 backdrop-blur-sm p-1.5 shadow-[0_1px_2px_rgba(0,0,0,0.05),0_6px_18px_rgba(0,0,0,0.035)] dark:shadow-[0_6px_20px_rgba(0,0,0,0.12)]';
 
 export function NavDesktopItems({
-  primaryItems,
-  overflowItems,
+  items,
+  maxVisible,
   isActivePath,
   isGroupActive,
   dropdown,
@@ -56,6 +59,16 @@ export function NavDesktopItems({
 }: NavDesktopItemsProps) {
   const { openDropdownKey, scheduleOpen, scheduleClose, closeDropdown } = dropdown;
 
+  const { visibleCount, containerRef, itemRef, measured } = useResponsiveOverflow({
+    total: items.length,
+    moreWidth: 88,
+    gap: 4,
+  });
+
+  const effectiveCount = Math.min(visibleCount, maxVisible ?? visibleCount);
+  const primaryItems = items.slice(0, effectiveCount);
+  const overflowItems = items.slice(effectiveCount);
+
   const renderItem = (item: NavigationItem) => {
     if (item.items && item.items.length > 0) {
       const key = `${item.label}-${item.href}`;
@@ -78,9 +91,9 @@ export function NavDesktopItems({
                     <span className="min-w-0 truncate" title={sub.label}>{sub.label}</span>
                   </a>
                 ) : (
-                  <Link href={sub.href} className={subMenuLinkCls(subActive)}>
+                  <SmartNavLink href={sub.href} className={subMenuLinkCls(subActive)}>
                     <span className="min-w-0 truncate" title={sub.label}>{sub.label}</span>
-                  </Link>
+                  </SmartNavLink>
                 )}
               </div>
             );
@@ -112,7 +125,6 @@ export function NavDesktopItems({
               'group h-auto min-h-9 max-w-[15rem] gap-1 shadow-none [&_svg]:size-3.5 [&_svg]:shrink-0',
               navItemCls,
               (isOpen || isActive) && navItemActiveCls,
-              isOpen && 'border-0 dark:border dark:border-border',
             )}
           >
             <span className={labelCls} title={item.label}>{item.label}</span>
@@ -137,13 +149,13 @@ export function NavDesktopItems({
 
     const active = isActivePath(item.href);
     return (
-      <Link
+      <SmartNavLink
         key={item.href}
         href={item.href}
         className={cn(navItemCls, active && navItemActiveCls)}
       >
         <span className={labelCls} title={item.label}>{item.label}</span>
-      </Link>
+      </SmartNavLink>
     );
   };
 
@@ -152,56 +164,88 @@ export function NavDesktopItems({
   const moreActive = isMoreOpen || overflowItems.some((i) => isGroupActive(i));
 
   return (
-    <>
-      {primaryItems.map(renderItem)}
-
-      {hasOverflow && (
-        <div
-          className="relative"
-          onMouseEnter={() => scheduleOpen('__overflow-more')}
-          onMouseLeave={() => scheduleClose('__overflow-more')}
-        >
-          <Button
-            variant="ghost"
-            size="sm"
-            className={cn(
-              'group h-auto min-h-9 max-w-[15rem] gap-1 shadow-none [&_svg]:size-3.5 [&_svg]:shrink-0',
-              navItemCls,
-              moreActive && navItemActiveCls,
-              isMoreOpen && 'border-0 dark:border dark:border-border',
-            )}
+    <div
+      ref={containerRef as React.Ref<HTMLDivElement>}
+      className="relative flex min-w-0 flex-1 items-center justify-center gap-1"
+    >
+      {/* Measurement layer: invisible, absolutely positioned, holds width-only copies. */}
+      <div
+        aria-hidden
+        className="pointer-events-none absolute inset-y-0 left-0 flex items-center gap-1 opacity-0"
+        style={{ visibility: 'hidden', whiteSpace: 'nowrap' }}
+      >
+        {items.map((item, i) => (
+          <span
+            key={`m-${item.label}-${item.href}`}
+            ref={itemRef(i) as React.Ref<HTMLSpanElement>}
+            className={cn(navItemCls, 'pointer-events-none')}
           >
-            <span className={labelCls}>More</span>
-            <span className="inline-flex size-3.5 shrink-0 items-center justify-center" aria-hidden>
-              <ChevronDown
-                className={cn(
-                  'size-3.5 origin-center text-muted-foreground transition-transform duration-200 ease-out will-change-transform',
-                  isMoreOpen && 'rotate-180',
-                )}
-              />
-            </span>
-          </Button>
+            <span className={labelCls}>{item.label}</span>
+            {item.items && item.items.length > 0 && (
+              <span className="inline-flex size-3.5 shrink-0 items-center justify-center">
+                <ChevronDown className="size-3.5" />
+              </span>
+            )}
+          </span>
+        ))}
+      </div>
+
+      {/* Live row — only renders items that fit (hidden until first measurement). */}
+      <div
+        className={cn(
+          'flex min-w-0 items-center gap-1',
+          !measured && 'invisible',
+        )}
+      >
+        {primaryItems.map(renderItem)}
 
-          {isMoreOpen && (
-            <div
-              className={cn(popoverCls, 'left-auto right-0')}
-              onMouseEnter={() => { scheduleOpen('__overflow-more'); }}
-              onMouseLeave={() => scheduleClose('__overflow-more')}
+        {hasOverflow && (
+          <div
+            className="relative"
+            onMouseEnter={() => scheduleOpen('__overflow-more')}
+            onMouseLeave={() => scheduleClose('__overflow-more')}
+          >
+            <Button
+              variant="ghost"
+              size="sm"
+              className={cn(
+                'group h-auto min-h-9 max-w-[15rem] gap-1 shadow-none [&_svg]:size-3.5 [&_svg]:shrink-0',
+                navItemCls,
+                moreActive && navItemActiveCls,
+              )}
             >
-              {overflowItems.map((item) => {
-                const active = isGroupActive(item);
-                return (
-                  <div key={`overflow-${item.href}`} className="rounded-full">
-                    <Link href={item.href} className={subMenuLinkCls(active)}>
-                      <span className="min-w-0 truncate" title={item.label}>{item.label}</span>
-                    </Link>
-                  </div>
-                );
-              })}
-            </div>
-          )}
-        </div>
-      )}
-    </>
+              <span className={labelCls}>More</span>
+              <span className="inline-flex size-3.5 shrink-0 items-center justify-center" aria-hidden>
+                <ChevronDown
+                  className={cn(
+                    'size-3.5 origin-center text-muted-foreground transition-transform duration-200 ease-out will-change-transform',
+                    isMoreOpen && 'rotate-180',
+                  )}
+                />
+              </span>
+            </Button>
+
+            {isMoreOpen && (
+              <div
+                className={cn(popoverCls, 'left-auto right-0')}
+                onMouseEnter={() => { scheduleOpen('__overflow-more'); }}
+                onMouseLeave={() => scheduleClose('__overflow-more')}
+              >
+                {overflowItems.map((item) => {
+                  const active = isGroupActive(item);
+                  return (
+                    <div key={`overflow-${item.href}`} className="rounded-full">
+                      <SmartNavLink href={item.href} className={subMenuLinkCls(active)}>
+                        <span className="min-w-0 truncate" title={item.label}>{item.label}</span>
+                      </SmartNavLink>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
   );
 }

package/src/layouts/PublicLayout/primitives/SmartNavLink.tsx

@@ -0,0 +1,81 @@
+/**
+ * SmartNavLink
+ *
+ * Drop-in replacement for `next/link` used inside PublicLayout navbars/footers.
+ *
+ * If the `href` is a string that starts with one of the prefixes configured
+ * via `ExternalPrefixesProvider`, renders a plain `<a>` (full page navigation).
+ * This is required for routes owned by a catch-all handler outside App Router
+ * (e.g. Nextra `/docs/*`), where `next/link` client navigation asks for an
+ * RSC payload the route cannot produce — resulting in a hard error banner.
+ *
+ * Otherwise falls back to `next/link` so existing behaviour is preserved.
+ */
+
+'use client';
+
+import Link, { type LinkProps } from 'next/link';
+import React, { forwardRef, type AnchorHTMLAttributes, type ReactNode } from 'react';
+
+import {
+  isExternalPrefixHref,
+  useExternalPrefixes,
+  type ExternalPrefixes,
+} from './ExternalPrefixesContext';
+
+type AnchorProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>;
+
+export interface SmartNavLinkProps
+  extends Omit<LinkProps, 'href' | 'passHref' | 'legacyBehavior'>,
+    AnchorProps {
+  href: LinkProps['href'];
+  children?: ReactNode;
+  /** Optional override — falls back to context value. */
+  externalPrefixes?: ExternalPrefixes;
+}
+
+export const SmartNavLink = forwardRef<HTMLAnchorElement, SmartNavLinkProps>(
+  function SmartNavLink(props, ref) {
+    const {
+      href,
+      children,
+      externalPrefixes,
+      // LinkProps-specific fields we should NOT forward to a plain <a>.
+      prefetch,
+      replace,
+      scroll,
+      shallow,
+      locale,
+      // Rest are anchor-compatible attributes.
+      ...anchorProps
+    } = props;
+
+    const contextPrefixes = useExternalPrefixes();
+    const prefixes = externalPrefixes ?? contextPrefixes;
+
+    const shouldUseAnchor = isExternalPrefixHref(href, prefixes);
+
+    if (shouldUseAnchor) {
+      return (
+        <a ref={ref} href={href} {...anchorProps}>
+          {children}
+        </a>
+      );
+    }
+
+    return (
+      <Link
+        ref={ref}
+        href={href}
+        prefetch={prefetch}
+        replace={replace}
+        scroll={scroll}
+        shallow={shallow}
+        locale={locale}
+        {...anchorProps}
+      >
+        {children}
+      </Link>
+    );
+  },
+);

package/src/layouts/PublicLayout/{components → primitives}/ThemeBrandMark.tsx

@@ -31,11 +31,6 @@ export interface ThemeBrandMarkProps {
   'aria-label'?: string;
 }
 
-/**
- * Renders two branches; only one is visible. Same idea as pairing
- * `className="dark:hidden"` / `className="hidden dark:block"` on `<img>`, but works with
- * any node (SVG component, picture, etc.).
- */
 export function ThemeBrandMark({ light, dark, className, 'aria-label': ariaLabel }: ThemeBrandMarkProps) {
   return (
     <span
@@ -61,9 +56,6 @@ export interface ThemeBrandMarkImgProps {
   'aria-label'?: string;
 }
 
-/**
- * Convenience wrapper around {@link ThemeBrandMark} for the common “two raster/SVG URLs” case.
- */
 export function ThemeBrandMarkImg({
   srcLight,
   srcDark,

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

@@ -0,0 +1,18 @@
+export { NavBrand } from './NavBrand';
+export { NavActions } from './NavActions';
+export { NavActionItem } from './NavActionItem';
+export type { NavAction } from './NavActionItem';
+export { NavDesktopItems } from './NavDesktopItems';
+export { ThemeBrandMark, ThemeBrandMarkImg } from './ThemeBrandMark';
+export type { ThemeBrandMarkProps, ThemeBrandMarkImgProps } from './ThemeBrandMark';
+export {
+  ExternalPrefixesProvider,
+  useExternalPrefixes,
+  isExternalPrefixHref,
+} from './ExternalPrefixesContext';
+export type {
+  ExternalPrefixes,
+  ExternalPrefixesProviderProps,
+} from './ExternalPrefixesContext';
+export { SmartNavLink } from './SmartNavLink';
+export type { SmartNavLinkProps } from './SmartNavLink';

package/src/layouts/PublicLayout/shared/MobileDrawerShell.tsx

@@ -0,0 +1,205 @@
+/**
+ * MobileDrawerShell — shared drawer body used by every navbar variant.
+ *
+ * Variants differ only in `panelClassName` (rounded/flush, shadow, border) and
+ * optional outer container class.
+ */
+
+'use client';
+
+import { ArrowRight } from 'lucide-react';
+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 { usePublicLayoutOptional } from '../context';
+import { useMobileNavPanel } from '../hooks';
+import { SmartNavLink } from '../primitives/SmartNavLink';
+
+import type { NavigationItem, UserMenuConfig } from '../../types';
+
+export interface MobileDrawerShellProps {
+  isOpen?: boolean;
+  onClose?: () => void;
+  navigation?: NavigationItem[];
+  userMenu?: UserMenuConfig;
+  /** Wrapper around the panel — controls horizontal padding / max width. */
+  outerClassName?: string;
+  /** Panel surface (bg, border, rounding, shadow). */
+  panelClassName?: string;
+}
+
+export function MobileDrawerShell(props: MobileDrawerShellProps) {
+  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 { 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}
+        />
+      )}
+      <div
+        className={cn(
+          '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',
+            props.panelClassName,
+            props.outerClassName,
+            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))',
+          }}
+        >
+          <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} />
+            )}
+
+            <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}>
+                      <SmartNavLink
+                        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}
+                      </SmartNavLink>
+                      {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 (
+                              <SmartNavLink
+                                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}
+                              </SmartNavLink>
+                            );
+                          })}
+                        </div>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+
+          {showSignInFooter && (
+            <div className="shrink-0 border-t border-border/50 p-4">
+              <SmartNavLink
+                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>
+              </SmartNavLink>
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}
+