@djangocfg/layouts 2.1.266 → 2.1.267

package/README.md

@@ -104,7 +104,7 @@ import { AppLayout } from '@djangocfg/layouts';
     public: { component: PublicLayout, enabledPath: ['/', '/legal', '/contact'] },
     private: { component: PrivateLayout, enabledPath: ['/dashboard'] },
     admin: { component: AdminLayout, enabledPath: '/admin' },
-    noLayoutPaths: ['/embed'],
+    noLayoutPaths: ['/embed', '/ui'],  // fullscreen, no navbar/footer
   }}
   baseApp={{ project: 'my-app', theme: { defaultTheme: 'system' }, auth: { apiUrl: '…' } }}
   i18n={{ locale, locales, onLocaleChange }}
@@ -113,21 +113,91 @@ import { AppLayout } from '@djangocfg/layouts';
 </AppLayout>
 ```
 
+> **`i18n` is required for correct path matching.**
+> `AppLayout` strips the locale prefix from the pathname before matching `enabledPath` / `noLayoutPaths`.
+> It uses `i18n.locale` for exact stripping — without it the fallback regex can misfire on
+> 2-letter path segments (e.g. `/ui/*` being treated as locale `ui`).
+> Always pass `i18n` when using next-intl or any locale-prefixed routing.
+
 ---
 
 ## Layouts (import from `@djangocfg/layouts`)
 
 | Component | Use |
 |-----------|-----|
-| **PublicLayout** | Marketing / docs — slots: **`navbar`**, **`footer`**, **`contentTopSpacing`**, **`contentBottomSpacing`** |
-| **PublicNavbar** / **PublicFooter** | **`PublicNavbarConfig`** / **`PublicFooterConfig`** — **`shell.rounding`**, **`navbarVariant`**, **`navbarPosition`**, etc. |
+| **PublicLayout** | Marketing / docs — slots: **`navbar`**, **`footer`**, **`backgroundSlot`**, **`contentTopSpacing`**, **`contentBottomSpacing`** |
+| **PublicNavbar** / **PublicFooter** | See `PublicNavbarConfig` below |
 | **PrivateLayout** | App shell — sidebar + header |
 | **AuthLayout** | Sign-in flows |
 | **AdminLayout** | Admin console |
 | **ProfileLayout** | Profile page with avatar, editable fields, 2FA, and slot/tab system |
 
+**`PublicLayout` — `backgroundSlot`**
+
+Pass any `ReactNode` as `backgroundSlot` to render a full-viewport layer *behind* the sticky navbar and all page content — without affecting layout flow.
+The recommended pattern is `fixed inset-0 -z-10 pointer-events-none`:
+
+```tsx
+<PublicLayout
+  contentTopSpacing="none"
+  contentBottomSpacing="none"
+  backgroundSlot={
+    <div
+      className="pointer-events-none fixed inset-0 -z-10"
+      style={{
+        background:
+          'radial-gradient(ellipse 55% 50% at 10% 0%, rgba(139,92,246,0.13) 0%, transparent 55%),' +
+          'radial-gradient(ellipse 40% 30% at 85% 75%, rgba(6,182,212,0.06) 0%, transparent 55%)',
+      }}
+    />
+  }
+  navbar={<PublicNavbar config={…} />}
+>
+  <HeroSection />
+</PublicLayout>
+```
+
+Because the element is `fixed`, it covers the full viewport including the sticky navbar area, and `backdrop-blur` on the navbar lets the gradient show through.
+
+---
+
 **Brand:** `ThemeBrandMark` / **`ThemeBrandMarkImg`** for logo slots.
 
+### PublicNavbar — layout variants & scroll behaviour
+
+```tsx
+<PublicNavbar config={{
+  brand: <Logo />,
+  navigation: navItems,
+  userMenu,
+
+  // Visual
+  navbarVariant: 'floating',   // 'floating' | 'flush'
+  navbarPosition: 'sticky',    // 'sticky' | 'fixed' | 'static'
+  navbarHeight: 'md',          // 'sm' | 'md' | 'lg'
+
+  // Desktop nav arrangement
+  navLayout: 'default',
+  // 'default'    → brand left | nav centered (absolute) | actions right
+  // 'brand-left' → brand left | nav after brand | actions pushed right
+  // 'centered'   → brand + nav + actions all centered in one row
+  // 'split'      → brand left | actions right | no desktop nav (drawer only)
+
+  // Scroll behaviour
+  hideNavOnScroll: true,       // slide up on scroll-down, back on scroll-up
+  transparent: true,           // transparent at page top, opaque after threshold
+  transparentThreshold: 40,    // px, default 40
+}} />
+```
+
+**Exported hooks** (for custom navbars):
+
+| Hook | Role |
+|------|------|
+| `useNavbarScroll(opts)` | Returns `{ hidden, scrolled }` driven by scroll position |
+| `useDropdownMenu()` | Hover open/close timers for desktop dropdowns |
+| `useNavbarViewportVars(ref, deps)` | Sets `--public-navbar-mobile-drawer-top/max-height` CSS vars |
+
 ### ProfileLayout — slots & tabs
 
 ```tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.266",
+  "version": "2.1.267",
   "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.266",
-    "@djangocfg/centrifugo": "^2.1.266",
-    "@djangocfg/i18n": "^2.1.266",
-    "@djangocfg/monitor": "^2.1.266",
-    "@djangocfg/debuger": "^2.1.266",
-    "@djangocfg/ui-core": "^2.1.266",
-    "@djangocfg/ui-nextjs": "^2.1.266",
-    "@djangocfg/ui-tools": "^2.1.266",
+    "@djangocfg/api": "^2.1.267",
+    "@djangocfg/centrifugo": "^2.1.267",
+    "@djangocfg/debuger": "^2.1.267",
+    "@djangocfg/i18n": "^2.1.267",
+    "@djangocfg/monitor": "^2.1.267",
+    "@djangocfg/ui-core": "^2.1.267",
+    "@djangocfg/ui-nextjs": "^2.1.267",
+    "@djangocfg/ui-tools": "^2.1.267",
     "@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.266",
-    "@djangocfg/i18n": "^2.1.266",
-    "@djangocfg/centrifugo": "^2.1.266",
-    "@djangocfg/monitor": "^2.1.266",
-    "@djangocfg/debuger": "^2.1.266",
-    "@djangocfg/typescript-config": "^2.1.266",
-    "@djangocfg/ui-core": "^2.1.266",
-    "@djangocfg/ui-nextjs": "^2.1.266",
-    "@djangocfg/ui-tools": "^2.1.266",
+    "@djangocfg/api": "^2.1.267",
+    "@djangocfg/centrifugo": "^2.1.267",
+    "@djangocfg/debuger": "^2.1.267",
+    "@djangocfg/i18n": "^2.1.267",
+    "@djangocfg/monitor": "^2.1.267",
+    "@djangocfg/typescript-config": "^2.1.267",
+    "@djangocfg/ui-core": "^2.1.267",
+    "@djangocfg/ui-nextjs": "^2.1.267",
+    "@djangocfg/ui-tools": "^2.1.267",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/hooks/index.ts

@@ -1,2 +1,2 @@
-export { usePathnameWithoutLocale, stripLocalePrefix } from './usePathnameWithoutLocale';
+export { usePathnameWithoutLocale } from './usePathnameWithoutLocale';
 export { useLogout } from './useLogout';

package/src/hooks/usePathnameWithoutLocale.ts

@@ -4,36 +4,52 @@ import { usePathname } from 'next/navigation';
 import { useMemo } from 'react';
 
 /**
- * Strip locale prefix from pathname
- * Handles: /xx/path, /xx-XX/path (e.g., /en, /ko, /pt-BR)
+ * Normalize pathname: remove trailing slash except for root "/".
+ * Works regardless of Next.js trailingSlash config.
  */
