@djangocfg/layouts 2.1.357 → 2.1.359

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

@@ -15,6 +15,7 @@ import { cn } from '@djangocfg/ui-core/lib';
 import { LucideIcon } from '../../../components';
 import { usePrivateLayoutContext } from '../context';
 import { useShellVisualState } from '../hooks';
+import { SidebarBrandSwitcher } from './SidebarBrandSwitcher';
 
 function SidebarBrandRaw() {
   const { header, homeHref, brandTitle, brandMonogram, isMobile } =
@@ -41,8 +42,8 @@ function SidebarBrandRaw() {
   const headerRowClass = useMemo(
     () =>
       cn(
-        'flex items-center gap-2',
-        content.showLabels ? 'px-2' : 'px-1.5',
+        'flex items-center gap-2 mb-2',
+        // content.showLabels ? 'px-2' : 'px-1.5',
       ),
     [content.showLabels],
   );
@@ -86,14 +87,19 @@ function SidebarBrandRaw() {
 
   const collapsedHeader = useMemo(
     () => (
-      <div className="flex justify-center py-1">
-        <Link
-          href={homeHref}
-          className="flex h-7 w-7 items-center justify-center rounded-md bg-sidebar-primary outline-none ring-sidebar-ring focus-visible:ring-2"
-          aria-label={brandTitle}
-        >
-          {brandMark}
-        </Link>
+      <div className="group/collapsed-brand flex justify-center py-1">
+        <div className="relative h-7 w-7">
+          <Link
+            href={homeHref}
+            className="absolute inset-0 flex items-center justify-center rounded-md bg-sidebar-primary outline-none ring-sidebar-ring focus-visible:ring-2 transition-opacity group-hover/collapsed-brand:opacity-0"
+            aria-label={brandTitle}
+          >
+            {brandMark}
+          </Link>
+          <div className="absolute inset-0 flex items-center justify-center opacity-0 transition-opacity group-hover/collapsed-brand:opacity-100">
+            <SidebarTrigger aria-label="Expand sidebar" />
+          </div>
+        </div>
       </div>
     ),
     [homeHref, brandTitle, brandMark],
@@ -136,19 +142,32 @@ function SidebarBrandRaw() {
     [customBrand, homeHref, brandMark, brandTitle],
   );
 
-  const sidebarHeaderContent = isMobile
-    ? mobileHeader
-    : content.showLabels
-      ? expandedHeader
-      : collapsedHeader;
+  // Switcher mode: trigger embedded inside switcher row on desktop expanded
+  const switcherContent = header?.switcher
+    ? (
+      <div className="mb-2">
+        <SidebarBrandSwitcher
+          config={header.switcher}
+          showCollapseTrigger={content.showLabels && !isMobile}
+        />
+      </div>
+    )
+    : null;
+
+  const sidebarHeaderContent = switcherContent
+    ?? (isMobile
+      ? mobileHeader
+      : content.showLabels
+        ? expandedHeader
+        : collapsedHeader);
 
   const sidebarHeaderClass = useMemo(
     () =>
       cn(
         'pb-2',
         isMobile
-          ? 'px-4 pb-3 pt-[max(1.25rem,env(safe-area-inset-top,0px))]'
-          : 'px-2 pt-3.5',
+          ? 'pb-3 pt-[max(1.25rem,env(safe-area-inset-top,0px))]'
+          : 'pt-3.5',
       ),
     [isMobile],
   );

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

@@ -0,0 +1,223 @@
+/**
+ * Sidebar Brand Switcher
+ *
+ * Dropdown for switching workspaces / accounts / projects.
+ * Renders in the sidebar header area, replacing the static brand block.
+ *
+ * Collapsed rail: shows only the active item's avatar/monogram (no dropdown trigger).
+ * Hover-expanded / mobile: shows full trigger + dropdown.
+ */
+
+'use client';
+
+import React, { memo, useMemo } from 'react';
+import { Check, ChevronsUpDown, Plus } from 'lucide-react';
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  SidebarTrigger,
+} from '@djangocfg/ui-core/components';
+import { Link } from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { useShellVisualState } from '../hooks';
+import type { SidebarBrandSwitcherConfig, SidebarBrandSwitcherItem } from '../types';
+
+interface SidebarBrandSwitcherProps {
+  config: SidebarBrandSwitcherConfig;
+  /** Show the sidebar collapse toggle inside the switcher row (desktop expanded only). */
+  showCollapseTrigger?: boolean;
+}
+
+function SidebarBrandSwitcherRaw({ config, showCollapseTrigger }: SidebarBrandSwitcherProps) {
+  const { content } = useShellVisualState();
+  const [open, setOpen] = React.useState(false);
+
+  const activeItem = useMemo(
+    () => config.items.find((i) => i.active) ?? config.items[0] ?? null,
+    [config.items],
+  );
+
+  const onOpenChange = React.useCallback((next: boolean) => {
+    setOpen(next);
+  }, []);
+
+  if (!activeItem) return null;
+
+  const activeMonogram = (
+    activeItem.monogram?.charAt(0) ||
+    activeItem.label.charAt(0) ||
+    '?'
+  ).toUpperCase();
+
+  const activeAvatar = (
+    <Avatar className="h-7 w-7 shrink-0 rounded-md">
+      <AvatarImage src={activeItem.avatar} alt={activeItem.label} />
+      <AvatarFallback className="rounded-md bg-sidebar-primary text-[11px] font-bold text-sidebar-primary-foreground">
+        {activeMonogram}
+      </AvatarFallback>
+    </Avatar>
+  );
+
+  // Collapsed rail — avatar with trigger on hover
+  if (!content.showLabels) {
+    return (
+      <div className="group/collapsed-switcher flex justify-center py-1">
+        <div className="relative h-7 w-7">
+          {activeItem.href ? (
+            <Link
+              href={activeItem.href}
+              className="absolute inset-0 flex items-center justify-center rounded-md outline-none ring-sidebar-ring focus-visible:ring-2 transition-opacity group-hover/collapsed-switcher:opacity-0"
+              aria-label={activeItem.label}
+            >
+              {activeAvatar}
+            </Link>
+          ) : (
+            <div className="absolute inset-0 flex items-center justify-center transition-opacity group-hover/collapsed-switcher:opacity-0">
+              {activeAvatar}
+            </div>
+          )}
+          <div className="absolute inset-0 flex items-center justify-center opacity-0 transition-opacity group-hover/collapsed-switcher:opacity-100">
+            <SidebarTrigger aria-label="Expand sidebar" />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center gap-1">
+      <DropdownMenu open={open} onOpenChange={onOpenChange}>
+        <DropdownMenuTrigger asChild>
+          <button
+            type="button"
+            className={cn(
+              'group/switcher flex min-w-0 flex-1 items-center gap-2.5 rounded-lg px-2 py-2',
+              'text-left transition-colors',
+              'hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground',
+              'outline-none ring-sidebar-ring focus-visible:ring-2',
+            )}
+            data-no-expand
+          >
+            {activeAvatar}
+            <span className="flex min-w-0 flex-1 flex-col">
+              <span className="truncate text-sm font-semibold leading-tight text-sidebar-foreground">
+                {activeItem.label}
+              </span>
+              {activeItem.description ? (
+                <span className="truncate text-xs leading-snug text-sidebar-foreground/55">
+                  {activeItem.description}
+                </span>
+              ) : null}
+            </span>
+            <ChevronsUpDown
+              className="h-4 w-4 shrink-0 text-sidebar-foreground/40 transition-colors group-hover/switcher:text-sidebar-foreground/70"
+              aria-hidden
+            />
+          </button>
+        </DropdownMenuTrigger>
+
+        <DropdownMenuContent
+          side="bottom"
+          align="start"
+          sideOffset={4}
+          className="min-w-52 p-1.5"
+        >
+          {config.items.map((item) => (
+            <SwitcherItem key={item.label} item={item} onClose={() => onOpenChange(false)} />
+          ))}
+
+          {config.addLabel ? (
+            <>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                onSelect={() => {
+                  onOpenChange(false);
+                  config.onAdd?.();
+                }}
+                className="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-muted-foreground"
+              >
+                <Plus className="h-4 w-4 shrink-0" aria-hidden />
+                <span className="truncate">{config.addLabel}</span>
+              </DropdownMenuItem>
+            </>
+          ) : null}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      {showCollapseTrigger ? (
+        <SidebarTrigger className="shrink-0" aria-label="Collapse sidebar" data-no-expand />
+      ) : null}
+    </div>
+  );
+}
+
+interface SwitcherItemProps {
+  item: SidebarBrandSwitcherItem;
+  onClose: () => void;
+}
+
+function SwitcherItem({ item, onClose }: SwitcherItemProps) {
+  const monogram = (
+    item.monogram?.charAt(0) ||
+    item.label.charAt(0) ||
+    '?'
+  ).toUpperCase();
+
+  const handleSelect = React.useCallback(() => {
+    onClose();
+    item.onSelect?.();
+  }, [item, onClose]);
+
+  const inner = (
+    <>
+      <Avatar className="h-6 w-6 shrink-0 rounded-md">
+        <AvatarImage src={item.avatar} alt={item.label} />
+        <AvatarFallback className="rounded-md bg-sidebar-primary text-[10px] font-bold text-sidebar-primary-foreground">
+          {monogram}
+        </AvatarFallback>
+      </Avatar>
+      <span className="flex min-w-0 flex-1 flex-col">
+        <span className="truncate text-sm font-medium">{item.label}</span>
+        {item.description ? (
+          <span className="truncate text-xs text-muted-foreground">{item.description}</span>
+        ) : null}
+      </span>
+      {item.active ? (
+        <Check className="h-4 w-4 shrink-0 text-primary" aria-hidden />
+      ) : null}
+    </>
+  );
+
+  if (item.href && !item.onSelect) {
+    return (
+      <DropdownMenuItem asChild>
+        <Link
+          href={item.href}
+          onClick={onClose}
+          className="flex items-center gap-2 rounded-md px-2 py-1.5"
+        >
+          {inner}
+        </Link>
+      </DropdownMenuItem>
+    );
+  }
+
+  return (
+    <DropdownMenuItem
+      onSelect={handleSelect}
+      className="flex items-center gap-2 rounded-md px-2 py-1.5"
+    >
+      {inner}
+    </DropdownMenuItem>
+  );
+}
+
+export const SidebarBrandSwitcher = memo(SidebarBrandSwitcherRaw);

package/src/layouts/PrivateLayout/components/index.ts

@@ -5,6 +5,7 @@
 export { PrivateSidebar } from './PrivateSidebar';
 export { PrivateContent } from './PrivateContent';
 export { SidebarBrand } from './SidebarBrand';
+export { SidebarBrandSwitcher } from './SidebarBrandSwitcher';
 export { SidebarNavGroup } from './SidebarNavGroup';
 export { SidebarNavItem } from './SidebarNavItem';
 export { SidebarSlots } from './SidebarSlots';

package/src/layouts/PrivateLayout/context.tsx

@@ -41,8 +41,6 @@ export interface PrivateLayoutContextValue {
   isExpanded: boolean;
   /** Whether the sidebar is collapsed to icon rail */
   isCollapsed: boolean;
-  /** Whether the sidebar is temporarily hover-expanded overlay */
-  isHoverExpanded: boolean;
   /** Nav density based on total item count */
   density: NavDensity;
   /** Density tokens for the current state */
@@ -94,7 +92,6 @@ interface PrivateLayoutProviderProps {
   pathname: string;
   isMobile: boolean;
   state: 'expanded' | 'collapsed';
-  isHoverExpanded?: boolean;
 }
 
 // ============================================================================
@@ -108,7 +105,6 @@ export function PrivateLayoutProvider({
   pathname,
   isMobile,
   state,
-  isHoverExpanded = false,
 }: PrivateLayoutProviderProps) {
   const homeHref = sidebar?.homeHref || '/';
   const brandTitle = header?.title?.trim() || 'Dashboard';
@@ -127,8 +123,7 @@ export function PrivateLayoutProvider({
   const isExpanded = state === 'expanded';
   const isCollapsed = state === 'collapsed';
 
-  /** Expanded or hover-expanded: follow item-count tier; collapsed rail: fixed `default` sizing so icons stay uniform. */
-  const menuNav = isCollapsed && !isHoverExpanded ? RAIL_NAV : DENSITY[density];
+  const menuNav = isCollapsed ? RAIL_NAV : DENSITY[density];
 
   const isActive = React.useCallback(
     (href: string) => {
@@ -144,7 +139,7 @@ export function PrivateLayoutProvider({
     [pathname, allItems],
   );
 
-  const collapsedRail = !isMobile && isCollapsed && !isHoverExpanded;
+  const collapsedRail = !isMobile && isCollapsed;
 
   const hasMenuStart = sidebar?.menuStart != null && sidebar.menuStart !== false;
   const hasMenuEnd = sidebar?.menuEnd != null && sidebar.menuEnd !== false;
@@ -166,7 +161,6 @@ export function PrivateLayoutProvider({
       isMobile,
       isExpanded,
       isCollapsed,
-      isHoverExpanded,
       density,
       menuNav,
       activeIndicator,
@@ -187,7 +181,6 @@ export function PrivateLayoutProvider({
       isMobile,
       isExpanded,
       isCollapsed,
-      isHoverExpanded,
       density,
       menuNav,
       activeIndicator,

package/src/layouts/PrivateLayout/hooks/index.ts

@@ -4,10 +4,6 @@
 
 export { useAuthGuard } from './useAuthGuard';
 export { useLayoutVisual } from './useLayoutVisual';
-export {
-  useHoverExpand,
-  blockSidebarCollapse,
-  allowSidebarCollapse,
-} from './useHoverExpand';
 export { useShellVisualState } from './useShellVisualState';
 export { useSidebarKeyboard } from './useSidebarKeyboard';
+export { useSidebarDefaultOpen } from './useSidebarDefaultOpen';

package/src/layouts/PrivateLayout/hooks/useHoverExpand.ts

@@ -30,11 +30,13 @@ interface UseHoverExpandResult {
   onMouseEnter: () => void;
   /** Attach to the sidebar root element */
   onMouseLeave: () => void;
+  /** Programmatically set hover-expanded state (for click-to-expand) */
+  setHoverExpanded: (value: boolean) => void;
 }
 
 export function useHoverExpand({
-  enterDelay = 250,
-  leaveDelay = 150,
+  enterDelay = 2000,
+  leaveDelay = 450,
   enabled = true,
 }: UseHoverExpandOptions = {}): UseHoverExpandResult {
   const [isHoverExpanded, setIsHoverExpanded] = useState(false);
@@ -89,7 +91,12 @@ export function useHoverExpand({
     return () => clearTimers();
   }, [clearTimers]);
 
-  return { isHoverExpanded, onMouseEnter, onMouseLeave };
+  const setHoverExpanded = useCallback((value: boolean) => {
+    clearTimers();
+    setIsHoverExpanded(value);
+  }, [clearTimers]);
+
+  return { isHoverExpanded, onMouseEnter, onMouseLeave, setHoverExpanded };
 }
 
 /** Dispatch from any descendant to block sidebar collapse while e.g. a dropdown is open. */

package/src/layouts/PrivateLayout/hooks/useShellVisualState.ts

@@ -2,7 +2,7 @@
  * Shell Visual State Hook
  *
  * Centralizes ALL visual decisions for the sidebar + content pair:
- * - sidebar state: expanded | hover-overlay | collapsed-rail
+ * - sidebar state: expanded | collapsed-rail
  * - layout variant: boxed (inset) | full-bleed
  * - what to show/hide in each state
  * - CSS modifiers for sidebar root, inner shell, and content inset
@@ -28,9 +28,7 @@ export interface ShellVisualFlags {
   isExpanded: boolean;
   /** Collapsed to icon rail */
   isCollapsed: boolean;
-  /** Temporary hover-expand overlay on desktop rail */
-  isHoverOverlay: boolean;
-  /** True only in desktop collapsed rail without hover */
+  /** True only in desktop collapsed rail */
   isRail: boolean;
 }
 
@@ -58,12 +56,8 @@ export interface ShellContentFlags {
 // ============================================================================
 
 export interface ShellChromeFlags {
-  /** Sidebar casts a shadow (overlay mode) */
-  showShadow: boolean;
   /** Right border/separator on sidebar */
   showBorder: boolean;
-  /** Internal right padding inside sidebar (overlay breathing room) */
-  needsInternalPadding: boolean;
   /** Content inset should have margin to make room for sidebar */
   contentHasSidebarGap: boolean;
   /** Sidebar width is fixed to icon-rail */
@@ -101,107 +95,36 @@ export interface ShellVisualState {
 export function useShellVisualState(
   layoutVariant?: LayoutVisualConfig['variant'],
 ): ShellVisualState {
-  const { isMobile, isExpanded, isCollapsed, isHoverExpanded } =
-    usePrivateLayoutContext();
+  const { isMobile, isExpanded, isCollapsed } = usePrivateLayoutContext();
 
-  const isRail = !isMobile && isCollapsed && !isHoverExpanded;
-  const isHoverOverlay = !isMobile && isCollapsed && isHoverExpanded;
+  const isRail = !isMobile && isCollapsed;
   const variant = layoutVariant ?? 'boxed';
 
   return useMemo(() => {
-    // ------------------------------------------------------------------------
-    // Content visibility
-    // ------------------------------------------------------------------------
-    const showLabels = isExpanded || isHoverOverlay;
+    const showLabels = isExpanded || isMobile;
     const showGroupLabels = showLabels;
     const showBadgeText = showLabels;
     const showTooltips = isRail;
     const isAccountCompact = isRail;
     const hideSlots = isRail;
 
-    // ------------------------------------------------------------------------
-    // Chrome
-    // ------------------------------------------------------------------------
-    // Only hover-overlay is an overlay — it needs shadow + border + padding.
-    // Persistent expanded is part of the layout flow — no shadow.
-    const showShadow = isHoverOverlay;
-    const showBorder = isHoverOverlay;
-    const needsInternalPadding = isHoverOverlay;
-
-    // Content gap: only persistent expanded pushes the inset.
-    // Hover-overlay is temporary — content must NOT shift.
-    // Collapsed rail also leaves a gap (the rail itself is narrow but present).
     const contentHasSidebarGap = isExpanded || isRail;
     const isRailWidth = isRail;
+    const showBorder = false;
 
-    // ------------------------------------------------------------------------
-    // Modifiers
-    // ------------------------------------------------------------------------
     const sidebarRoot: string[] = [];
     const sidebarInner: string[] = [];
     const sidebarContent: string[] = [];
 
-    if (isHoverOverlay) {
-      sidebarRoot.push('z-50', '!w-[var(--sidebar-width)]');
-      // Allow scroll inside hover-expanded overlay — shadcn hardcodes
-      // overflow-hidden on div[data-sidebar=sidebar]; override it here.
-      sidebarInner.push('!overflow-auto');
-      // Extra right padding on content so text doesn't hug the right edge
-      sidebarContent.push('!overflow-auto', 'pr-4');
-
-      if (showShadow) {
-        sidebarInner.push(
-          'shadow-[4px_0_24px_-4px_rgba(0,0,0,0.08)]',
-          'dark:shadow-[4px_0_24px_-4px_rgba(0,0,0,0.25)]',
-        );
-      }
-      if (showBorder) {
-        sidebarInner.push('border-r', 'border-sidebar-border/30');
-      }
-      // Hide the shadcn gradient border line on hover overlay
-      sidebarInner.push('[&>div[aria-hidden]]:hidden');
-    }
-
-    // Boxed variant: inner sidebar gets rounded corners when persistent expanded
     if (variant === 'boxed' && isExpanded) {
       sidebarInner.push('rounded-sm');
     }
 
     return {
-      flags: {
-        isMobile,
-        isExpanded,
-        isCollapsed,
-        isHoverOverlay,
-        isRail,
-      },
-      content: {
-        showLabels,
-        showGroupLabels,
-        showBadgeText,
-        showTooltips,
-        isAccountCompact,
-        hideSlots,
-      },
-      chrome: {
-        showShadow,
-        showBorder,
-        needsInternalPadding,
-        contentHasSidebarGap,
-        isRailWidth,
-      },
-      modifiers: {
-        sidebarRoot,
-        sidebarInner,
-        sidebarContent,
-      },
+      flags: { isMobile, isExpanded, isCollapsed, isRail },
+      content: { showLabels, showGroupLabels, showBadgeText, showTooltips, isAccountCompact, hideSlots },
+      chrome: { showBorder, contentHasSidebarGap, isRailWidth },
+      modifiers: { sidebarRoot, sidebarInner, sidebarContent },
     };
-  }, [
-    isMobile,
-    isExpanded,
-    isCollapsed,
-    isHoverOverlay,
-    isRail,
-    variant,
-  ]);
+  }, [isMobile, isExpanded, isCollapsed, isRail, variant]);
 }

package/src/layouts/PrivateLayout/hooks/useSidebarDefaultOpen.ts

@@ -0,0 +1,32 @@
+/**
+ * Resolves the default sidebar open/closed state.
+ *
+ * Priority:
+ *   1. Cookie written by shadcn-sidebar (user's last explicit choice)
+ *   2. Viewport width — collapse by default on tablet and below (< 1024px lg)
+ *   3. Expanded (large desktop, no cookie)
+ *
+ * Must run on the client — returns `true` during SSR.
+ */
+
+const SIDEBAR_COOKIE_NAME = 'sidebar_state';
+const COLLAPSE_BELOW_PX = 1024; // Tailwind lg
+
+export function useSidebarDefaultOpen(): boolean {
+  if (typeof document === 'undefined') return true;
+
+  const match = document.cookie
+    .split('; ')
+    .find((row) => row.startsWith(`${SIDEBAR_COOKIE_NAME}=`));
+
+  if (match) {
+    return match.split('=')[1] === 'true';
+  }
+
+  // No cookie — first visit. Collapse on smaller screens.
+  if (typeof window !== 'undefined') {
+    return window.innerWidth >= COLLAPSE_BELOW_PX;
+  }
+
+  return true;
+}

package/src/layouts/PrivateLayout/index.ts

@@ -4,6 +4,7 @@
 
 export { PrivateLayout } from './PrivateLayout';
 export { PrivateLayoutProvider, usePrivateLayoutContext } from './context';
+export { SidebarBrandSwitcher } from './components';
 export type {
   PrivateLayoutProps,
   SidebarItem,
@@ -13,4 +14,6 @@ export type {
   SidebarActiveIndicator,
   SidebarGroupLabelStyle,
   SidebarFeaturedConfig,
+  SidebarBrandSwitcherConfig,
+  SidebarBrandSwitcherItem,
 } from './types';

package/src/layouts/PrivateLayout/types.ts

@@ -111,11 +111,46 @@ export interface SidebarConfig {
   density?: 'comfortable' | 'default' | 'compact';
 }
 
+// ============================================================================
+// Brand Switcher Types
+// ============================================================================
+
+export interface SidebarBrandSwitcherItem {
+  /** Display name */
+  label: string;
+  /** Avatar image URL or initials fallback */
+  avatar?: string;
+  /** Single letter shown when `avatar` is absent */
+  monogram?: string;
+  /** Navigation target on select */
+  href?: string;
+  /** Callback on select (alternative to href) */
+  onSelect?: () => void;
+  /** Mark as currently active */
+  active?: boolean;
+  /** Small secondary line under label (e.g. plan name, role) */
+  description?: string;
+}
+
+export interface SidebarBrandSwitcherConfig {
+  items: SidebarBrandSwitcherItem[];
+  /** Label for "add new" action at the bottom of the dropdown. Omit to hide. */
+  addLabel?: string;
+  /** Called when "add new" is clicked */
+  onAdd?: () => void;
+}
+
 // ============================================================================
 // Header Config
 // ============================================================================
 
 export interface HeaderConfig {
+  /**
+   * Brand switcher config. When provided, replaces the static brand header
+   * with a dropdown for switching workspaces/accounts/projects.
+   * Takes priority over `brand`, `title`, `brandIcon`, `brandLetter`.
+   */
+  switcher?: SidebarBrandSwitcherConfig;
   /** Custom header brand node (same idea as PublicNavbar `brand`). */
   brand?: ReactNode;
   /** Shown next to the logo when the sidebar is expanded */
@@ -132,6 +167,12 @@ export interface HeaderConfig {
   brandLetter?: string;
   /** User menu groups (account panel in the sidebar footer) */
   groups?: UserMenuConfig['groups'];
+  /**
+   * Behaviour of the footer account button.
+   * - `'menu'` (default) — opens a DropdownMenu with account links, locale/theme controls, and sign-out.
+   * - `'dialog'` — opens the global ProfileDialog (managed via Zustand store).
+   */
+  accountAction?: 'menu' | 'dialog';
   /** Auth page path (for sign in button) */
   authPath?: string;
   /** Subtitle under the display name in the sidebar footer (e.g. "Max plan"). */