@djangocfg/layouts 2.1.280 → 2.1.282

package/README.md

@@ -87,7 +87,7 @@ Wraps `BaseApp` and picks **admin → private → public** layout by path (`matc
 
 | Component | Use |
 |---|---|
-| **`PublicLayout`** | Marketing / docs. Slots for navbar + footer. Supports `LinkComponentProvider` to inject an i18n-aware `Link` (e.g. `next-intl`) so every anchor picks up the locale prefix. **[See PublicLayout README](./src/layouts/PublicLayout/README.md)** for full props, navbar variants (`FloatingNavbar` / `FlushNavbar` / `MinimalNavbar`), `DefaultFooter`, `NavAction`, and hooks. |
+| **`PublicLayout`** | Marketing / docs. Slots for navbar + footer. Supports `LinkComponentProvider` to inject an i18n-aware `Link` (e.g. `next-intl`) so every anchor picks up the locale prefix. All three navbars accept `controls` + `i18n` to show theme / locale switchers next to UserMenu (same shape as `DefaultFooter.controls`). **[See PublicLayout README](./src/layouts/PublicLayout/README.md)** for full props, navbar variants (`FloatingNavbar` / `FlushNavbar` / `MinimalNavbar`), `DefaultFooter`, `NavAction`, `NavControls`, and hooks. |
 | **`PrivateLayout`** | App shell — sidebar + header. |
 | **`AuthLayout`** | Sign-in flows. |
 | **`AdminLayout`** | Admin console. |

package/package.json

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

package/src/layouts/AppLayout/AppLayout.tsx

@@ -48,7 +48,9 @@ import type {
   SWRConfigOptions,
   PwaInstallConfig,
   DebugConfig,
+  I18nLayoutConfig,
 } from '../types';
+export type { I18nLayoutConfig } from '../types';
 import type { AuthConfig } from '@djangocfg/api/auth';
 import type { MonitorConfig } from '@djangocfg/monitor';
 
@@ -152,16 +154,6 @@ function determineLayoutMode(
   return 'public';
 }
 
-/** i18n configuration for locale switching */
-export interface I18nLayoutConfig {
-  /** Current locale */
-  locale: string;
-  /** Available locales */
-  locales: string[];
-  /** Callback when locale changes */
-  onLocaleChange: (locale: string) => void;
-}
-
 /**
  * Props passed to every layout component (`public` / `private` / `admin`).
  * Use `publicChrome` to pass defaults for `FloatingNavbar` / `DefaultFooter` from `AppLayout`.

package/src/layouts/PrivateLayout/PrivateLayout.tsx

@@ -15,7 +15,8 @@ import { useAuth } from '@djangocfg/api/auth';
 import { Preloader } from '@djangocfg/ui-core/components';
 import { SidebarInset, SidebarProvider } from '@djangocfg/ui-nextjs/components';
 
-import type { AppLayoutPublicChrome, I18nLayoutConfig } from '../AppLayout/AppLayout';
+import type { AppLayoutPublicChrome } from '../AppLayout/AppLayout';
+import type { I18nLayoutConfig } from '../types';
 import { UserMenuConfig } from '../types';
 import { PrivateContent, PrivateSidebar } from './components';
 

package/src/layouts/PrivateLayout/components/PrivateSidebar.tsx

@@ -29,7 +29,7 @@ import { cn } from '@djangocfg/ui-core/lib';
 import { PrivateSidebarAccount } from '../../_components/PrivateSidebarAccount';
 import { LucideIcon } from '../../../components';
 
-import type { I18nLayoutConfig } from '../../AppLayout/AppLayout';
+import type { I18nLayoutConfig } from '../../types';
 import type { HeaderConfig, SidebarItem, SidebarConfig } from '../PrivateLayout';
 
 /** Few items → roomier rows; many items → tighter. Same breakpoints for demo, CarAPIS, etc. */

package/src/layouts/PublicLayout/README.md

@@ -76,6 +76,8 @@ Three variants. All share the same core props (below); only the chrome differs.
 | `transparentThreshold` | `number` | `40` | Px past which the nav becomes opaque. |
 | `desktopMaxPrimaryItems` | `number` | auto | Hard cap for primary items before overflow. |
 | `renderDesktopDropdown` | `(ctx) => ReactNode` | — | Replace default popover per-item. |
+| `controls` | `{ showThemeSwitcher?; showLocaleSwitcher? }` | — | Compact theme + locale pills next to UserMenu. See below. |
+| `i18n` | `{ locale, locales, onLocaleChange }` | — | Required for the locale switcher (same shape as `DefaultFooter.i18n`). |
 
 ### Variant-only
 
@@ -92,6 +94,48 @@ Three variants. All share the same core props (below); only the chrome differs.
 - `centered` — all three groups centered in one row.
 - `split` — brand left, actions right, **no desktop nav** (drawer only).
 
+## Theme + locale controls (navbar)
+
+All three navbars accept an optional `controls` block and `i18n` config that
+mirrors `DefaultFooter`. When enabled, a compact `NavControls` pill is rendered
+on desktop right before `UserMenu`, and an equivalent row appears in the mobile
+drawer footer.
+
+```tsx
+<FloatingNavbar
+  config={{
+    brand: <BrandLogo />,
+    navigation,
+    userMenu: { authPath: '/auth' },
+    controls: { showThemeSwitcher: true, showLocaleSwitcher: true },
+    i18n: { locale, locales, onLocaleChange: changeLocale },
+  }}
+/>
+```
+
+| Control | Required | Notes |
+|---|---|---|
+| `controls.showThemeSwitcher` | — | Light / system / dark pill (uses `useThemeContext`). |
+| `controls.showLocaleSwitcher` | `i18n` | Globe dropdown. Silently hidden when `i18n` is omitted. |
+
+Same shape works for `FlushNavbar` and `MinimalNavbar`. If you build a custom
+navbar with `NavbarShell`, the controls node is pre-built and delivered to
+`renderActions(ctx)` as `ctx.controls`.
+
+Need to render the pills somewhere custom (e.g. your own navbar)? Import
+`NavControls` directly:
+
+```tsx
+import { NavControls } from '@djangocfg/layouts';
+
+<NavControls
+  showThemeSwitcher
+  showLocaleSwitcher
+  i18n={{ locale, locales, onLocaleChange }}
+  size="compact" // 'compact' (navbar) | 'default' (footer)
+/>
+```
+
 ## `NavAction`
 
 Typed pill used by every navbar's `actions`.
@@ -155,7 +199,7 @@ Three variants: `full` (default) with brand column + menus + controls; `compact`
 
 ## Primitives
 
-`NavBrand`, `NavActions`, `NavActionItem`, `NavDesktopItems`, `ThemeBrandMark`, `ThemeBrandMarkImg`, `LinkComponentProvider`, `useLinkComponent`, `PublicLayoutProvider`, `usePublicLayout`.
+`NavBrand`, `NavActions`, `NavActionItem`, `NavControls`, `NavDesktopItems`, `ThemeBrandMark`, `ThemeBrandMarkImg`, `LinkComponentProvider`, `useLinkComponent`, `PublicLayoutProvider`, `usePublicLayout`.
 
 ## Context
 

package/src/layouts/PublicLayout/footers/DefaultFooter/types.ts

@@ -5,8 +5,7 @@
 import type { LucideIcon } from 'lucide-react';
 import type { ReactNode } from 'react';
 
-import type { I18nLayoutConfig } from '../../../AppLayout/AppLayout';
-import type { FooterLink, FooterMenuSection, FooterSocialLinks } from '../../../types';
+import type { FooterLink, FooterMenuSection, FooterSocialLinks, I18nLayoutConfig } from '../../../types';
 
 export type { FooterLink, FooterMenuSection, FooterSocialLinks };
 

package/src/layouts/PublicLayout/index.ts

@@ -33,6 +33,7 @@ export {
   NavBrand,
   NavActions,
   NavActionItem,
+  NavControls,
   NavDesktopItems,
   ThemeBrandMark,
   ThemeBrandMarkImg,
@@ -41,6 +42,7 @@ export {
 } from './primitives';
 export type {
   NavAction,
+  NavControlsProps,
   ThemeBrandMarkProps,
   ThemeBrandMarkImgProps,
   LinkComponent,

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

@@ -20,7 +20,7 @@ import type {
   PublicNavbarShellConfig,
   PublicNavLayout,
 } from '../../navbarTypes';
-import type { NavigationItem, UserMenuConfig } from '../../../types';
+import type { I18nLayoutConfig, NavigationItem, UserMenuConfig } from '../../../types';
 
 import { FloatingMobileDrawer } from './FloatingMobileDrawer';
 
@@ -51,6 +51,19 @@ export interface FloatingNavbarConfig {
   actionsLeadingSlot?: React.ReactNode;
   /** Arbitrary ReactNode after the mobile toggle. */
   actionsTrailingSlot?: React.ReactNode;
+  /**
+   * Optional theme + locale controls rendered next to UserMenu on desktop
+   * and as a footer row in the mobile drawer. Locale switcher requires
+   * `i18n`. Mirrors `DefaultFooter.controls`.
+   */
+  controls?: {
+    /** Light / system / dark pill. @default false */
+    showThemeSwitcher?: boolean;
+    /** Locale dropdown. Requires `i18n`. @default false */
+    showLocaleSwitcher?: boolean;
+  };
+  /** i18n config (current locale + locales + onLocaleChange). */
+  i18n?: I18nLayoutConfig;
 }
 
 export interface FloatingNavbarProps {
@@ -95,6 +108,8 @@ export function FloatingNavbar({ config }: FloatingNavbarProps) {
         actions={config.actions}
         actionsLeadingSlot={config.actionsLeadingSlot}
         actionsTrailingSlot={config.actionsTrailingSlot}
+        controls={config.controls}
+        i18n={config.i18n}
         outerClassName={outerClassName}
         shapeClassName={shapeClassName}
         shapeForState={({ scrolled, transparent }) =>
@@ -111,6 +126,8 @@ export function FloatingNavbar({ config }: FloatingNavbarProps) {
         userMenu={config.userMenu}
         containerClassName={containerClassName}
         rounding={rounding}
+        controls={config.controls}
+        i18n={config.i18n}
       />
     </>
   );

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

@@ -19,7 +19,7 @@ import type {
   PublicNavbarShellConfig,
   PublicNavLayout,
 } from '../../navbarTypes';
-import type { NavigationItem, UserMenuConfig } from '../../../types';
+import type { I18nLayoutConfig, NavigationItem, UserMenuConfig } from '../../../types';
 
 import { FlushMobileDrawer } from './FlushMobileDrawer';
 
@@ -50,6 +50,19 @@ export interface FlushNavbarConfig {
   actionsLeadingSlot?: React.ReactNode;
   /** Arbitrary ReactNode after the mobile toggle. */
   actionsTrailingSlot?: React.ReactNode;
+  /**
+   * Optional theme + locale controls rendered next to UserMenu on desktop
+   * and as a footer row in the mobile drawer. Locale switcher requires
+   * `i18n`. Mirrors `DefaultFooter.controls`.
+   */
+  controls?: {
+    /** Light / system / dark pill. @default false */
+    showThemeSwitcher?: boolean;
+    /** Locale dropdown. Requires `i18n`. @default false */
+    showLocaleSwitcher?: boolean;
+  };
+  /** i18n config (current locale + locales + onLocaleChange). */
+  i18n?: I18nLayoutConfig;
 }
 
 export interface FlushNavbarProps {
@@ -91,6 +104,8 @@ export function FlushNavbar({ config }: FlushNavbarProps) {
         actions={config.actions}
         actionsLeadingSlot={config.actionsLeadingSlot}
         actionsTrailingSlot={config.actionsTrailingSlot}
+        controls={config.controls}
+        i18n={config.i18n}
         outerClassName={outerClassName}
         shapeClassName={shapeClassName}
         shapeForState={({ scrolled, transparent }) =>
@@ -106,6 +121,8 @@ export function FlushNavbar({ config }: FlushNavbarProps) {
         navigation={navigation}
         userMenu={config.userMenu}
         containerClassName={containerClassName}
+        controls={config.controls}
+        i18n={config.i18n}
       />
     </>
   );

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

@@ -25,7 +25,7 @@ import type {
   PublicNavbarPosition,
   PublicNavLayout,
 } from '../../navbarTypes';
-import type { NavigationItem, UserMenuConfig } from '../../../types';
+import type { I18nLayoutConfig, NavigationItem, UserMenuConfig } from '../../../types';
 
 import { MinimalMobileDrawer } from './MinimalMobileDrawer';
 
@@ -67,6 +67,19 @@ export interface MinimalNavbarConfig {
    * @default 'mx-auto max-w-[1400px] px-4 sm:px-6 lg:px-10'
    */
   containerClassName?: string;
+  /**
+   * Optional theme + locale controls rendered next to UserMenu on desktop
+   * and as a footer row in the mobile drawer. Locale switcher requires
+   * `i18n`. Mirrors `DefaultFooter.controls`.
+   */
+  controls?: {
+    /** Light / system / dark pill. @default false */
+    showThemeSwitcher?: boolean;
+    /** Locale dropdown. Requires `i18n`. @default false */
+    showLocaleSwitcher?: boolean;
+  };
+  /** i18n config (current locale + locales + onLocaleChange). */
+  i18n?: I18nLayoutConfig;
 }
 
 export interface MinimalNavbarProps {
@@ -90,6 +103,10 @@ function MinimalActions({
         </div>
       )}
 
+      {ctx.controls && (
+        <div className="hidden lg:flex shrink-0 items-center">{ctx.controls}</div>
+      )}
+
       <div className="hidden lg:flex">
         <UserMenu
           variant="desktop"
@@ -146,6 +163,8 @@ export function MinimalNavbar({ config }: MinimalNavbarProps) {
         hideNavOnScroll={config.hideNavOnScroll}
         transparent={transparent}
         transparentThreshold={config.transparentThreshold}
+        controls={config.controls}
+        i18n={config.i18n}
         outerClassName={outerClassName}
         shapeClassName={shapeClassName}
         innerPadding={containerClassName}
@@ -163,6 +182,8 @@ export function MinimalNavbar({ config }: MinimalNavbarProps) {
         navigation={navigation}
         userMenu={config.userMenu}
         containerClassName={containerClassName}
+        controls={config.controls}
+        i18n={config.i18n}
       />
     </>
   );

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

@@ -23,6 +23,11 @@ interface NavActionsProps {
   leadingSlot?: ReactNode;
   /** Arbitrary slot rendered after the mobile toggle (desktop + mobile). */
   trailingSlot?: ReactNode;
+  /**
+   * Theme / locale controls rendered right before UserMenu (desktop only).
+   * Built by `NavbarShell` from `config.controls` + `config.i18n`.
+   */
+  controlsSlot?: ReactNode;
 }
 
 export function NavActions({
@@ -34,6 +39,7 @@ export function NavActions({
   actions,
   leadingSlot,
   trailingSlot,
+  controlsSlot,
 }: NavActionsProps) {
   const hasActions = actions && actions.length > 0;
 
@@ -49,6 +55,8 @@ export function NavActions({
 
       {leadingSlot && <div className="hidden lg:flex shrink-0 items-center">{leadingSlot}</div>}
 
+      {controlsSlot && <div className="hidden lg:flex shrink-0 items-center">{controlsSlot}</div>}
+
       <div className="hidden lg:flex">
         <UserMenu
           variant="desktop"

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

@@ -0,0 +1,114 @@
+'use client';
+
+import { Laptop, Moon, Sun } from 'lucide-react';
+import React, { useEffect, useState } from 'react';
+
+import { Button } from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
+import { useThemeContext } from '@djangocfg/ui-nextjs/theme';
+
+import type { I18nLayoutConfig } from '../../types';
+import { LocaleSwitcher } from '../../_components/LocaleSwitcher';
+
+export interface NavControlsProps {
+  /** Optional i18n config. Required to render the locale switcher. */
+  i18n?: I18nLayoutConfig;
+  /** Show the theme (light / system / dark) pill. @default false */
+  showThemeSwitcher?: boolean;
+  /** Show the locale dropdown. Requires `i18n`. @default false */
+  showLocaleSwitcher?: boolean;
+  /** Visual size. `compact` matches navbar row, `default` matches footer. @default 'compact' */
+  size?: 'compact' | 'default';
+  /** Extra classes for the outer container. */
+  className?: string;
+}
+
+function ThemeModeControl({ size }: { size: 'compact' | 'default' }) {
+  const { theme, setTheme } = useThemeContext();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const currentTheme = mounted ? (theme || 'system') : 'system';
+  const isActive = (value: 'system' | 'light' | 'dark') => currentTheme === value;
+
+  const btnSize = size === 'compact' ? 'h-7 w-7' : 'h-8 w-8';
+  const iconSize = size === 'compact' ? 'h-3.5 w-3.5' : 'h-4 w-4';
+  const baseItemClass = `${btnSize} rounded-full p-0 text-muted-foreground hover:text-foreground`;
+  const activeItemClass = 'bg-background/80 text-foreground shadow-sm';
+
+  return (
+    <div className="inline-flex items-center gap-0.5 rounded-full border border-border/60 bg-muted/30 p-0.5">
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        className={cn(baseItemClass, isActive('system') && activeItemClass)}
+        onClick={() => setTheme('system')}
+        aria-label="Use system theme"
+      >
+        <Laptop className={iconSize} />
+      </Button>
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        className={cn(baseItemClass, isActive('light') && activeItemClass)}
+        onClick={() => setTheme('light')}
+        aria-label="Use light theme"
+      >
+        <Sun className={iconSize} />
+      </Button>
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        className={cn(baseItemClass, isActive('dark') && activeItemClass)}
+        onClick={() => setTheme('dark')}
+        aria-label="Use dark theme"
+      >
+        <Moon className={iconSize} />
+      </Button>
+    </div>
+  );
+}
+
+/**
+ * Navbar-sized theme + locale controls. Mirrors `DefaultFooter` controls but
+ * tuned for a navbar row. Rendered by `NavActions` when `controls` are passed
+ * to a navbar config.
+ */
+export function NavControls({
+  i18n,
+  showThemeSwitcher = false,
+  showLocaleSwitcher = false,
+  size = 'compact',
+  className,
+}: NavControlsProps) {
+  const renderLocale = showLocaleSwitcher && Boolean(i18n);
+  if (!showThemeSwitcher && !renderLocale) return null;
+
+  const localeBtnClass =
+    size === 'compact'
+      ? 'h-8 rounded-full border-border/60 bg-muted/30 px-2.5 text-xs hover:bg-muted/40'
+      : 'h-9 rounded-full border-border/60 bg-muted/30 text-sm hover:bg-muted/40';
+
+  return (
+    <div className={cn('inline-flex items-center gap-1.5', className)}>
+      {showThemeSwitcher && <ThemeModeControl size={size} />}
+      {renderLocale && i18n && (
+        <LocaleSwitcher
+          locale={i18n.locale}
+          locales={i18n.locales}
+          onChange={i18n.onLocaleChange}
+          variant="outline"
+          size={size === 'compact' ? 'sm' : 'default'}
+          showTriggerLabel={false}
+          className={localeBtnClass}
+        />
+      )}
+    </div>
+  );
+}

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

@@ -66,9 +66,11 @@ export function NavDesktopItems({
     gap: 4,
   });
 
-  const effectiveCount = Math.min(visibleCount, maxVisible ?? visibleCount);
+  const effectiveCount = measured
+    ? Math.min(visibleCount, maxVisible ?? visibleCount)
+    : (maxVisible ?? items.length);
   const primaryItems = items.slice(0, effectiveCount);
-  const overflowItems = items.slice(effectiveCount);
+  const overflowItems = measured ? items.slice(effectiveCount) : [];
 
   const renderItem = (item: NavigationItem) => {
     if (item.items && item.items.length > 0) {
@@ -191,13 +193,8 @@ export function NavDesktopItems({
         ))}
       </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',
-        )}
-      >
+      {/* Live row — renders all items on SSR, overflow splits after measurement. */}
+      <div className="flex min-w-0 items-center gap-1">
         {primaryItems.map(renderItem)}
 
         {hasOverflow && (

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

@@ -2,6 +2,8 @@ export { NavBrand } from './NavBrand';
 export { NavActions } from './NavActions';
 export { NavActionItem } from './NavActionItem';
 export type { NavAction } from './NavActionItem';
+export { NavControls } from './NavControls';
+export type { NavControlsProps } from './NavControls';
 export { NavDesktopItems } from './NavDesktopItems';
 export { ThemeBrandMark, ThemeBrandMarkImg } from './ThemeBrandMark';
 export type { ThemeBrandMarkProps, ThemeBrandMarkImgProps } from './ThemeBrandMark';

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

@@ -13,6 +13,7 @@ import React, { useMemo } from 'react';
 import { useAuth } from '@djangocfg/api/auth';
 import { useAppT } from '@djangocfg/i18n';
 import { Button } from '@djangocfg/ui-core/components';
+import { useBodyScrollLock, useIsTabletOrBelow } from '@djangocfg/ui-core/hooks';
 import { cn } from '@djangocfg/ui-core/lib';
 
 import { usePathnameWithoutLocale } from '../../../hooks';
@@ -20,8 +21,9 @@ import { UserMenu } from '../../_components/UserMenu';
 import { usePublicLayoutOptional } from '../context';
 import { useMobileNavPanel } from '../hooks';
 import { useLinkComponent } from '../primitives/LinkComponentContext';
+import { NavControls } from '../primitives/NavControls';
 
-import type { NavigationItem, UserMenuConfig } from '../../types';
+import type { I18nLayoutConfig, NavigationItem, UserMenuConfig } from '../../types';
 
 export interface MobileDrawerShellProps {
   isOpen?: boolean;
@@ -32,6 +34,13 @@ export interface MobileDrawerShellProps {
   outerClassName?: string;
   /** Panel surface (bg, border, rounding, shadow). */
   panelClassName?: string;
+  /** Optional theme/locale controls shown as a row inside the drawer footer. */
+  controls?: {
+    showThemeSwitcher?: boolean;
+    showLocaleSwitcher?: boolean;
+  };
+  /** i18n config — required for the locale switcher row. */
+  i18n?: I18nLayoutConfig;
 }
 
 export function MobileDrawerShell(props: MobileDrawerShellProps) {
@@ -49,6 +58,8 @@ export function MobileDrawerShell(props: MobileDrawerShellProps) {
     isOpen: mobileMenuOpen,
     onClose: closeMobileMenu,
   });
+  const isTabletOrBelow = useIsTabletOrBelow();
+  useBodyScrollLock(mobileMenuOpen && isTabletOrBelow);
 
   const labels = useMemo(() => ({
     menu: t('layouts.navigation.menu'),
@@ -71,6 +82,10 @@ export function MobileDrawerShell(props: MobileDrawerShellProps) {
 
   const hasSessionUser = Boolean(isAuthenticated && user);
   const showSignInFooter = !hasSessionUser;
+  const showThemeSwitcher = props.controls?.showThemeSwitcher === true;
+  const showLocaleSwitcher =
+    props.controls?.showLocaleSwitcher === true && Boolean(props.i18n);
+  const showControlsRow = showThemeSwitcher || showLocaleSwitcher;
 
   return (
     <>
@@ -84,7 +99,9 @@ export function MobileDrawerShell(props: MobileDrawerShellProps) {
       )}
       <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',
+          // Horizontal padding mirrors the navbar outer wrapper so the drawer
+          // panel aligns edge-to-edge with the navbar shell.
+          'pointer-events-none fixed inset-x-0 z-1000 lg:hidden px-3 pb-3 sm:px-4 sm:pb-3 lg:px-6',
         )}
         style={{
           top: 'var(--public-navbar-mobile-drawer-top, 5rem)',
@@ -181,6 +198,17 @@ export function MobileDrawerShell(props: MobileDrawerShellProps) {
             </div>
           </div>
 
+          {showControlsRow && (
+            <div className="shrink-0 border-t border-border/50 px-4 py-3 flex items-center justify-center gap-2">
+              <NavControls
+                i18n={props.i18n}
+                showThemeSwitcher={showThemeSwitcher}
+                showLocaleSwitcher={showLocaleSwitcher}
+                size="default"
+              />
+            </div>
+          )}
+
           {showSignInFooter && (
             <div className="shrink-0 border-t border-border/50 p-4">
               <Link

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

@@ -46,8 +46,11 @@ import type { NavigationItem, UserMenuConfig } from '../../types';
 import { NavActions } from '../primitives/NavActions';
 import type { NavAction } from '../primitives/NavActionItem';
 import { NavBrand } from '../primitives/NavBrand';
+import { NavControls } from '../primitives/NavControls';
 import { NavDesktopItems } from '../primitives/NavDesktopItems';
 
+import type { I18nLayoutConfig } from '../../types';
+
 const heightCls: Record<PublicNavbarHeight, string> = {
   sm: 'py-2',
   md: 'py-3.5',
@@ -113,6 +116,17 @@ export interface NavbarShellProps {
   /** Arbitrary ReactNode after the mobile toggle. */
   actionsTrailingSlot?: ReactNode;
 
+  // ── Theme + locale controls (rendered next to UserMenu on desktop) ────────
+  /** i18n config — enables the locale switcher. Same type as `DefaultFooter`. */
+  i18n?: I18nLayoutConfig;
+  /** Toggle individual controls. Locale switcher also requires `i18n`. */
+  controls?: {
+    /** Light / system / dark pill. @default false */
+    showThemeSwitcher?: boolean;
+    /** Locale dropdown. Requires `i18n`. @default false */
+    showLocaleSwitcher?: boolean;
+  };
+
   // ── Props override (used by variants that proxy ctx differently) ──────────
   mobileMenuOpen?: boolean;
   onMobileMenuToggle?: () => void;
@@ -124,6 +138,11 @@ export interface NavbarActionsContext {
   toggleMobileMenu: () => void;
   toggleMobileLabel: string;
   navLayout: PublicNavLayout;
+  /**
+   * Pre-built theme/locale controls node. `null` when both toggles are off.
+   * Variants with a custom `renderActions` can choose where to place it.
+   */
+  controls: ReactNode | null;
 }
 
 export function NavbarShell(props: NavbarShellProps) {
@@ -200,7 +219,10 @@ export function NavbarShell(props: NavbarShellProps) {
 
   const outerCls = cn(
     outerClassName,
-    'inset-x-0 z-50',
+    'inset-x-0',
+    // Stay above the mobile drawer backdrop (z-[998]) and drawer (z-[1000])
+    // so the brand + close button remain visible and clickable.
+    mobileMenuOpen ? 'z-[1001]' : 'z-50',
     hideNavOnScroll && 'transition-transform duration-300 ease-in-out will-change-transform',
     hideNavOnScroll && hidden && !mobileMenuOpen && '-translate-y-full',
   );
@@ -224,6 +246,18 @@ export function NavbarShell(props: NavbarShellProps) {
     />
   ) : null;
 
+  const showThemeSwitcher = props.controls?.showThemeSwitcher === true;
+  const showLocaleSwitcher =
+    props.controls?.showLocaleSwitcher === true && Boolean(props.i18n);
+  const hasControls = showThemeSwitcher || showLocaleSwitcher;
+  const controlsNode = hasControls ? (
+    <NavControls
+      i18n={props.i18n}
+      showThemeSwitcher={showThemeSwitcher}
+      showLocaleSwitcher={showLocaleSwitcher}
+    />
+  ) : null;
+
   const actionsNode = props.renderActions ? (
     props.renderActions({
       userMenu,
@@ -231,6 +265,7 @@ export function NavbarShell(props: NavbarShellProps) {
       toggleMobileMenu,
       toggleMobileLabel,
       navLayout,
+      controls: controlsNode,
     })
   ) : (
     <NavActions
@@ -242,6 +277,7 @@ export function NavbarShell(props: NavbarShellProps) {
       actions={props.actions}
       leadingSlot={props.actionsLeadingSlot}
       trailingSlot={props.actionsTrailingSlot}
+      controlsSlot={controlsNode}
     />
   );
 
@@ -254,6 +290,7 @@ export function NavbarShell(props: NavbarShellProps) {
           <div className={cn('flex items-center gap-4', h)}>
             <div className="min-w-0 shrink-0 flex items-center">{brandNode}</div>
             <div className="hidden isolate lg:flex min-w-0 flex-1 items-center gap-1">{desktopNavNode}</div>
+            <div className="flex-1 lg:hidden" />
             <div className="flex shrink-0 items-center gap-4">{actionsNode}</div>
           </div>
         );
@@ -262,6 +299,7 @@ export function NavbarShell(props: NavbarShellProps) {
           <div className={cn('flex items-center gap-4', h)}>
             <div className="shrink-0">{brandNode}</div>
             <div className="hidden isolate lg:flex min-w-0 flex-1 items-center justify-center gap-1">{desktopNavNode}</div>
+            <div className="flex-1 lg:hidden" />
             <div className="flex shrink-0 items-center">{actionsNode}</div>
           </div>
         );
@@ -279,6 +317,7 @@ export function NavbarShell(props: NavbarShellProps) {
             <div className="hidden isolate lg:flex min-w-0 flex-1 items-center justify-center gap-1">
               {desktopNavNode}
             </div>
+            <div className="flex-1 lg:hidden" />
             <div className="flex shrink-0 items-center">{actionsNode}</div>
           </div>
         );

package/src/layouts/_components/PrivateSidebarAccount.tsx

@@ -27,7 +27,7 @@ import { ThemeToggle } from '@djangocfg/ui-nextjs/theme';
 import { useLogout } from '../../hooks';
 import { LocaleSwitcher } from './LocaleSwitcher';
 
-import type { I18nLayoutConfig } from '../AppLayout/AppLayout';
+import type { I18nLayoutConfig } from '../types';
 import type { HeaderConfig } from '../PrivateLayout/PrivateLayout';
 
 /** Radix portals (dropdown, select, popover) render outside the account node — ignore those clicks for “outside”. */

package/src/layouts/types/index.ts

@@ -52,4 +52,4 @@ export type {
 // Layout Types
 // ============================================================================
 
-export type { BaseLayoutProps, DebugConfig } from './layout.types';
+export type { BaseLayoutProps, DebugConfig, I18nLayoutConfig } from './layout.types';

package/src/layouts/types/layout.types.ts

@@ -70,3 +70,16 @@ export interface DebugConfig extends DebugButtonProps {
   enabled?: boolean;
 }
 
+/**
+ * i18n configuration consumed by layouts, navbars, footer controls, and the
+ * UserMenu locale row. Same shape as `@djangocfg/nextjs`'s `useLocaleSwitcher`.
+ */
+export interface I18nLayoutConfig {
+  /** Current locale (e.g. `"en"`, `"ru"`, `"pt-BR"`). */
+  locale: string;
+  /** Available locales. */
+  locales: string[];
+  /** Called when the user picks a new locale. */
+  onLocaleChange: (locale: string) => void;
+}
+