@djangocfg/layouts 2.1.276 → 2.1.279

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.276",
+  "version": "2.1.279",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -74,19 +74,19 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.276",
-    "@djangocfg/centrifugo": "^2.1.276",
-    "@djangocfg/debuger": "^2.1.276",
-    "@djangocfg/i18n": "^2.1.276",
-    "@djangocfg/monitor": "^2.1.276",
-    "@djangocfg/ui-core": "^2.1.276",
-    "@djangocfg/ui-nextjs": "^2.1.276",
-    "@djangocfg/ui-tools": "^2.1.276",
+    "@djangocfg/api": "^2.1.279",
+    "@djangocfg/centrifugo": "^2.1.279",
+    "@djangocfg/debuger": "^2.1.279",
+    "@djangocfg/i18n": "^2.1.279",
+    "@djangocfg/monitor": "^2.1.279",
+    "@djangocfg/ui-core": "^2.1.279",
+    "@djangocfg/ui-nextjs": "^2.1.279",
+    "@djangocfg/ui-tools": "^2.1.279",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
-    "next": "^16.0.10",
+    "next": "^16.2.2",
     "p-retry": "^7.0.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
@@ -110,15 +110,15 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.276",
-    "@djangocfg/centrifugo": "^2.1.276",
-    "@djangocfg/debuger": "^2.1.276",
-    "@djangocfg/i18n": "^2.1.276",
-    "@djangocfg/monitor": "^2.1.276",
-    "@djangocfg/typescript-config": "^2.1.276",
-    "@djangocfg/ui-core": "^2.1.276",
-    "@djangocfg/ui-nextjs": "^2.1.276",
-    "@djangocfg/ui-tools": "^2.1.276",
+    "@djangocfg/api": "^2.1.279",
+    "@djangocfg/centrifugo": "^2.1.279",
+    "@djangocfg/debuger": "^2.1.279",
+    "@djangocfg/i18n": "^2.1.279",
+    "@djangocfg/monitor": "^2.1.279",
+    "@djangocfg/typescript-config": "^2.1.279",
+    "@djangocfg/ui-core": "^2.1.279",
+    "@djangocfg/ui-nextjs": "^2.1.279",
+    "@djangocfg/ui-tools": "^2.1.279",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/layouts/PublicLayout/footers/DefaultFooter/DefaultFooter.tsx

@@ -6,7 +6,6 @@
 
 'use client';
 
-import Link from 'next/link';
 import React, { useEffect, useState } from 'react';
 import { Laptop, Moon, Sun } from 'lucide-react';
 
@@ -14,6 +13,7 @@ import { Button } from '@djangocfg/ui-core/components';
 import { useThemeContext } from '@djangocfg/ui-nextjs/theme';
 
 import { LocaleSwitcher } from '../../../_components/LocaleSwitcher';
+import { SmartNavLink } from '../../primitives/SmartNavLink';
 import { FooterMenuSections } from './FooterMenuSections';
 import { FooterProjectInfo } from './FooterProjectInfo';
 
@@ -132,13 +132,13 @@ export function DefaultFooter({ config }: DefaultFooterProps) {
                       {link.label}
                     </a>
                   ) : (
-                    <Link
+                    <SmartNavLink
                       key={link.path}
                       href={link.path}
                       className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                     >
                       {link.label}
-                    </Link>
+                    </SmartNavLink>
                   )
                 )}
               </div>
@@ -195,13 +195,13 @@ export function DefaultFooter({ config }: DefaultFooterProps) {
                     {link.label}
                   </a>
                 ) : (
-                  <Link
+                  <SmartNavLink
                     key={link.path}
                     href={link.path}
                     className="text-xs text-muted-foreground hover:text-primary transition-colors"
                   >
                     {link.label}
-                  </Link>
+                  </SmartNavLink>
                 )
               )}
             </div>