-function stripLocalePrefix(pathname: string): string {
-  // Match /xx or /xx-XX at the start
-  const match = pathname.match(/^\/[a-z]{2}(-[A-Z]{2})?(\/|$)/);
-
-  if (match) {
-    const rest = pathname.slice(match[0].length - 1) || '/';
-    return rest.startsWith('/') ? rest : '/' + rest;
-  }
+function normalize(p: string): string {
+  return p.length > 1 ? p.replace(/\/+$/, '') : p;
+}
 
+/**
+ * Strip locale prefix from pathname using known locale string.
+ */
+function stripLocale(pathname: string, locale: string): string {
+  const prefix = '/' + locale;
+  if (pathname === prefix || pathname === prefix + '/') return '/';
+  if (pathname.startsWith(prefix + '/')) return pathname.slice(prefix.length);
+  // Path already has no locale prefix (next-intl localePrefix:'as-needed' for default locale)
   return pathname;
 }
 
 /**
  * usePathnameWithoutLocale
  *
- * Returns pathname without locale prefix.
- * Useful for route matching when using next-intl or similar i18n routing.
+ * Returns the current pathname without locale prefix, normalized (no trailing slash).
+ *
+ * Pass `locale` (from i18n config / useLocaleSwitcher) for exact stripping.
+ * Without locale, falls back to regex — known to misfire on 2-letter path segments like /ui.
  *
  * @example
- * // URL: /ko/private/dashboard
- * const pathname = usePathnameWithoutLocale();
- * // pathname = '/private/dashboard'
+ * // URL: /en/ui/playground, locale="en"  →  "/ui/playground"
+ * // URL: /ui/playground/ (no prefix)     →  "/ui/playground"
  */
-export function usePathnameWithoutLocale(): string {
+export function usePathnameWithoutLocale(locale?: string): string {
   const pathname = usePathname();
 
-  return useMemo(() => stripLocalePrefix(pathname), [pathname]);
-}
+  return useMemo(() => {
+    if (locale) {
+      return normalize(stripLocale(pathname, locale));
+    }
 
-export { stripLocalePrefix };
+    // Fallback regex — only when locale is unknown
+    const match = pathname.match(/^\/[a-z]{2}(-[A-Z]{2})?(\/|$)/);
+    if (match) {
+      const rest = pathname.slice(match[0].length - 1) || '/';
+      const withSlash = rest.startsWith('/') ? rest : '/' + rest;
+      return normalize(withSlash);
+    }
+
+    return normalize(pathname);
+  }, [pathname, locale]);
+}

package/src/layouts/AppLayout/AppLayout.tsx

@@ -75,6 +75,14 @@ export interface AppLayoutPublicChrome {
     topSpacing?: PublicMainTopSpacing;
     bottomSpacing?: PublicMainBottomSpacing;
   };
+  /**
+   * Full-viewport background layer rendered behind the navbar and all page content.
+   * Pass a `fixed inset-0 -z-10 pointer-events-none` element — it covers the whole
+   * viewport (including the sticky navbar area) without affecting layout flow.
+   *
+   * Set per-page via `AppLayout publicChrome` or directly on `PublicSiteLayout`.
+   */
+  backgroundSlot?: ReactNode;
 }
 
 function mergePartialNavbar(
@@ -120,8 +128,10 @@ export function mergeAppLayoutPublicChrome(
     root?.main || fromLayouts?.main
       ? { ...root?.main, ...fromLayouts?.main }
       : undefined;
-  if (!navbar && !footer && !main) return undefined;
-  return { navbar, footer, ...(main ? { main } : {}) };
+  // backgroundSlot: layouts-level overrides root (more specific wins)
+  const backgroundSlot = fromLayouts?.backgroundSlot ?? root?.backgroundSlot;
+  if (!navbar && !footer && !main && !backgroundSlot) return undefined;
+  return { navbar, footer, ...(main ? { main } : {}), ...(backgroundSlot ? { backgroundSlot } : {}) };
 }
 
 /**
@@ -291,8 +301,9 @@ function AppLayoutContent({
   i18n,
   publicChrome,
 }: AppLayoutContentProps) {
-  // Use pathname without locale prefix for route matching
-  const pathname = usePathnameWithoutLocale();
+  // Use pathname without locale prefix for route matching.
+  // Pass locale from i18n so strip is exact — avoids regex misfiring on /ui, /ko, etc.
+  const pathname = usePathnameWithoutLocale(i18n?.locale);
 
   // Merge authPath into noLayoutPaths — auth pages are always fullscreen
   const effectiveNoLayoutPaths = useMemo(() => {

package/src/layouts/ProfileLayout/ProfileLayout.tsx

@@ -2,9 +2,10 @@
 
 import { LogOut, MoreHorizontal, Trash2 } from 'lucide-react';
 import moment from 'moment';
-import React, { useEffect } from 'react';
+import React, { useCallback, useEffect } from 'react';
 
-import { useAuth } from '@djangocfg/api/auth';
+import { useAuth, useDeleteAccount } from '@djangocfg/api/auth';
+import { useAppT } from '@djangocfg/i18n';
 import {
   Button,
   DropdownMenu,
@@ -21,7 +22,6 @@ import {
 
 import {
   AvatarSection,
-  DeleteAccountScreen,
   EditableField,
   Section,
   TwoFactorSection,
@@ -71,8 +71,25 @@ function ProfileHeader({ slots, enableDeleteAccount }: {
   slots?: ProfileSlots;
   enableDeleteAccount?: boolean;
 }) {
-  const { labels, onLogout, setStep } = useProfileContext();
-  const { user } = useAuth();
+  const { labels, onLogout } = useProfileContext();
+  const { user, logout } = useAuth();
+  const { deleteAccount } = useDeleteAccount();
+  const t = useAppT();
+
+  const handleDeleteAccount = useCallback(async () => {
+    const confirmationWord = t('layouts.profilePage.confirmationWord');
+    const value = await window.dialog.prompt({
+      title: t('layouts.profilePage.deleteAccountTitle'),
+      message: t('layouts.profilePage.deleteAccountDesc'),
+      placeholder: confirmationWord,
+      confirmText: t('layouts.profilePage.deleteAccount'),
+      cancelText: t('layouts.profilePage.cancel'),
+      variant: 'destructive',
+    });
+    if (value?.toUpperCase() !== confirmationWord.toUpperCase()) return;
+    const result = await deleteAccount();
+    if (result.success) logout();
+  }, [t, deleteAccount, logout]);
 
   if (!user) return null;
 
@@ -121,7 +138,7 @@ function ProfileHeader({ slots, enableDeleteAccount }: {
               <>
                 <DropdownMenuSeparator />
                 <DropdownMenuItem
-                  onClick={() => setStep('delete-account')}
+                  onClick={handleDeleteAccount}
                   className="gap-2 text-destructive focus:text-destructive"
                 >
                   <Trash2 className="w-4 h-4" />
@@ -260,14 +277,8 @@ function ProfileContent({
 // Router + Export
 // ─────────────────────────────────────────────────────────────────────────────
 
-function ProfileRouter(props: ProfileLayoutProps) {
-  const { step } = useProfileContext();
-  if (step === 'delete-account') return <DeleteAccountScreen />;
-  return <ProfileContent {...props} />;
-}
-
 export const ProfileLayout: React.FC<ProfileLayoutProps> = ({ title, ...props }) => (
   <ProfileProvider title={title}>
-    <ProfileRouter title={title} {...props} />
+    <ProfileContent title={title} {...props} />
   </ProfileProvider>
 );

package/src/layouts/ProfileLayout/components/DeleteAccountSection.tsx

@@ -1,128 +1,44 @@
 'use client';
 
-import { AlertTriangle, ChevronLeft, Loader2, Trash2 } from 'lucide-react';
-import React, { useMemo, useState } from 'react';
+import { Trash2 } from 'lucide-react';
+import React from 'react';
 
 import { useAuth, useDeleteAccount } from '@djangocfg/api/auth';
 import { useAppT } from '@djangocfg/i18n';
-import { Alert, AlertDescription, Button, Input } from '@djangocfg/ui-core/components';
 
-import { useProfileContext } from '../context';
 import { ActionButton } from './ActionButton';
 
-// ─── Entry point: single action row on main screen ───────────────────────────
-
 export const DeleteAccountSection: React.FC = () => {
-  const { setStep } = useProfileContext();
-  const t = useAppT();
-
-  return (
-    <ActionButton
-      icon={<Trash2 className="w-4 h-4 text-destructive" />}
-      label={<span className="text-destructive">{t('layouts.profilePage.deleteAccount')}</span>}
-      onClick={() => setStep('delete-account')}
-    />
-  );
-};
-
-// ─── Full delete screen ───────────────────────────────────────────────────────
-
-export const DeleteAccountScreen: React.FC = () => {
-  const { back } = useProfileContext();
   const { logout } = useAuth();
-  const [confirmationInput, setConfirmationInput] = useState('');
+  const { deleteAccount } = useDeleteAccount();
   const t = useAppT();
 
-  const { isLoading, error, deleteAccount, clearError } = useDeleteAccount();
-
   const confirmationWord = t('layouts.profilePage.confirmationWord');
-  const isValid = confirmationInput.toUpperCase() === confirmationWord.toUpperCase();
 
-  const labels = useMemo(() => ({
-    back: t('layouts.navigation.back'),
-    title: t('layouts.profilePage.deleteAccountTitle'),
-    desc: t('layouts.profilePage.deleteAccountDesc'),
-    typeToConfirm: t('layouts.profilePage.typeToConfirm').replace('{word}', confirmationWord),
-    deleting: t('layouts.profilePage.deleting'),
-    deleteAccount: t('layouts.profilePage.deleteAccount'),
-    cancel: t('layouts.profilePage.cancel'),
-  }), [t, confirmationWord]);
+  const handleClick = async () => {
+    const value = await window.dialog.prompt({
+      title: t('layouts.profilePage.deleteAccountTitle'),
+      message: t('layouts.profilePage.deleteAccountDesc'),
+      placeholder: confirmationWord,
+      confirmText: t('layouts.profilePage.deleteAccount'),
+      cancelText: t('layouts.profilePage.cancel'),
+      variant: 'destructive',
+    });
+
+    if (value?.toUpperCase() !== confirmationWord.toUpperCase()) return;
 
-  const handleDelete = async () => {
-    clearError();
     const result = await deleteAccount();
     if (result.success) logout();
   };
 
-  const handleBack = () => {
-    clearError();
-    setConfirmationInput('');
-    back();
-  };
-
   return (
-    <div className="container mx-auto px-4 py-12 max-w-md">
-      {/* Back */}
-      <button
-        type="button"
-        onClick={handleBack}
-        className="flex items-center gap-1 text-sm text-muted-foreground mb-8 hover:text-foreground transition-colors"
-      >
-        <ChevronLeft className="w-4 h-4" />
-        {labels.back}
-      </button>
-
-      {/* Header */}
-      <div className="flex items-center gap-3 mb-2">
-        <div className="w-10 h-10 rounded-full bg-destructive/10 flex items-center justify-center">
-          <AlertTriangle className="w-5 h-5 text-destructive" />
-        </div>
-        <h1 className="text-xl font-semibold">{labels.title}</h1>
-      </div>
-      <p className="text-sm text-muted-foreground mb-8">{labels.desc}</p>
-
-      {/* Confirmation */}
-      <div className="space-y-3">
-        {error && (
-          <Alert variant="destructive">
-            <AlertDescription>{error}</AlertDescription>
-          </Alert>
-        )}
-
-        <p className="text-sm text-muted-foreground">{labels.typeToConfirm}</p>
-
-        <Input
-          value={confirmationInput}
-          onChange={(e) => setConfirmationInput(e.target.value)}
-          placeholder={confirmationWord}
-          disabled={isLoading}
-          autoFocus
-          autoComplete="off"
-          className="font-mono"
-        />
-
-        <Button
-          variant="destructive"
-          className="w-full"
-          onClick={handleDelete}
-          disabled={isLoading || !isValid}
-        >
-          {isLoading ? (
-            <><Loader2 className="mr-2 h-4 w-4 animate-spin" />{labels.deleting}</>
-          ) : (
-            labels.deleteAccount
-          )}
-        </Button>
-
-        <Button
-          variant="ghost"
-          className="w-full"
-          onClick={handleBack}
-          disabled={isLoading}
-        >
-          {labels.cancel}
-        </Button>
-      </div>
-    </div>
+    <ActionButton
+      icon={<Trash2 className="w-4 h-4 text-destructive" />}
+      label={<span className="text-destructive">{t('layouts.profilePage.deleteAccount')}</span>}
+      onClick={handleClick}
+    />
   );
 };
