@djangocfg/layouts 2.1.251 → 2.1.252

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.251",
+  "version": "2.1.252",
   "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.251",
-    "@djangocfg/centrifugo": "^2.1.251",
-    "@djangocfg/i18n": "^2.1.251",
-    "@djangocfg/monitor": "^2.1.251",
-    "@djangocfg/debuger": "^2.1.251",
-    "@djangocfg/ui-core": "^2.1.251",
-    "@djangocfg/ui-nextjs": "^2.1.251",
-    "@djangocfg/ui-tools": "^2.1.251",
+    "@djangocfg/api": "^2.1.252",
+    "@djangocfg/centrifugo": "^2.1.252",
+    "@djangocfg/i18n": "^2.1.252",
+    "@djangocfg/monitor": "^2.1.252",
+    "@djangocfg/debuger": "^2.1.252",
+    "@djangocfg/ui-core": "^2.1.252",
+    "@djangocfg/ui-nextjs": "^2.1.252",
+    "@djangocfg/ui-tools": "^2.1.252",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -109,15 +109,15 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.251",
-    "@djangocfg/i18n": "^2.1.251",
-    "@djangocfg/centrifugo": "^2.1.251",
-    "@djangocfg/monitor": "^2.1.251",
-    "@djangocfg/debuger": "^2.1.251",
-    "@djangocfg/typescript-config": "^2.1.251",
-    "@djangocfg/ui-core": "^2.1.251",
-    "@djangocfg/ui-nextjs": "^2.1.251",
-    "@djangocfg/ui-tools": "^2.1.251",
+    "@djangocfg/api": "^2.1.252",
+    "@djangocfg/i18n": "^2.1.252",
+    "@djangocfg/centrifugo": "^2.1.252",
+    "@djangocfg/monitor": "^2.1.252",
+    "@djangocfg/debuger": "^2.1.252",
+    "@djangocfg/typescript-config": "^2.1.252",
+    "@djangocfg/ui-core": "^2.1.252",
+    "@djangocfg/ui-nextjs": "^2.1.252",
+    "@djangocfg/ui-tools": "^2.1.252",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/layouts/PrivateLayout/PrivateLayout.tsx

@@ -1,47 +1,9 @@
 /**
  * Private Layout
  *
- * Layout for authenticated user pages (dashboard, profile, etc.)
- * Import and use directly with props - no complex configs needed!
- *
- * Features:
- * - Responsive sidebar with mobile burger menu
- * - Keyboard shortcut (Ctrl/Cmd + B) to toggle sidebar
- * - Header with sidebar trigger and user menu
- * - Configurable content padding
- * - NO SSR - renders only on client to avoid hydration mismatch
- *
- * @example
- * ```tsx
- * import { PrivateLayout } from '@djangocfg/layouts';
- *
- * <PrivateLayout
- *   sidebar={{
- *     items: [
- *       { label: 'Dashboard', href: '/dashboard', icon: 'LayoutDashboard' },
- *       { label: 'Profile', href: '/profile', icon: 'User' }
- *     ]
- *   }}
- *   header={{
- *     title: 'Dashboard',
- *     groups: [
- *       {
- *         title: 'Account',
- *         items: [
- *           { label: 'Profile', href: '/profile' },
- *           { label: 'Settings', href: '/settings' }
- *         ]
- *       }
- *     ],
- *     authPath: '/auth'
- *   }}
- * >
- *   {children}
- * </PrivateLayout>
- *
- * Note: User data (name, email, avatar) is automatically loaded from useAuth() context
- * Keyboard shortcut: Ctrl/Cmd + B to toggle sidebar
- * ```
+ * Authenticated shell: collapsible sidebar (icon rail vs expanded) + scrollable content.
+ * Toggle lives in the sidebar header on desktop; on narrow viewports a `SidebarTrigger` sits in `PrivateContent` (opens the mobile Sheet).
+ * Ctrl/Cmd + B still toggles the sidebar width.
  */
 
 'use client';