@@ -302,9 +302,9 @@ export function DefaultFooter({ config }: DefaultFooterProps) {
                     {link.label}
                   </a>
                 ) : (
-                  <Link key={link.path} href={link.path} className="hover:text-foreground transition-colors whitespace-nowrap">
+                  <SmartNavLink key={link.path} href={link.path} className="hover:text-foreground transition-colors whitespace-nowrap">
                     {link.label}
-                  </Link>
+                  </SmartNavLink>
                 )
               )}
             </div>

package/src/layouts/PublicLayout/footers/DefaultFooter/FooterBottom.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import Link from 'next/link';
 import React from 'react';
 
+import { SmartNavLink } from '../../primitives/SmartNavLink';
 import { DjangoCFGLogo } from './DjangoCFGLogo';
 
 import type { FooterLink } from './types';
@@ -95,13 +95,13 @@ export function FooterBottom({
                   {link.label}
                 </a>
               ) : (
-                <Link
+                <SmartNavLink
                   key={link.path}
                   href={link.path}
                   className="text-xs text-muted-foreground hover:text-primary transition-colors"
                 >
                   {link.label}
-                </Link>
+                </SmartNavLink>
               )
             )}
           </div>

package/src/layouts/PublicLayout/footers/DefaultFooter/FooterMenuSections.tsx

@@ -1,8 +1,9 @@
 'use client';
 
-import Link from 'next/link';
 import React from 'react';
 