+
+// Keep export so nothing breaks — no longer used but exported for backwards compat
+export const DeleteAccountScreen: React.FC = () => null;

package/src/layouts/ProfileLayout/context.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { createContext, useCallback, useContext, useMemo, useState } from 'react';
+import React, { createContext, useCallback, useContext, useMemo } from 'react';
 
 import { useAppT } from '@djangocfg/i18n';
 import { toast } from '@djangocfg/ui-core/hooks';
@@ -13,8 +13,6 @@ import { useLogout } from '../../hooks';
 // Types
 // ─────────────────────────────────────────────────────────────────────────────
 
-export type ProfileStep = 'main' | 'delete-account';
-
 export interface ProfileLabels {
   title: string;
   personalInfo: string;
@@ -43,9 +41,6 @@ export interface ProfileLabels {
 }
 
 interface ProfileContextValue {
-  step: ProfileStep;
-  setStep: (step: ProfileStep) => void;
-  back: () => void;
   labels: ProfileLabels;
   onLogout: () => void;
   onFieldSave: (field: string, value: string) => Promise<void>;
@@ -77,13 +72,10 @@ export const ProfileProvider: React.FC<ProfileProviderProps> = ({
   children,
   title,
 }) => {
-  const [step, setStep] = useState<ProfileStep>('main');
   const { updateProfile } = useAuth();
   const t = useAppT();
   const onLogout = useLogout();
 
-  const back = useCallback(() => setStep('main'), []);
-
   const labels = useMemo<ProfileLabels>(() => ({
     title: title || t('layouts.profilePage.title'),
     personalInfo: t('layouts.profilePage.personalInfo'),
@@ -124,7 +116,7 @@ export const ProfileProvider: React.FC<ProfileProviderProps> = ({
   }, [updateProfile, labels]);
 
   return (
-    <ProfileContext.Provider value={{ step, setStep, back, labels, onLogout, onFieldSave }}>
+    <ProfileContext.Provider value={{ labels, onLogout, onFieldSave }}>
       {children}
     </ProfileContext.Provider>
   );

package/src/layouts/PublicLayout/PublicLayout.tsx

@@ -53,6 +53,20 @@ export interface PublicLayoutProps {
    */
   navbar?: ReactNode;
   footer?: ReactNode;
+  /**
+   * Optional background layer rendered behind navbar and content.
+   * Use `position: fixed; inset: 0; pointer-events: none` (or similar) on the element
+   * so it fills the viewport without affecting layout flow.
+   *
+   * @example
+   * ```tsx
+   * backgroundSlot={
+   *   <div className="fixed inset-0 -z-10 pointer-events-none"
+   *        style={{ background: 'radial-gradient(ellipse 60% 50% at 10% 0%, violet, transparent)' }} />
+   * }
+   * ```
+   */
+  backgroundSlot?: ReactNode;
   /**
    * When `auto` (default), `<main>` gets a small top offset from `PublicNavigation` surface
    * (`floating` vs `flush`). Set `none` if the page controls spacing itself.
@@ -105,6 +119,7 @@ export function PublicLayout({
   children,
   navbar,
   footer,
+  backgroundSlot,
   contentTopSpacing = 'auto',
   contentBottomSpacing = 'auto',
 }: PublicLayoutProps) {
@@ -134,6 +149,9 @@ export function PublicLayout({
 
   return (
     <PublicLayoutProvider value={contextValue}>
+      {/* Background slot — renders behind everything, including the sticky navbar */}
+      {backgroundSlot ?? null}
+
       <div className="min-h-screen flex flex-col">
         {navbar ?? null}
 

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

@@ -0,0 +1,50 @@
+'use client';
+
+import { Menu, X } from 'lucide-react';
+import React from 'react';
+
+import { Button } from '@djangocfg/ui-core/components';
+
+import { UserMenu } from '../../_components/UserMenu';
+import type { UserMenuConfig } from '../../types';
+
+interface NavActionsProps {
+  userMenu?: UserMenuConfig;
+  mobileMenuOpen: boolean;
+  onMobileMenuToggle: () => void;
+  toggleMobileLabel: string;
+  /** When true, mobile trigger is always visible (not hidden on lg+). Used for `split` layout. */
+  forceShowMobileTrigger?: boolean;
+}
+
+export function NavActions({
+  userMenu,
+  mobileMenuOpen,
+  onMobileMenuToggle,
+  toggleMobileLabel,
+  forceShowMobileTrigger = false,
+}: NavActionsProps) {
+  return (
+    <div className="flex items-center gap-4">
+      <div className="hidden lg:flex">
+        <UserMenu
+          variant="desktop"
+          groups={userMenu?.groups}
+          authPath={userMenu?.authPath}
+          i18n={userMenu?.i18n}
+        />
+      </div>
+
+      <Button
+        variant="ghost"
+        size="icon"
+        aria-label={toggleMobileLabel}
+        data-mobile-menu-trigger="true"
+        className={forceShowMobileTrigger ? 'rounded-full' : 'lg:hidden rounded-full'}
+        onClick={onMobileMenuToggle}
+      >
+        {mobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+      </Button>
+    </div>
+  );
+}

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

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