@djangocfg/layouts 2.1.108 → 2.1.109

package/README.md

@@ -138,7 +138,11 @@ import { PublicLayout, PrivateLayout, AuthLayout } from '@djangocfg/layouts';
 
 // Private page
 <PrivateLayout
-  sidebar={{ items: menuItems }}
+  sidebar={{
+    groups: [
+      { label: 'Main', items: menuItems }
+    ]
+  }}
   header={{ title: 'Dashboard' }}
 >
   {children}
@@ -669,15 +673,18 @@ export default function DashboardPage() {
   return (
     <PrivateLayout
       sidebar={{
-        items: [
-          { label: 'Dashboard', href: '/dashboard', icon: 'LayoutDashboard' },
-          { label: 'Settings', href: '/settings', icon: 'Settings' }
-        ]
-      }}
-      header={{
-        title: 'Dashboard',
-        userMenu: { name: 'John Doe', email: 'john@example.com' }
+        groups: [
+          {
+            label: 'Main',
+            items: [
+              { label: 'Dashboard', href: '/dashboard', icon: 'LayoutDashboard' },
+              { label: 'Settings', href: '/settings', icon: 'Settings' }
+            ]
+          }
+        ],
+        homeHref: '/dashboard'
       }}
+      header={{ title: 'Dashboard' }}
     >
       <h1>Dashboard</h1>
     </PrivateLayout>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.108",
+  "version": "2.1.109",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -74,11 +74,11 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.108",
-    "@djangocfg/centrifugo": "^2.1.108",
-    "@djangocfg/ui-core": "^2.1.108",
-    "@djangocfg/ui-nextjs": "^2.1.108",
-    "@djangocfg/ui-tools": "^2.1.108",
+    "@djangocfg/api": "^2.1.109",
+    "@djangocfg/centrifugo": "^2.1.109",
+    "@djangocfg/ui-core": "^2.1.109",
+    "@djangocfg/ui-nextjs": "^2.1.109",
+    "@djangocfg/ui-tools": "^2.1.109",
     "@hookform/resolvers": "^5.2.0",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -87,7 +87,7 @@
     "p-retry": "^7.0.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-hook-form": "7.65.0",
+    "react-hook-form": "^7.69.0",
     "sonner": "2.0.7",
     "swr": "^2.3.7",
     "tailwindcss": "^4.1.14",
@@ -101,12 +101,12 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.108",
-    "@djangocfg/centrifugo": "^2.1.108",
-    "@djangocfg/typescript-config": "^2.1.108",
-    "@djangocfg/ui-core": "^2.1.108",
-    "@djangocfg/ui-nextjs": "^2.1.108",
-    "@djangocfg/ui-tools": "^2.1.108",
+    "@djangocfg/api": "^2.1.109",
+    "@djangocfg/centrifugo": "^2.1.109",
+    "@djangocfg/typescript-config": "^2.1.109",
+    "@djangocfg/ui-core": "^2.1.109",
+    "@djangocfg/ui-nextjs": "^2.1.109",
+    "@djangocfg/ui-tools": "^2.1.109",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/layouts/PrivateLayout/PrivateLayout.tsx

@@ -59,6 +59,7 @@ import { UserMenuConfig } from '../types';
 import { PrivateContent, PrivateHeader, PrivateSidebar } from './components';
 
 import type { LucideIcon as LucideIconType } from 'lucide-react';
+
 export interface SidebarItem {
   label: string;
   href: string;
@@ -66,8 +67,19 @@ export interface SidebarItem {
   badge?: string | number;
 }
 
-export interface SidebarConfig {
+export interface SidebarGroupConfig {
+  /** Group label displayed above items */
+  label: string;
+  /** Items in this group */
   items: SidebarItem[];
+  /** If true, group is only shown when it has items (for dynamic groups like extensions) */
+  dynamic?: boolean;
+}
+
+export interface SidebarConfig {
+  /** Grouped items with labels */
+  groups: SidebarGroupConfig[];
+  /** Home link href */
   homeHref?: string;
 }
 

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

@@ -18,7 +18,7 @@ import { cn } from '@djangocfg/ui-core/lib';
 
 import { LucideIcon } from '../../../components';
 
-import type { SidebarItem, SidebarConfig } from '../PrivateLayout';
+import type { SidebarItem, SidebarConfig, SidebarGroupConfig } from '../PrivateLayout';
 
 interface PrivateSidebarProps {
   sidebar: SidebarConfig;
@@ -29,18 +29,71 @@ export function PrivateSidebar({ sidebar }: PrivateSidebarProps) {
   const { state, isMobile } = 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 !sidebar.items.some(otherItem =>
-      otherItem.href !== href &&
-      otherItem.href.startsWith(href + '/') &&
-      (pathname === otherItem.href || pathname.startsWith(otherItem.href + '/'))
+    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 = () => {
+    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>
+      );
+    });
+  };
+
   return (
     <Sidebar collapsible="icon">
       <SidebarHeader>
@@ -88,47 +141,7 @@ export function PrivateSidebar({ sidebar }: PrivateSidebarProps) {
         </div>
       </SidebarHeader>
 
-      <SidebarContent>
-        <SidebarGroup>
-          <SidebarGroupContent>
-            <SidebarMenu>
-              {sidebar.items.map((item) => {
-                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>
-                );
-              })}
-            </SidebarMenu>
-          </SidebarGroupContent>
-        </SidebarGroup>
-      </SidebarContent>
+      <SidebarContent>{renderContent()}</SidebarContent>
     </Sidebar>
   );
 }

package/src/layouts/PrivateLayout/index.ts

@@ -3,5 +3,5 @@
  */
 
 export { PrivateLayout } from './PrivateLayout';
-export type { PrivateLayoutProps, SidebarItem, SidebarConfig, HeaderConfig } from './PrivateLayout';
+export type { PrivateLayoutProps, SidebarItem, SidebarGroupConfig, SidebarConfig, HeaderConfig } from './PrivateLayout';