@@ -50,13 +12,12 @@ import React, { ReactNode, useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 
 import { useAuth } from '@djangocfg/api/auth';
-import {
-    Preloader
-} from '@djangocfg/ui-core/components';
+import { Preloader } from '@djangocfg/ui-core/components';
 import { SidebarInset, SidebarProvider } from '@djangocfg/ui-nextjs/components';
 
+import type { I18nLayoutConfig } from '../AppLayout/AppLayout';
 import { UserMenuConfig } from '../types';
-import { PrivateContent, PrivateHeader, PrivateSidebar } from './components';
+import { PrivateContent, PrivateSidebar } from './components';
 
 import type { LucideIcon as LucideIconType } from 'lucide-react';
 
@@ -86,21 +47,25 @@ export interface SidebarConfig {
 }
 
 export interface HeaderConfig {
+  /** Shown next to the logo when the sidebar is expanded */
   title?: string;
-  /** User menu groups */
+  /** User menu groups (account panel in the sidebar footer) */
   groups?: UserMenuConfig['groups'];
   /** Auth page path (for sign in button) */
   authPath?: string;
 }
 
-import type { I18nLayoutConfig } from '../AppLayout/AppLayout';
-
 export interface PrivateLayoutProps {
   children: ReactNode;
   /** Sidebar configuration */
   sidebar?: SidebarConfig;
-  /** Header configuration */
+  /** Title + account links (no top navbar — title is used in the sidebar chrome) */
   header?: HeaderConfig;
+  /**
+   * Path for active nav highlighting. With `@djangocfg/nextjs` i18n routing, pass `usePathname()` from
+   * `@djangocfg/nextjs/i18n/navigation` (no `/[locale]` segment). If omitted, uses `next/navigation` (includes locale).
+   */
+  pathname?: string;
   /** Content padding */
   contentPadding?: 'none' | 'default';
   /** i18n configuration for locale switching */
@@ -111,6 +76,7 @@ export function PrivateLayout({
   children,
   sidebar,
   header,
+  pathname,
   contentPadding = 'default',
   i18n,
 }: PrivateLayoutProps) {
@@ -120,23 +86,18 @@ export function PrivateLayout({
 
   useEffect(() => {
     if (!isLoading && !isAuthenticated && !isRedirecting) {
-      // Save current URL (including query params) before redirecting to auth
       const currentUrl = window.location.pathname + window.location.search;
       saveRedirectUrl(currentUrl);
-
-      // Set redirecting state to prevent flicker
       setIsRedirecting(true);
       router.push(header?.authPath || '/auth');
     }
   }, [isAuthenticated, isLoading, isRedirecting, router, saveRedirectUrl, header?.authPath]);
 
-  // Show loading state while auth is being checked or redirecting
-  // Note: SSR hydration is handled by ClientOnly wrapper in AppLayout
   if (isLoading || isRedirecting || !isAuthenticated) {
     return (
       <Preloader
         variant="fullscreen"
-        text={isRedirecting ? "Redirecting to login..." : "Authenticating..."}
+        text={isRedirecting ? 'Redirecting to login...' : 'Authenticating...'}
         size="lg"
         backdrop={true}
         backdropOpacity={80}
@@ -146,20 +107,15 @@ export function PrivateLayout({
 
   return (
     <SidebarProvider defaultOpen={true}>
-      {/* Sidebar */}
-      {sidebar && <PrivateSidebar sidebar={sidebar} />}
+      {sidebar && (
+        <PrivateSidebar sidebar={sidebar} header={header} i18n={i18n} pathname={pathname} />
+      )}
 
-      {/* Main content area */}
       <SidebarInset className="flex flex-col">
-        {/* Header with sidebar trigger */}
-        {(header || isAuthenticated) && (
-          <PrivateHeader header={header} i18n={i18n} />
-        )}
-
-        {/* Page content */}
-        <PrivateContent padding={contentPadding}>{children}</PrivateContent>
+        <PrivateContent padding={contentPadding} hasSidebar={Boolean(sidebar)}>
+          {children}
+        </PrivateContent>
       </SidebarInset>
     </SidebarProvider>
   );
 }
-

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

@@ -1,33 +1,50 @@
 /**
- * Private Layout Content
- *
- * Main content wrapper for PrivateLayout
+ * Private layout main column — optional mobile menu strip (`SidebarTrigger`) + scrollable area.
+ * On viewports below `md`, the desktop sidebar is off-canvas; the trigger opens the `Sheet` from ui-nextjs sidebar.
  */
 
 'use client';
 
 import React, { ReactNode } from 'react';
 
+import { SidebarTrigger } from '@djangocfg/ui-nextjs/components';
 import { cn } from '@djangocfg/ui-core/lib';
 
 interface PrivateContentProps {
   children: ReactNode;
   padding?: 'none' | 'default';
+  /** When false, no mobile hamburger (e.g. layout without a sidebar). Default true. */
+  hasSidebar?: boolean;
 }
 
 export function PrivateContent({
   children,
   padding = 'default',
+  hasSidebar = true,
 }: PrivateContentProps) {
   return (
-    <main
-      className={cn(
-        'flex-1 overflow-y-auto',
-        padding === 'default' && 'p-4 sm:p-6 lg:p-8'
+    <div className="flex min-h-0 min-w-0 flex-1 flex-col">
+      {hasSidebar && (
+        <div
+          className={cn(
+            'sticky top-0 z-40 flex shrink-0 items-center gap-2 border-b border-border/50 bg-background/95 py-2 pl-2 pr-3 backdrop-blur-md supports-[backdrop-filter]:bg-background/80',
+            'md:hidden',
+          )}
+        >
+          <SidebarTrigger
+            className="shrink-0"
+            aria-label="Open menu"
+          />
+        </div>
       )}
-    >
-      {children}
-    </main>
+      <div
+        className={cn(
+          'min-h-0 flex-1 overflow-y-auto',
+          padding === 'default' && 'p-4 sm:p-6 lg:p-8',
+        )}
+      >
+        {children}
+      </div>
+    </div>
   );
 }
-

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

@@ -1,155 +1,198 @@
 /**
- * Private Layout Sidebar
- *
- * Sidebar navigation component for PrivateLayout
+ * Private sidebar: header (brand only when expanded; icon mode shows expand trigger only),
+ * nav groups, account footer. Nav: muted inactive rows, pill active; density scales with item count.
  */
 
 'use client';
 
 import Link from 'next/link';
-import { usePathname } from 'next/navigation';
+import { usePathname as useNextPathname } from 'next/navigation';
 import React from 'react';
 
 import {
-    Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader,
-    SidebarMenu, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, useSidebar
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarTrigger,
+  useSidebar,
 } from '@djangocfg/ui-nextjs/components';
 import { cn } from '@djangocfg/ui-core/lib';
 
+import { PrivateSidebarAccount } from '../../_components/PrivateSidebarAccount';
 import { LucideIcon } from '../../../components';
 
-import type { SidebarItem, SidebarConfig } from '../PrivateLayout';
+import type { I18nLayoutConfig } from '../../AppLayout/AppLayout';
+import type { HeaderConfig, SidebarItem, SidebarConfig } from '../PrivateLayout';
+
+type NavDensity = 'comfortable' | 'default' | 'compact';
+
+function navDensityFromCount(n: number): NavDensity {
+  if (n <= 6) return 'comfortable';
+  if (n <= 14) return 'default';
+  return 'compact';
+}
+
+/**
+ * Nav rows: inactive muted. Light active = neutral pill (readable on white); dark = dark chip.
+ * Avoids `sidebar-accent` in light — project tokens often map to near-black and wash out labels.
+ */
+const navItemClass = cn(
+  'border-0 font-normal shadow-none transition-colors',
+  'text-muted-foreground',
+  'data-[active=true]:font-medium',
+  'data-[active=true]:bg-zinc-200/90 data-[active=true]:text-zinc-900',
+  'dark:data-[active=true]:bg-[#1a1a1a] dark:data-[active=true]:text-zinc-50',
+  'hover:bg-zinc-100/90 hover:text-foreground dark:hover:bg-white/[0.06]',
+  'data-[active=true]:hover:bg-zinc-200 dark:data-[active=true]:hover:bg-[#1a1a1a]',
+  '[&>svg]:shrink-0 [&>svg]:text-muted-foreground [&>svg]:opacity-85',
+  'data-[active=true]:[&>svg]:text-zinc-800 data-[active=true]:[&>svg]:opacity-100',
+  'dark:data-[active=true]:[&>svg]:text-zinc-50',
+);
+
+const DENSITY = {
+  comfortable: {
+    menu: 'gap-1.5',
+    group: 'gap-3',
+    label:
+      'h-7 uppercase text-[10px] font-light leading-none tracking-[0.14em] text-muted-foreground/40',
+    buttonSize: 'lg' as const,
+    iconClass: 'h-5 w-5',
+    extraButton: 'rounded-lg !px-3',
+  },
+  default: {
+    menu: 'gap-1',
+    group: 'gap-2',
+    label:
+      'uppercase text-[9px] font-light leading-none tracking-[0.12em] text-muted-foreground/50',
+    buttonSize: 'default' as const,
+    iconClass: 'h-4 w-4',
+    extraButton: 'rounded-lg',
+  },
+  compact: {
+    menu: 'gap-0.5',
+    group: 'gap-1',
+    label:
+      'h-6 uppercase text-[8px] font-light leading-none tracking-[0.1em] text-muted-foreground/40',
+    buttonSize: 'sm' as const,
+    iconClass: 'h-3.5 w-3.5',
+    extraButton: 'rounded-md !px-2',
+  },
+} as const;
 
 interface PrivateSidebarProps {
   sidebar: SidebarConfig;
+  header?: HeaderConfig;
+  i18n?: I18nLayoutConfig;
+  pathname?: string;
 }
 
-export function PrivateSidebar({ sidebar }: PrivateSidebarProps) {
-  const pathname = usePathname();
-  const { state, isMobile } = useSidebar();
+export function PrivateSidebar({ sidebar, header, i18n, pathname: pathnameProp }: PrivateSidebarProps) {
+  const pathnameFromNext = useNextPathname();
+  const pathname = pathnameProp ?? pathnameFromNext;
+  const { state, isMobile, setOpenMobile } = useSidebar();
   const homeHref = sidebar.homeHref || '/';
 
-  // Get all items for active detection
-  const allItems = React.useMemo(() => {
-    return sidebar.groups.flatMap((g) => g.items);
-  }, [sidebar.groups]);
+  React.useEffect(() => {
+    if (isMobile) setOpenMobile(false);
+  }, [pathname, isMobile, setOpenMobile]);
+  const brandTitle = header?.title?.trim() || 'Dashboard';
+
+  const allItems = React.useMemo(
+    () => sidebar.groups.flatMap((g) => g.items),
+    [sidebar.groups],
+  );
+
+  const density = React.useMemo(() => navDensityFromCount(allItems.length), [allItems.length]);
+  const d = DENSITY[density];
 
   const isActive = (href: string) => {
-    const matches = pathname === href || pathname.startsWith(href + '/');
+    const matches = pathname === href || pathname.startsWith(`${href}/`);
     if (!matches) return false;
-
-    // Check if there's a more specific (longer) path that also matches
     return !allItems.some(
-      (otherItem) =>
-        otherItem.href !== href &&
-        otherItem.href.startsWith(href + '/') &&
-        (pathname === otherItem.href ||
-          pathname.startsWith(otherItem.href + '/'))
-    );
-  };
-
-  // Render a single menu item
-  const renderMenuItem = (item: SidebarItem) => {
-    const active = isActive(item.href);
-
-    return (
-      <SidebarMenuItem key={item.href}>
-        <SidebarMenuButton
-          asChild
-          isActive={active}
-          tooltip={item.label}
-          size={isMobile ? 'lg' : 'default'}
-        >
-          <Link href={item.href}>
-            {item.icon && (
-              <LucideIcon
-                icon={typeof item.icon === 'string' ? item.icon : item.icon}
-                className={isMobile ? 'h-5 w-5' : 'h-4 w-4'}
-              />
-            )}
-            <span className={isMobile ? 'text-base' : ''}>{item.label}</span>
-            {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}
-          </Link>
-        </SidebarMenuButton>
-      </SidebarMenuItem>
+      (other) =>
+        other.href !== href &&
+        other.href.startsWith(`${href}/`) &&
+        (pathname === other.href || pathname.startsWith(`${other.href}/`)),
     );
   };
 
-  // Render groups
-  const renderContent = () => {
-    return sidebar.groups.map((group) => {
-      // Skip dynamic groups with no items
-      if (group.dynamic && group.items.length === 0) {
-        return null;
-      }
-
-      return (
-        <SidebarGroup key={group.label}>
-          <SidebarGroupLabel className="font-medium text-[10px]">{group.label}</SidebarGroupLabel>
-          <SidebarGroupContent>
-            <SidebarMenu>{group.items.map(renderMenuItem)}</SidebarMenu>
-          </SidebarGroupContent>
-        </SidebarGroup>
-      );
-    });
-  };
+  const expanded = state === 'expanded';
 
   return (
     <Sidebar collapsible="icon">
-      <SidebarHeader>
-        <div
-          className="flex items-center gap-3"
-          style={
-            state === 'collapsed'
-              ? {
-                  paddingLeft: '7px',
-                  paddingTop: '0.5rem',
-                  paddingBottom: '0.5rem',
-                  transition: 'padding 200ms ease-in-out',
-                }
-              : {
-                  padding: '0.5rem',
-                  transition: 'padding 200ms ease-in-out',
-                }
-          }
-        >
-          <Link href={homeHref}>
-            <div className="flex items-center gap-3">
-              <div
-                className={cn(
-                  'bg-primary rounded-sm flex items-center justify-center flex-shrink-0',
-                  isMobile ? 'h-10 w-10' : 'h-8 w-8'
-                )}
-              >
-                <span className="text-primary-foreground font-bold text-sm">
+      <SidebarHeader className="px-2 py-1.5">
+        {expanded ? (
+          <div className="flex items-center gap-2">
+            <Link
+              href={homeHref}
+              className="flex min-w-0 flex-1 items-center gap-2 rounded-md py-0.5 outline-none ring-sidebar-ring focus-visible:ring-2"
+            >
+              <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-primary">
+                <span className="text-[11px] font-bold leading-none tracking-tight text-primary-foreground">
                   D
                 </span>
               </div>
-              {state !== 'collapsed' && (
-                <span
-                  className={cn(
-                    'font-semibold text-foreground truncate',
-                    isMobile && 'text-base'
-                  )}
-                  style={{ whiteSpace: 'nowrap' }}
-                >
-                  Dashboard
-                </span>
-              )}
-            </div>
-          </Link>
-        </div>
+              <span className="truncate text-sm font-semibold tracking-tight text-foreground">
+                {brandTitle}
+              </span>
+            </Link>
+            <SidebarTrigger className="shrink-0" aria-label="Collapse sidebar" />
+          </div>
+        ) : (
+          <div className="flex justify-center py-0.5">
+            <SidebarTrigger aria-label="Expand sidebar" />
+          </div>
+        )}
       </SidebarHeader>
 
-      <SidebarContent>{renderContent()}</SidebarContent>
-
-      {/* Footer */}
-      {sidebar.footer && (
-        <SidebarFooter>
-          {sidebar.footer}
-        </SidebarFooter>
-      )}
+      <SidebarContent className={cn('gap-2', d.group)}>
+        {sidebar.groups.map((group) => {
+          if (group.dynamic && group.items.length === 0) return null;
+          return (
+            <SidebarGroup key={group.label} className="gap-0">
+              <SidebarGroupLabel className={cn('px-2', d.label)}>{group.label}</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu className={d.menu}>
+                  {group.items.map((item: SidebarItem) => (
+                    <SidebarMenuItem key={item.href}>
+                      <SidebarMenuButton
+                        asChild
+                        isActive={isActive(item.href)}
+                        size={d.buttonSize}
+                        className={cn(navItemClass, d.extraButton)}
+                      >
+                        <Link href={item.href}>
+                          {item.icon && (
+                            <LucideIcon
+                              icon={typeof item.icon === 'string' ? item.icon : item.icon}
+                              className={d.iconClass}
+                            />
+                          )}
+                          <span>{item.label}</span>
+                          {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}
+                        </Link>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          );
+        })}
+      </SidebarContent>
+
+      <SidebarFooter className="p-2">
+        {sidebar.footer && <div className="mb-2">{sidebar.footer}</div>}
+        <PrivateSidebarAccount header={header} i18n={i18n} />
+      </SidebarFooter>
     </Sidebar>
   );
 }
-

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

@@ -3,6 +3,4 @@
  */
 
 export { PrivateSidebar } from './PrivateSidebar';
-export { PrivateHeader } from './PrivateHeader';
 export { PrivateContent } from './PrivateContent';
-

package/src/layouts/_components/PrivateSidebarAccount.tsx

@@ -0,0 +1,168 @@
+/**
+ * Account block: collapsible trigger + expanded card (email, links, footer row:
+ * sign out on the left, locale + theme toggles on the right).
+ */
+
+'use client';
+
+import { ChevronDown, LogOut } from 'lucide-react';
+import Link from 'next/link';
+import React from 'react';
+
+import { useAuth } from '@djangocfg/api/auth';
+import { useAppT } from '@djangocfg/i18n';
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Button,
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
+import { useSidebar } from '@djangocfg/ui-nextjs/components';
+import { ThemeToggle } from '@djangocfg/ui-nextjs/theme';
+
+import { useLogout } from '../../hooks';
+import { LocaleSwitcher } from './LocaleSwitcher';
+
+import type { I18nLayoutConfig } from '../AppLayout/AppLayout';
+import type { HeaderConfig } from '../PrivateLayout/PrivateLayout';
+
+interface PrivateSidebarAccountProps {
+  header?: HeaderConfig;
+  i18n?: I18nLayoutConfig;
+}
+
+export function PrivateSidebarAccount({ header, i18n }: PrivateSidebarAccountProps) {
+  const { user } = useAuth();
+  const handleLogout = useLogout();
+  const t = useAppT();
+  const { state } = useSidebar();
+  const [open, setOpen] = React.useState(false);
+
+  const signOutLabel = t('layouts.profile.signOut');
+
+  const accountLinks = React.useMemo(() => {
+    if (!header?.groups?.length) return [];
+    return header.groups.flatMap((g) => g.items.filter((i) => i.href));
+  }, [header?.groups]);
+
+  if (!user) {
+    return null;
+  }
+
+  const displayName = user.display_username || user.email || 'User';
+  const userInitial = displayName.charAt(0).toUpperCase();
+  const userAvatar = user.avatar || '';
+  const narrow = state === 'collapsed';
+  const hasEmailOrLinks = Boolean(user.email) || accountLinks.length > 0;
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen} className="w-full min-w-0 border-t border-sidebar-border/45 pt-2">
+      <CollapsibleTrigger asChild>
+        <Button
+          type="button"
+          variant="ghost"
+          aria-expanded={open}
+          aria-label={narrow ? 'Account' : undefined}
+          className={cn(
+            'h-auto min-h-10 w-full gap-2 rounded-md px-2 py-2 text-left hover:bg-sidebar-accent',
+            narrow && 'justify-center px-0',
+          )}
+        >
+          <Avatar className="h-8 w-8 shrink-0">
+            <AvatarImage src={userAvatar} alt={displayName} />
+            <AvatarFallback className="text-xs">{userInitial}</AvatarFallback>
+          </Avatar>
+          {!narrow && (
+            <>
+              <span className="min-w-0 flex-1 truncate text-left text-sm font-medium leading-tight">
+                {displayName}
+              </span>
+              <ChevronDown
+                className={cn(
+                  'h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200',
+                  open && 'rotate-180',
+                )}
+                aria-hidden
+              />
+            </>
+          )}
+        </Button>
+      </CollapsibleTrigger>
+
+      <CollapsibleContent className="overflow-hidden data-[state=closed]:hidden">
+        <div
+          className={cn(
+            'mt-2 flex flex-col gap-3 rounded-lg border border-zinc-200/90 bg-zinc-50/80 p-3 shadow-sm',
+            'dark:border-sidebar-border dark:bg-sidebar-accent/15',
+          )}
+        >
+          {user.email && (
+            <p className="truncate text-xs leading-snug text-muted-foreground">{user.email}</p>
+          )}
+
+          {accountLinks.length > 0 && (
+            <nav className="flex max-h-40 flex-col gap-0.5 overflow-y-auto" aria-label="Account">
+              {accountLinks.map((item) => {
+                const Icon = item.icon;
+                return (
+                  <Link
+                    key={item.href}
+                    href={item.href!}
+                    className="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm leading-snug text-zinc-800 transition-colors hover:bg-zinc-200/70 dark:text-foreground dark:hover:bg-sidebar-accent"
+                  >
+                    {Icon && (
+                      <Icon className="h-4 w-4 shrink-0 text-zinc-500 dark:text-muted-foreground" />
+                    )}
+                    <span className="truncate">{item.label}</span>
+                  </Link>
+                );
+              })}
+            </nav>
+          )}
+
+          <div
+            className={cn(
+              'flex min-h-10 items-center gap-2',
+              hasEmailOrLinks && 'border-t border-border/50 pt-3 dark:border-sidebar-border/40',
+            )}
+          >
+            <button
+              type="button"
+              onClick={handleLogout}
+              className="flex min-w-0 flex-1 items-center gap-2 rounded-md px-2 py-2 text-left text-sm text-destructive hover:bg-destructive/10"
+            >
+              <LogOut className="h-4 w-4 shrink-0" />
+              <span className="truncate">{signOutLabel}</span>
+            </button>
+            <div
+              className="flex shrink-0 items-center gap-0.5 border-l border-border/50 pl-2 dark:border-sidebar-border/40"
+              role="group"
+              aria-label="Language and theme"
+            >
+              {i18n && (
+                <LocaleSwitcher
+                  locale={i18n.locale}
+                  locales={i18n.locales}
+                  onChange={i18n.onLocaleChange}
+                  variant="ghost"
+                  size="icon"
+                  showTriggerLabel={false}
+                  showIcon={false}
+                  className="h-8 w-8 shrink-0 text-base leading-none"
+                />
+              )}
+              <ThemeToggle
+                size="compact"
+                className="h-8 w-8 shrink-0 focus-visible:ring-1 focus-visible:ring-sidebar-ring focus-visible:ring-offset-0"
+              />
+            </div>
+          </div>
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}

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

@@ -1,72 +0,0 @@
-/**
- * Private Layout Header
- *
- * Header component for PrivateLayout with sidebar trigger
- */
-
-'use client';
-
-import React from 'react';
-
-import { useAuth } from '@djangocfg/api/auth';
-import { Separator } from '@djangocfg/ui-nextjs/components';
-import { SidebarTrigger } from '@djangocfg/ui-nextjs/components';
-import { ThemeToggle } from '@djangocfg/ui-nextjs/theme';
-
-import { LocaleSwitcher } from '../../_components/LocaleSwitcher';
-import { UserMenu } from '../../_components/UserMenu';
-
-import type { HeaderConfig } from '../PrivateLayout';
-import type { I18nLayoutConfig } from '../../AppLayout/AppLayout';
-
-interface PrivateHeaderProps {
-  header?: HeaderConfig;
-  /** i18n configuration for locale switching */
-  i18n?: I18nLayoutConfig;
-}
-
-export function PrivateHeader({ header, i18n }: PrivateHeaderProps) {
-  const { user: _user } = useAuth();
-
-  return (
-    <header
-      className="sticky top-0 z-10 flex items-center justify-between px-4 shrink-0 bg-background border-b border-border"
-      style={{ height: '64px', minHeight: '64px' }}
-    >
-      {/* Left side */}
-      <div className="flex items-center gap-4">
-        <SidebarTrigger className="-ml-1" />
-        <Separator orientation="vertical" className="mr-2 h-4" />
-
-        {header?.title && (
-          <h1 className="text-lg font-semibold text-foreground">
-            {header.title}
-          </h1>
-        )}
-      </div>
-
-      {/* Right side */}
-      <div className="flex items-center gap-3">
-        {/* Locale Switcher */}
-        {i18n && (
-          <LocaleSwitcher
-            locale={i18n.locale}
-            locales={i18n.locales}
-            onChange={i18n.onLocaleChange}
-          />
-        )}
-
-        {/* Theme Toggle */}
-        <ThemeToggle />
-
-        {/* User Menu */}
-        <UserMenu
-          variant="desktop"
-          groups={header?.groups}
-          authPath={header?.authPath}
-        />
-      </div>
-    </header>
-  );
-}
-