@djangocfg/layouts 2.1.254 → 2.1.255

package/package.json

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

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

@@ -1,6 +1,6 @@
 /**
  * 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.
+ * nav groups, account footer. Item-count density when **expanded**; collapsed rail always uses `default` metrics so icons match.
  */
 
 'use client';
@@ -32,11 +32,15 @@ import { LucideIcon } from '../../../components';
 import type { I18nLayoutConfig } from '../../AppLayout/AppLayout';
 import type { HeaderConfig, SidebarItem, SidebarConfig } from '../PrivateLayout';
 
+/** Few items → roomier rows; many items → tighter. Same breakpoints for demo, CarAPIS, etc. */
+const DENSITY_COMFORTABLE_MAX = 6;
+const DENSITY_DEFAULT_MAX = 14;
+
 type NavDensity = 'comfortable' | 'default' | 'compact';
 
 function navDensityFromCount(n: number): NavDensity {
-  if (n <= 6) return 'comfortable';
-  if (n <= 14) return 'default';
+  if (n <= DENSITY_COMFORTABLE_MAX) return 'comfortable';
+  if (n <= DENSITY_DEFAULT_MAX) return 'default';
   return 'compact';
 }
 
@@ -57,15 +61,13 @@ 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',
+    headerRowInset: 'pl-2',
   },
   default: {
     menu: 'gap-1',
@@ -76,7 +78,7 @@ const DENSITY = {
     buttonSize: 'default' as const,
     iconClass: 'h-4 w-4',
     extraButton: 'rounded-lg',
-    headerRowInset: 'pl-2',
+    headerRowInset: 'pl-1.5',
   },
   compact: {
     menu: 'gap-0.5',
@@ -87,10 +89,13 @@ const DENSITY = {
     buttonSize: 'sm' as const,
     iconClass: 'h-3.5 w-3.5',
     extraButton: 'rounded-md !px-2',
-    headerRowInset: 'pl-2',
+    headerRowInset: 'pl-1.5',
   },
 } as const;
 
+/** Icon rail: always the same geometry — ignore comfortable/compact (larger/smaller rows only when expanded). */
+const RAIL_NAV = DENSITY.default;
+
 interface PrivateSidebarProps {
   sidebar: SidebarConfig;
   header?: HeaderConfig;
@@ -116,7 +121,9 @@ export function PrivateSidebar({ sidebar, header, i18n, pathname: pathnameProp }
   );
 
   const density = React.useMemo(() => navDensityFromCount(allItems.length), [allItems.length]);
-  const d = DENSITY[density];
+  const tierNav = DENSITY[density];
+  /** Expanded: follow item-count tier; collapsed rail: fixed `default` sizing so icons stay uniform. */
+  const menuNav = state === 'collapsed' ? RAIL_NAV : tierNav;
 
   const isActive = React.useCallback(
     (href: string) => {
@@ -134,7 +141,7 @@ export function PrivateSidebar({ sidebar, header, i18n, pathname: pathnameProp }
 
   const expanded = state === 'expanded';
 
-  const headerRowClass = cn('flex items-center gap-2', d.headerRowInset);
+  const headerRowClass = cn('flex items-center gap-2', tierNav.headerRowInset);
   const brandMark = header?.brandIcon ? (
     <LucideIcon icon={header.brandIcon} className="h-4 w-4 text-sidebar-primary-foreground" />
   ) : (
@@ -152,12 +159,12 @@ export function PrivateSidebar({ sidebar, header, i18n, pathname: pathnameProp }
     <div className="w-full min-w-0 shrink-0 px-2">{sidebar.menuEnd}</div>
   ) : null;
 
-  const sidebarContentClass = cn('gap-2', d.group);
+  const sidebarContentClass = cn('gap-2', menuNav.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);
+    const navButtonClass = cn(navItemClass, menuNav.extraButton);
+    const groupLabelClass = cn('px-2', menuNav.label);
+    const sidebarGroupClass = cn('gap-0', menuNav.groupPad);
 
     return sidebar.groups.map((group) => {
       if (group.dynamic && group.items.length === 0) return null;
@@ -169,12 +176,12 @@ export function PrivateSidebar({ sidebar, header, i18n, pathname: pathnameProp }
             <SidebarMenuButton
               asChild
               isActive={isActive(item.href)}
-              size={d.buttonSize}
+              size={menuNav.buttonSize}
               tooltip={tooltipText}
               className={navButtonClass}
             >
               <Link href={item.href}>
-                {item.icon ? <LucideIcon icon={iconProp} className={d.iconClass} /> : null}
+                {item.icon ? <LucideIcon icon={iconProp} className={menuNav.iconClass} /> : null}
                 <span>{item.label}</span>
                 {item.badge ? <SidebarMenuBadge>{item.badge}</SidebarMenuBadge> : null}
               </Link>
@@ -187,12 +194,12 @@ export function PrivateSidebar({ sidebar, header, i18n, pathname: pathnameProp }
         <SidebarGroup key={group.label} className={sidebarGroupClass}>
           <SidebarGroupLabel className={groupLabelClass}>{group.label}</SidebarGroupLabel>
           <SidebarGroupContent>
-            <SidebarMenu className={d.menu}>{items}</SidebarMenu>
+            <SidebarMenu className={menuNav.menu}>{items}</SidebarMenu>
           </SidebarGroupContent>
         </SidebarGroup>
       );
     });
-  }, [sidebar.groups, isActive, d]);
+  }, [sidebar.groups, isActive, menuNav]);
 
   const expandedHeader = (
     <div className={headerRowClass}>
@@ -218,7 +225,7 @@ export function PrivateSidebar({ sidebar, header, i18n, pathname: pathnameProp }
 
   return (
     <Sidebar collapsible="icon">
-      <SidebarHeader className="px-2 pt-2.5 pb-2">{sidebarHeaderContent}</SidebarHeader>
+      <SidebarHeader className="px-2 pt-3.5 pb-2">{sidebarHeaderContent}</SidebarHeader>
 
       <SidebarContent className={sidebarContentClass}>
         {menuStartSlot}