@djangocfg/layouts 2.1.249 → 2.1.252

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/PublicLayout/PublicLayout.tsx

@@ -11,15 +11,19 @@
  *
  * @example
  * ```tsx
- * import { PublicLayout } from '@djangocfg/layouts';
+ * import { PublicLayout, PublicNavbar } from '@djangocfg/layouts';
  *
  * <PublicLayout
- *   logo="/logo.svg"
- *   siteName="My App"
- *   navigation={[
- *     { label: 'Home', href: '/' },
- *     { label: 'Docs', href: '/docs' }
- *   ]}
+ *   navbar={
+ *     <PublicNavbar
+ *       logo="/logo.svg"
+ *       siteName="My App"
+ *       navigation={[
+ *         { label: 'Home', href: '/' },
+ *         { label: 'Docs', href: '/docs' }
+ *       ]}
+ *     />
+ *   }
  * >
  *   {children}
  * </PublicLayout>
@@ -31,36 +35,25 @@
 import { usePathname } from 'next/navigation';
 import { ReactNode, useEffect, useMemo, useState } from 'react';
 
-import { PublicMobileDrawer, PublicNavigation } from './components';
 import { PublicLayoutProvider } from './context';
 
-import type { NavigationItem, UserMenuConfig } from '../types';
-import type { I18nLayoutConfig } from '../AppLayout/AppLayout';
-
 export interface PublicLayoutProps {
   children: ReactNode;
-  /** Logo path or URL */
-  logo?: string;
-  /** Site name */
-  siteName?: string;
-  /** Navigation items */
-  navigation?: NavigationItem[];
-  /** User menu configuration (optional, uses useAuth() for authentication state) */
-  userMenu?: UserMenuConfig;
-  /** i18n configuration for locale switching */
-  i18n?: I18nLayoutConfig;
-  /** Custom className for navbar container (e.g. "max-w-7xl mx-auto") */
-  navbarContainerClassName?: string;
+
+  /**
+   * Slots (advanced).
+   *
+   * Slots-only API: this layout does not render any default navbar/drawer/footer.
+   * Pass `navbar`, `mobileDrawer`, `footer` explicitly (or keep them empty).
+   */
+  navbar?: ReactNode;
+  footer?: ReactNode;
 }
 
 export function PublicLayout({
   children,
-  logo,
-  siteName = 'App',
-  navigation = [],
-  userMenu,
-  i18n,
-  navbarContainerClassName,
+  navbar,
+  footer,
 }: PublicLayoutProps) {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const pathname = usePathname();
@@ -71,30 +64,22 @@ export function PublicLayout({
   }, [pathname]);
 
   const contextValue = useMemo(() => ({
-    logo,
-    siteName,
-    navigation,
-    userMenu,
-    i18n,
-    containerClassName: navbarContainerClassName,
     mobileMenuOpen,
     toggleMobileMenu: () => setMobileMenuOpen((prev) => !prev),
     closeMobileMenu: () => setMobileMenuOpen(false),
-  }), [logo, siteName, navigation, userMenu, i18n, navbarContainerClassName, mobileMenuOpen]);
+  }), [
+    mobileMenuOpen,
+  ]);
 
   return (
     <PublicLayoutProvider value={contextValue}>
       <div className="min-h-screen flex flex-col">
-        {/* Navigation */}
-        <PublicNavigation />
-
-        {/* Mobile Drawer */}
-        <PublicMobileDrawer />
+        {navbar ?? null}
 
         {/* Main Content */}
         <main className="flex-1">{children}</main>
 
-        {/* Footer - Add your own custom footer component here if needed */}
+        {footer ?? null}
       </div>
     </PublicLayoutProvider>
   );

package/src/layouts/PublicLayout/components/PublicFooter/FooterMenuSections.tsx

@@ -11,13 +11,24 @@ import type { FooterMenuSection } from './types';
 
 export interface FooterMenuSectionsProps {
   menuSections: FooterMenuSection[];
+  minColumnWidth?: number;
+  maxColumns?: number;
 }
 
-export function FooterMenuSections({ menuSections }: FooterMenuSectionsProps) {
+export function FooterMenuSections({
+  menuSections,
+  minColumnWidth = 180,
+  maxColumns = 5,
+}: FooterMenuSectionsProps) {
   if (menuSections.length === 0) return null;
 
+  const effectiveColumns = Math.max(1, Math.min(maxColumns, menuSections.length));
+
   return (
-    <div className="w-full grid grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-x-12">
+    <div
+      className="w-full grid gap-8 lg:gap-x-12"
+      style={{ gridTemplateColumns: `repeat(${effectiveColumns}, minmax(${minColumnWidth}px, 1fr))` }}
+    >
       {menuSections.map((section) => (
         <div key={section.title} className="min-w-0">
           <h3 className="text-xs font-medium text-muted-foreground mb-3">

package/src/layouts/PublicLayout/components/PublicFooter/FooterProjectInfo.tsx

@@ -13,7 +13,7 @@ import type { LucideIcon } from 'lucide-react';
 import type { FooterSocialLinks } from './types';
 
 export interface FooterProjectInfoProps {
-  siteName: string;
+  siteName?: string;
   description?: string;
   logo?: string;
   badge?: {
@@ -41,16 +41,18 @@ export function FooterProjectInfo({
           <div className={isMobile ? 'w-6 h-6 flex items-center justify-center' : 'w-8 h-8 flex items-center justify-center'}>
             <img
               src={logo}
-              alt={`${siteName} Logo`}
+              alt={`${siteName || 'Project'} Logo`}
               className="w-full h-full object-contain"
             />
           </div>
         ) : (
           <DjangoCFGLogo size={isMobile ? 24 : 32} className="text-foreground" />
         )}
-        <span className={isMobile ? 'text-lg font-bold text-foreground' : 'text-lg font-semibold text-foreground'}>
-          {siteName}
-        </span>
+        {siteName && (
+          <span className={isMobile ? 'text-lg font-bold text-foreground' : 'text-lg font-semibold text-foreground'}>
+            {siteName}
+          </span>
+        )}
       </div>
 
       {description && (