@djangocfg/layouts 2.1.251 → 2.1.254

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.251",
+  "version": "2.1.254",
   "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.254",
+    "@djangocfg/centrifugo": "^2.1.254",
+    "@djangocfg/i18n": "^2.1.254",
+    "@djangocfg/monitor": "^2.1.254",
+    "@djangocfg/debuger": "^2.1.254",
+    "@djangocfg/ui-core": "^2.1.254",
+    "@djangocfg/ui-nextjs": "^2.1.254",
+    "@djangocfg/ui-tools": "^2.1.254",
     "@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.254",
+    "@djangocfg/i18n": "^2.1.254",
+    "@djangocfg/centrifugo": "^2.1.254",
+    "@djangocfg/monitor": "^2.1.254",
+    "@djangocfg/debuger": "^2.1.254",
+    "@djangocfg/typescript-config": "^2.1.254",
+    "@djangocfg/ui-core": "^2.1.254",
+    "@djangocfg/ui-nextjs": "^2.1.254",
+    "@djangocfg/ui-tools": "^2.1.254",
     "@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';
 
@@ -65,6 +26,8 @@ export interface SidebarItem {
   href: string;
   icon?: string | LucideIconType;
   badge?: string | number;
+  /** Collapsed rail: shown in tooltip; defaults to `label`. */
+  tooltip?: string;
 }
 
 export interface SidebarGroupConfig {
@@ -81,26 +44,50 @@ export interface SidebarConfig {
   groups: SidebarGroupConfig[];
   /** Home link href */
   homeHref?: string;
+  /**
+   * Custom block inside the scrollable nav column, **above** all `groups`
+   * (below the brand header, same horizontal padding as nav).
+   */
+  menuStart?: ReactNode;
+  /**
+   * Custom block inside the scrollable nav column, **below** all `groups`
+   * (above `footer` + account block).
+   */
+  menuEnd?: ReactNode;
   /** Custom footer component rendered at the bottom of the sidebar */
   footer?: ReactNode;
 }
 
 export interface HeaderConfig {
+  /** Shown next to the logo when the sidebar is expanded */
   title?: string;
-  /** User menu groups */
+  /**
+   * Brand mark in the sidebar header (Lucide icon name or component).
+   * If omitted, a single-letter monogram from `brandLetter` / `title` is shown.
+   */
+  brandIcon?: string | LucideIconType;
+  /**
+   * Monogram when `brandIcon` is not set (one visible character).
+   * Defaults to the first letter of `title`, uppercased.
+   */
+  brandLetter?: string;
+  /** 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 +98,7 @@ export function PrivateLayout({
   children,
   sidebar,
   header,
+  pathname,
   contentPadding = 'default',
   i18n,
 }: PrivateLayoutProps) {
@@ -120,23 +108,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 +129,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,46 @@
 /**
- * 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) {
+  const mobileToolbarClass = 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',
+  );
+  const scrollAreaClass = cn(
+    'min-h-0 flex-1 overflow-y-auto',
+    padding === 'default' && 'p-4 sm:p-6 lg:p-8',
+  );
+
+  const mobileToolbar = hasSidebar ? (
+    <div className={mobileToolbarClass}>
+      <SidebarTrigger className="shrink-0" aria-label="Open menu" />
+    </div>
+  ) : null;
+
   return (
-    <main
-      className={cn(
-        'flex-1 overflow-y-auto',
-        padding === 'default' && 'p-4 sm:p-6 lg:p-8'
-      )}
-    >
-      {children}
-    </main>
+    <div className="flex min-h-0 min-w-0 flex-1 flex-col">
+      {mobileToolbar}
+      <div className={scrollAreaClass}>{children}</div>
+    </div>
   );
 }
-

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

@@ -1,155 +1,235 @@
 /**
- * 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 use semantic sidebar tokens so light/dark follows ui-core theme vars.
+ */
+const navItemClass = cn(
+  'border-0 font-normal shadow-none transition-colors',
+  'text-sidebar-foreground/70',
+  'data-[active=true]:font-medium data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+  'hover:bg-sidebar-accent/70 hover:text-sidebar-accent-foreground',
+  'data-[active=true]:hover:bg-sidebar-accent',
+  '[&>svg]:shrink-0 [&>svg]:text-sidebar-foreground/70 [&>svg]:opacity-85',
+  'data-[active=true]:[&>svg]:text-sidebar-accent-foreground data-[active=true]:[&>svg]:opacity-100',
+);
+
+const DENSITY = {
+  comfortable: {
+    menu: 'gap-1.5',
+    group: 'gap-2',
+    /** Tighter than default SidebarGroup `p-2` (doubles Y between groups). */
+    groupPad: 'px-2 py-1',
+    label:
+      'h-7 uppercase text-[10px] font-light leading-none tracking-[0.14em] text-sidebar-foreground/40',
+    buttonSize: 'lg' as const,
+    iconClass: 'h-5 w-5',
+    extraButton: 'rounded-lg !px-3',
+    /** Extra left inset so brand aligns with nav icons (group p-2 + button px). */
+    headerRowInset: 'pl-3',
+  },
+  default: {
+    menu: 'gap-1',
+    group: 'gap-1.5',
+    groupPad: 'px-2 py-1',
+    label:
+      'uppercase text-[9px] font-light leading-none tracking-[0.12em] text-sidebar-foreground/50',
+    buttonSize: 'default' as const,
+    iconClass: 'h-4 w-4',
+    extraButton: 'rounded-lg',
+    headerRowInset: 'pl-2',
+  },
+  compact: {
+    menu: 'gap-0.5',
+    group: 'gap-0.5',
+    groupPad: 'px-2 py-0.5',
+    label:
+      'h-6 uppercase text-[8px] font-light leading-none tracking-[0.1em] text-sidebar-foreground/40',
+    buttonSize: 'sm' as const,
+    iconClass: 'h-3.5 w-3.5',
+    extraButton: 'rounded-md !px-2',
+    headerRowInset: 'pl-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]);
-
-  const isActive = (href: string) => {
-    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>
-    );
-  };
-
-  // Render groups
-  const renderContent = () => {
+  React.useEffect(() => {
+    if (isMobile) setOpenMobile(false);
+  }, [pathname, isMobile, setOpenMobile]);
+  const brandTitle = header?.title?.trim() || 'Dashboard';
+  const brandMonogram = (header?.brandLetter?.trim().charAt(0) || brandTitle.charAt(0) || 'D').toUpperCase();
+
+  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 = React.useCallback(
+    (href: string) => {
+      const matches = pathname === href || pathname.startsWith(`${href}/`);
+      if (!matches) return false;
+      return !allItems.some(
+        (other) =>
+          other.href !== href &&
+          other.href.startsWith(`${href}/`) &&
+          (pathname === other.href || pathname.startsWith(`${other.href}/`)),
+      );
+    },
+    [pathname, allItems],
+  );
+
+  const expanded = state === 'expanded';
+
+  const headerRowClass = cn('flex items-center gap-2', d.headerRowInset);
+  const brandMark = header?.brandIcon ? (
+    <LucideIcon icon={header.brandIcon} className="h-4 w-4 text-sidebar-primary-foreground" />
+  ) : (
+    <span className="text-[11px] font-bold leading-none tracking-tight text-sidebar-primary-foreground">
+      {brandMonogram}
+    </span>
+  );
+
+  const showMenuStart = sidebar.menuStart != null && sidebar.menuStart !== false;
+  const showMenuEnd = sidebar.menuEnd != null && sidebar.menuEnd !== false;
+  const menuStartSlot = showMenuStart ? (
+    <div className="w-full min-w-0 shrink-0 px-2">{sidebar.menuStart}</div>
+  ) : null;
+  const menuEndSlot = showMenuEnd ? (
+    <div className="w-full min-w-0 shrink-0 px-2">{sidebar.menuEnd}</div>
+  ) : null;
+
+  const sidebarContentClass = cn('gap-2', d.group);
+
+  const renderedGroups = React.useMemo(() => {
+    const navButtonClass = cn(navItemClass, d.extraButton);
+    const groupLabelClass = cn('px-2', d.label);
+    const sidebarGroupClass = cn('gap-0', d.groupPad);
+
     return sidebar.groups.map((group) => {
-      // Skip dynamic groups with no items
-      if (group.dynamic && group.items.length === 0) {
-        return null;
-      }
+      if (group.dynamic && group.items.length === 0) return null;
+      const items = group.items.map((item: SidebarItem) => {
+        const iconProp = typeof item.icon === 'string' ? item.icon : item.icon;
+        const tooltipText = item.tooltip ?? item.label;
+        return (
+          <SidebarMenuItem key={item.href}>
+            <SidebarMenuButton
+              asChild
+              isActive={isActive(item.href)}
+              size={d.buttonSize}
+              tooltip={tooltipText}
+              className={navButtonClass}
+            >
+              <Link href={item.href}>
+                {item.icon ? <LucideIcon icon={iconProp} className={d.iconClass} /> : null}
+                <span>{item.label}</span>
+                {item.badge ? <SidebarMenuBadge>{item.badge}</SidebarMenuBadge> : null}
+              </Link>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        );
+      });
 
       return (
-        <SidebarGroup key={group.label}>
-          <SidebarGroupLabel className="font-medium text-[10px]">{group.label}</SidebarGroupLabel>
+        <SidebarGroup key={group.label} className={sidebarGroupClass}>
+          <SidebarGroupLabel className={groupLabelClass}>{group.label}</SidebarGroupLabel>
           <SidebarGroupContent>
-            <SidebarMenu>{group.items.map(renderMenuItem)}</SidebarMenu>
+            <SidebarMenu className={d.menu}>{items}</SidebarMenu>
           </SidebarGroupContent>
         </SidebarGroup>
       );
     });
-  };
+  }, [sidebar.groups, isActive, d]);
+
+  const expandedHeader = (
+    <div className={headerRowClass}>
+      <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-sidebar-primary">{brandMark}</div>
+        <span className="truncate text-sm font-semibold tracking-tight text-sidebar-foreground">{brandTitle}</span>
+      </Link>
+      <SidebarTrigger className="shrink-0" aria-label="Collapse sidebar" />
+    </div>
+  );
+
+  const collapsedHeader = (
+    <div className="flex justify-center py-1">
+      <SidebarTrigger aria-label="Expand sidebar" />
+    </div>
+  );
+
+  const sidebarHeaderContent = expanded ? expandedHeader : collapsedHeader;
+  const footerExtra = sidebar.footer ? <div className="mb-2">{sidebar.footer}</div> : null;
 
   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">
-                  D
-                </span>
-              </div>
-              {state !== 'collapsed' && (
-                <span
-                  className={cn(
-                    'font-semibold text-foreground truncate',
-                    isMobile && 'text-base'
-                  )}
-                  style={{ whiteSpace: 'nowrap' }}
-                >
-                  Dashboard
-                </span>
-              )}
-            </div>
-          </Link>
-        </div>
-      </SidebarHeader>
-
-      <SidebarContent>{renderContent()}</SidebarContent>
-
-      {/* Footer */}
-      {sidebar.footer && (
-        <SidebarFooter>
-          {sidebar.footer}
-        </SidebarFooter>
-      )}
+      <SidebarHeader className="px-2 pt-2.5 pb-2">{sidebarHeaderContent}</SidebarHeader>
+
+      <SidebarContent className={sidebarContentClass}>
+        {menuStartSlot}
+        {renderedGroups}
+        {menuEndSlot}
+      </SidebarContent>
+
+      <SidebarFooter className="p-2">
+        {footerExtra}
+        <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,204 @@
+/**
+ * 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, setOpen: setSidebarOpen } = useSidebar();
+  const [accountOpen, setAccountOpen] = React.useState(false);
+  const accountRootRef = React.useRef<HTMLDivElement>(null);
+  const narrow = state === 'collapsed';
+
+  React.useEffect(() => {
+    if (state === 'collapsed') setAccountOpen(false);
+  }, [state]);
+
+  React.useEffect(() => {
+    if (!accountOpen) return;
+
+    const handlePointerDown = (event: PointerEvent) => {
+      const root = accountRootRef.current;
+      if (root && !root.contains(event.target as Node)) {
+        setAccountOpen(false);
+      }
+    };
+
+    document.addEventListener('pointerdown', handlePointerDown);
+    return () => document.removeEventListener('pointerdown', handlePointerDown);
+  }, [accountOpen]);
+
+  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 hasEmailOrLinks = Boolean(user.email) || accountLinks.length > 0;
+
+  const triggerClassName = 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',
+  );
+  const chevronClassName = cn(
+    'h-4 w-4 shrink-0 text-sidebar-foreground/65 transition-transform duration-200',
+    accountOpen && 'rotate-180',
+  );
+  const accountPanelClassName = cn(
+    'mt-2 flex flex-col gap-3 rounded-lg border border-sidebar-border/60 bg-sidebar-accent/45 p-3 shadow-sm',
+    'dark:border-sidebar-border dark:bg-sidebar-accent/20',
+  );
+  const accountActionsClassName = cn(
+    'flex min-h-10 items-center gap-2',
+    hasEmailOrLinks && 'border-t border-sidebar-border/50 pt-3',
+  );
+
+  const onAccountTriggerClick = React.useCallback(() => {
+    if (narrow) setSidebarOpen(true);
+  }, [narrow, setSidebarOpen]);
+
+  const accountLinkRows = React.useMemo(
+    () =>
+      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-sidebar-foreground transition-colors hover:bg-sidebar-accent"
+          >
+            {Icon ? <Icon className="h-4 w-4 shrink-0 text-sidebar-foreground/65" /> : null}
+            <span className="truncate">{item.label}</span>
+          </Link>
+        );
+      }),
+    [accountLinks],
+  );
+
+  const emailBlock = user.email ? (
+    <p className="truncate text-xs leading-snug text-sidebar-foreground/65">{user.email}</p>
+  ) : null;
+
+  const accountLinksNav =
+    accountLinks.length > 0 ? (
+      <nav className="flex max-h-40 flex-col gap-0.5 overflow-y-auto" aria-label="Account">
+        {accountLinkRows}
+      </nav>
+    ) : null;
+
+  const expandedTriggerMeta = narrow ? null : (
+    <>
+      <span className="min-w-0 flex-1 truncate text-left text-sm font-medium leading-tight text-sidebar-foreground">
+        {displayName}
+      </span>
+      <ChevronDown className={chevronClassName} aria-hidden />
+    </>
+  );
+
+  const localeThemeGroup = 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"
+    />
+  ) : null;
+
+  return (
+    <div ref={accountRootRef} className="w-full min-w-0 border-t border-sidebar-border/45 pt-2">
+      <Collapsible open={accountOpen} onOpenChange={setAccountOpen} className="w-full min-w-0">
+        <CollapsibleTrigger asChild>
+          <Button
+            type="button"
+            variant="ghost"
+            aria-expanded={accountOpen}
+            aria-label={narrow ? 'Account' : undefined}
+            className={triggerClassName}
+            onClick={onAccountTriggerClick}
+          >
+            <Avatar className="h-8 w-8 shrink-0">
+              <AvatarImage src={userAvatar} alt={displayName} />
+              <AvatarFallback className="text-xs">{userInitial}</AvatarFallback>
+            </Avatar>
+            {expandedTriggerMeta}
+          </Button>
+        </CollapsibleTrigger>
+
+        <CollapsibleContent className="overflow-hidden data-[state=closed]:hidden">
+          <div className={accountPanelClassName}>
+            {emailBlock}
+            {accountLinksNav}
+
+            <div className={accountActionsClassName}>
+              <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-sidebar-border/50 pl-2"
+                role="group"
+                aria-label="Language and theme"
+              >
+                {localeThemeGroup}
+                <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>
+    </div>
+  );
+}

package/src/utils/index.ts

@@ -5,4 +5,5 @@
 export * from './config';
 export * from './logger';
 export * from './pathMatcher';
+export * from './sidebarNav';
 

package/src/utils/sidebarNav.ts

@@ -0,0 +1,16 @@
+import type { LucideIcon as LucideIconType } from 'lucide-react';
+
+/**
+ * Maps menu/route `icon` values into `SidebarItem['icon']`.
+ * Supports Lucide icon **name** (`"LayoutDashboard"`), a **Lucide component**, or legacy `{ name: string }`.
+ */
+export function normalizeSidebarNavIcon(icon: unknown): string | LucideIconType | undefined {
+  if (icon == null) return undefined;
+  if (typeof icon === 'string') return icon;
+  if (typeof icon === 'function') return icon as LucideIconType;
+  if (typeof icon === 'object' && icon !== null && 'name' in icon) {
+    const n = (icon as { name?: unknown }).name;
+    if (typeof n === 'string' && n.length > 0) return n;
+  }
+  return undefined;
+}

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>
-  );
-}
-