+import { SmartNavLink } from '../../primitives/SmartNavLink';
+
 import type { FooterMenuSection } from './types';
 
 export interface FooterMenuSectionsProps {
@@ -33,12 +34,12 @@ export function FooterMenuSections({
           <ul className="space-y-2">
             {section.items.map((item) => (
               <li key={item.path}>
-                <Link
+                <SmartNavLink
                   href={item.path}
                   className="text-sm text-foreground/90 hover:text-foreground transition-colors"
                 >
                   {item.label}
-                </Link>
+                </SmartNavLink>
               </li>
             ))}
           </ul>

package/src/layouts/PublicLayout/index.ts

@@ -29,8 +29,26 @@ export type { UseNavbarScrollOptions, UseNavbarScrollReturn } from './hooks/useN
 export type { UseDropdownMenuReturn } from './hooks/useDropdownMenu';
 
 // Primitives (for users who want to build a custom navbar)
-export { NavBrand, NavActions, NavActionItem, NavDesktopItems, ThemeBrandMark, ThemeBrandMarkImg } from './primitives';
-export type { NavAction, ThemeBrandMarkProps, ThemeBrandMarkImgProps } from './primitives';
+export {
+  NavBrand,
+  NavActions,
+  NavActionItem,
+  NavDesktopItems,
+  ThemeBrandMark,
+  ThemeBrandMarkImg,
+  ExternalPrefixesProvider,
+  useExternalPrefixes,
+  isExternalPrefixHref,
+  SmartNavLink,
+} from './primitives';
+export type {
+  NavAction,
+  ThemeBrandMarkProps,
+  ThemeBrandMarkImgProps,
+  ExternalPrefixes,
+  ExternalPrefixesProviderProps,
+  SmartNavLinkProps,
+} from './primitives';
 
 // Navbar variants
 export * from './navbars';

package/src/layouts/PublicLayout/navbars/FloatingNavbar/FloatingNavbar.tsx

@@ -11,6 +11,7 @@ import React from 'react';
 import { cn } from '@djangocfg/ui-core/lib';
 
 import { publicFloatingChromeClassName } from '../../publicShellShadow';
+import { ExternalPrefixesProvider } from '../../primitives/ExternalPrefixesContext';
 import type { NavAction } from '../../primitives/NavActionItem';
 import { NavbarShell } from '../../shared';
 import type {
@@ -51,6 +52,14 @@ export interface FloatingNavbarConfig {
   actionsLeadingSlot?: React.ReactNode;
   /** Arbitrary ReactNode after the mobile toggle. */
   actionsTrailingSlot?: React.ReactNode;
+  /**
+   * Path prefixes that should be navigated with a plain `<a>` (full page load)
+   * instead of `next/link`. Use this for routes served by a catch-all handler
+   * outside the Next.js App Router (e.g. Nextra at `/docs/*`) — those routes
+   * cannot return an RSC payload, so `next/link` client navigation fails.
+   * @default []
+   */
+  externalPrefixes?: readonly string[];
 }
 
 export interface FloatingNavbarProps {
@@ -62,6 +71,7 @@ export function FloatingNavbar({ config }: FloatingNavbarProps) {
   const rounding = config.shell?.rounding;
   const containerClassName = config.shell?.className;
   const position = config.navbarPosition ?? 'sticky';
+  const externalPrefixes = config.externalPrefixes;
 
   const outerClassName = cn(
     position === 'fixed' ? 'fixed' : position === 'static' ? 'static' : 'sticky',
@@ -77,7 +87,7 @@ export function FloatingNavbar({ config }: FloatingNavbarProps) {
   );
 
   return (
-    <>
+    <ExternalPrefixesProvider value={externalPrefixes}>
       <NavbarShell
         variant="floating"
         position={position}
@@ -112,6 +122,6 @@ export function FloatingNavbar({ config }: FloatingNavbarProps) {
         containerClassName={containerClassName}
         rounding={rounding}
       />
-    </>
+    </ExternalPrefixesProvider>
   );
 }

package/src/layouts/PublicLayout/navbars/FlushNavbar/FlushNavbar.tsx

@@ -10,6 +10,7 @@ import React from 'react';
 
 import { cn } from '@djangocfg/ui-core/lib';
 
+import { ExternalPrefixesProvider } from '../../primitives/ExternalPrefixesContext';
 import type { NavAction } from '../../primitives/NavActionItem';
 import { NavbarShell } from '../../shared';
 import type {
@@ -50,6 +51,14 @@ export interface FlushNavbarConfig {
   actionsLeadingSlot?: React.ReactNode;
   /** Arbitrary ReactNode after the mobile toggle. */
   actionsTrailingSlot?: React.ReactNode;
+  /**
+   * Path prefixes that should be navigated with a plain `<a>` (full page load)
+   * instead of `next/link`. Use this for routes served by a catch-all handler
+   * outside the Next.js App Router (e.g. Nextra at `/docs/*`) — those routes
+   * cannot return an RSC payload, so `next/link` client navigation fails.
+   * @default []
+   */
+  externalPrefixes?: readonly string[];
 }
 
 export interface FlushNavbarProps {
@@ -60,6 +69,7 @@ export function FlushNavbar({ config }: FlushNavbarProps) {
   const navigation = config.navigation ?? [];
   const containerClassName = config.shell?.className;
   const position = config.navbarPosition ?? 'sticky';
+  const externalPrefixes = config.externalPrefixes;
 
   const outerClassName = cn(
     position === 'fixed' ? 'fixed' : position === 'static' ? 'static' : 'sticky',
@@ -73,7 +83,7 @@ export function FlushNavbar({ config }: FlushNavbarProps) {
   );
 
   return (
-    <>
+    <ExternalPrefixesProvider value={externalPrefixes}>
       <NavbarShell
         variant="flush"
         position={position}
@@ -107,6 +117,6 @@ export function FlushNavbar({ config }: FlushNavbarProps) {
         userMenu={config.userMenu}
         containerClassName={containerClassName}
       />
-    </>
+    </ExternalPrefixesProvider>
   );
 }

package/src/layouts/PublicLayout/navbars/MinimalNavbar/MinimalNavbar.tsx

@@ -17,6 +17,7 @@ import { Button } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
 
 import { UserMenu } from '../../../_components/UserMenu';
+import { ExternalPrefixesProvider } from '../../primitives/ExternalPrefixesContext';
 import { NavActionItem, type NavAction } from '../../primitives/NavActionItem';
 import { NavbarShell, type NavbarActionsContext } from '../../shared';
 import type {
@@ -67,6 +68,15 @@ export interface MinimalNavbarConfig {
    * @default 'mx-auto max-w-[1400px] px-4 sm:px-6 lg:px-10'
    */
   containerClassName?: string;
+
+  /**
+   * Path prefixes that should be navigated with a plain `<a>` (full page load)
+   * instead of `next/link`. Use this for routes served by a catch-all handler
+   * outside the Next.js App Router (e.g. Nextra at `/docs/*`) — those routes
+   * cannot return an RSC payload, so `next/link` client navigation fails.
+   * @default []
+   */
+  externalPrefixes?: readonly string[];
 }
 
 export interface MinimalNavbarProps {
@@ -121,6 +131,7 @@ export function MinimalNavbar({ config }: MinimalNavbarProps) {
   const position = config.navbarPosition ?? 'sticky';
   const transparent = config.transparent ?? true;
   const containerClassName = config.containerClassName ?? 'mx-auto max-w-[1400px] px-4 sm:px-6 lg:px-10';
+  const externalPrefixes = config.externalPrefixes;
 
   const outerClassName = cn(
     position === 'fixed' ? 'fixed' : position === 'static' ? 'static' : 'sticky',
@@ -131,7 +142,7 @@ export function MinimalNavbar({ config }: MinimalNavbarProps) {
   const shapeClassName = 'w-full rounded-none border-0 shadow-none';
 
   return (
-    <>
+    <ExternalPrefixesProvider value={externalPrefixes}>
       <NavbarShell
         variant="minimal"
         position={position}
@@ -164,6 +175,6 @@ export function MinimalNavbar({ config }: MinimalNavbarProps) {
         userMenu={config.userMenu}
         containerClassName={containerClassName}
       />
-    </>
+    </ExternalPrefixesProvider>
   );
 }

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

@@ -0,0 +1,69 @@
+/**
+ * ExternalPrefixesContext
+ *
+ * Provides a list of path prefixes that should be treated as "outside" the
+ * Next.js App Router (e.g. a catch-all served by Nextra). Consumers inside the
+ * navbar (`SmartNavLink`) check whether the `href` starts with any configured
+ * prefix; if so, they render a native `<a>` (full page load) instead of a
+ * `next/link` that would fetch an RSC payload the route cannot produce.
+ *
+ * Default: `[]` — so behaviour is unchanged for consumers who do not opt in.
+ */
+
+'use client';
+
+import React, { createContext, useContext, useMemo, type ReactNode } from 'react';
+
+export type ExternalPrefixes = readonly string[];
+
+const ExternalPrefixesContext = createContext<ExternalPrefixes>([]);
+
+export interface ExternalPrefixesProviderProps {
+  /** List of path prefixes treated as external to the App Router. */
+  value?: ExternalPrefixes;
+  children: ReactNode;
+}
+
+export function ExternalPrefixesProvider({
+  value,
+  children,
+}: ExternalPrefixesProviderProps) {
+  const resolved = useMemo<ExternalPrefixes>(() => value ?? [], [value]);
+  return (
+    <ExternalPrefixesContext.Provider value={resolved}>
+      {children}
+    </ExternalPrefixesContext.Provider>
+  );
+}
+
+export function useExternalPrefixes(): ExternalPrefixes {
+  return useContext(ExternalPrefixesContext);
+}
+
+/**
+ * Returns true if `href` is a string that starts with any of the provided
+ * external prefixes. Non-string hrefs (objects, `next/link` URL shape) always
+ * return false — those are App Router internal.
+ *
+ * Matches the prefix exactly or at a path-boundary (`/`, `?`, `#`) so that
+ * `/docs` in the prefix list matches `/docs`, `/docs/`, `/docs/foo`, `/docs?x=1`,
+ * `/docs#bar` — but NOT `/docsearch` (which should stay an App Router link).
+ */
+export function isExternalPrefixHref(
+  href: unknown,
+  prefixes: ExternalPrefixes,
+): href is string {
+  if (typeof href !== 'string' || prefixes.length === 0) return false;
+  for (const prefix of prefixes) {
+    if (!prefix) continue;
+    if (href === prefix) return true;
+    if (
+      href.startsWith(`${prefix}/`) ||
+      href.startsWith(`${prefix}?`) ||
+      href.startsWith(`${prefix}#`)
+    ) {
+      return true;
+    }
+  }
+  return false;
+}

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

@@ -7,11 +7,12 @@
 
 'use client';
 
-import Link from 'next/link';
 import React, { type ReactNode } from 'react';
 
 import { cn } from '@djangocfg/ui-core/lib';
 
+import { SmartNavLink } from './SmartNavLink';
+
 export interface NavAction {
   label: string;
   href: string;
@@ -87,8 +88,8 @@ export function NavActionItem({ action, className }: NavActionItemProps) {
     );
   }
   return (
-    <Link href={action.href} className={cls} onClick={action.onClick}>
+    <SmartNavLink href={action.href} className={cls} onClick={action.onClick}>
       {content}
-    </Link>
+    </SmartNavLink>
   );
 }

package/src/layouts/PublicLayout/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/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';
@@ -11,6 +10,7 @@ import type { NavigationItem } from '../../types';
 import type { UseDropdownMenuReturn } from '../hooks/useDropdownMenu';
 import { useResponsiveOverflow } from '../hooks/useResponsiveOverflow';
 import type { PublicDesktopDropdownRenderer } from '../navbarTypes';
+import { SmartNavLink } from './SmartNavLink';
 
 interface NavDesktopItemsProps {
   /** Full ordered item list; overflow is computed responsively. */
@@ -91,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>
             );
@@ -149,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>
     );
   };
 
@@ -235,9 +235,9 @@ export function NavDesktopItems({
                   const active = isGroupActive(item);
                   return (
                     <div key={`overflow-${item.href}`} className="rounded-full">
-                      <Link href={item.href} className={subMenuLinkCls(active)}>
+                      <SmartNavLink href={item.href} className={subMenuLinkCls(active)}>
                         <span className="min-w-0 truncate" title={item.label}>{item.label}</span>
-                      </Link>
+                      </SmartNavLink>
                     </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/primitives/index.ts

@@ -5,3 +5,14 @@ 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

@@ -8,7 +8,6 @@
 'use client';
 
 import { ArrowRight } from 'lucide-react';
-import Link from 'next/link';
 import React, { useMemo } from 'react';
 
 import { useAuth } from '@djangocfg/api/auth';
@@ -20,6 +19,7 @@ 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';
 
@@ -133,7 +133,7 @@ export function MobileDrawerShell(props: MobileDrawerShellProps) {
                   const parentOnlySectionOpen = hasChildNav && anyChildActive;
                   return (
                     <div key={item.href}>
-                      <Link
+                      <SmartNavLink
                         href={item.href}
                         onClick={closeMobileMenu}
                         title={item.label}
@@ -148,13 +148,13 @@ export function MobileDrawerShell(props: MobileDrawerShellProps) {
                         )}
                       >
                         {item.label}
-                      </Link>
+                      </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 (
-                              <Link
+                              <SmartNavLink
                                 key={`${item.href}-${subItem.href}`}
                                 href={subItem.href}
                                 onClick={closeMobileMenu}
@@ -168,7 +168,7 @@ export function MobileDrawerShell(props: MobileDrawerShellProps) {
                                 )}
                               >
                                 {subItem.label}
-                              </Link>
+                              </SmartNavLink>
                             );
                           })}
                         </div>
@@ -182,7 +182,7 @@ export function MobileDrawerShell(props: MobileDrawerShellProps) {
 
           {showSignInFooter && (
             <div className="shrink-0 border-t border-border/50 p-4">
-              <Link
+              <SmartNavLink
                 href={userMenu?.authPath || '/auth'}
                 onClick={closeMobileMenu}
                 className="block"
@@ -194,7 +194,7 @@ export function MobileDrawerShell(props: MobileDrawerShellProps) {
                     aria-hidden
                   />
                 </Button>
-              </Link>
+              </SmartNavLink>
             </div>
           )}
         </div>