@djangocfg/layouts 2.1.23 → 2.1.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.23",
+  "version": "2.1.26",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -92,9 +92,9 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.23",
-    "@djangocfg/centrifugo": "^2.1.23",
-    "@djangocfg/ui-nextjs": "^2.1.23",
+    "@djangocfg/api": "^2.1.26",
+    "@djangocfg/centrifugo": "^2.1.26",
+    "@djangocfg/ui-nextjs": "^2.1.26",
     "@hookform/resolvers": "^5.2.0",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -114,7 +114,7 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.23",
+    "@djangocfg/typescript-config": "^2.1.26",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/layouts/AdminLayout/AdminLayout.tsx

@@ -17,7 +17,16 @@
  *   }}
  *   header={{
  *     title: 'Admin Dashboard',
- *     profilePath: '/private/profile' // Optional
+ *     groups: [
+ *       {
+ *         title: 'Admin',
+ *         items: [
+ *           { label: 'Profile', href: '/profile' },
+ *           { label: 'Settings', href: '/settings' }
+ *         ]
+ *       }
+ *     ],
+ *     authPath: '/auth'
  *   }}
  * >
  *   {children}

package/src/layouts/PrivateLayout/PrivateLayout.tsx

@@ -24,7 +24,16 @@
  *   }}
  *   header={{
  *     title: 'Dashboard',
- *     profilePath: '/private/profile' // Optional, defaults to '/private/profile'
+ *     groups: [
+ *       {
+ *         title: 'Account',
+ *         items: [
+ *           { label: 'Profile', href: '/profile' },
+ *           { label: 'Settings', href: '/settings' }
+ *         ]
+ *       }
+ *     ],
+ *     authPath: '/auth'
  *   }}
  * >
  *   {children}
@@ -58,9 +67,10 @@ export interface SidebarConfig {
 
 export interface HeaderConfig {
   title?: string;
-  /** Profile path (optional, defaults to '/profile') */
-  profilePath?: string;
+  /** User menu groups */
   groups?: UserMenuConfig['groups'];
+  /** Auth page path (for sign in button) */
+  authPath?: string;
 }
 
 export interface PrivateLayoutProps {

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

@@ -51,7 +51,7 @@ export function PrivateHeader({ header }: PrivateHeaderProps) {
         <UserMenu
           variant="desktop"
           groups={header?.groups}
-          authPath={header?.profilePath}
+          authPath={header?.authPath}
         />
       </div>
     </header>

package/src/layouts/ProfileLayout/ProfileLayout.tsx

@@ -9,6 +9,7 @@ import {
   CardDescription,
   CardHeader,
   CardTitle,
+  Preloader,
 } from '@djangocfg/ui-nextjs/components';
 import { AccountsProvider } from '@djangocfg/api/auth';
 import { useAuth } from '@djangocfg/api/auth';

package/src/layouts/PublicLayout/PublicLayout.tsx

@@ -28,7 +28,8 @@
 
 'use client';
 
-import { ReactNode, useState } from 'react';
+import { ReactNode, useState, useEffect } from 'react';
+import { usePathname } from 'next/navigation';
 import type { NavigationItem, UserMenuConfig } from '../shared/types';
 import {
   PublicNavigation,
@@ -55,6 +56,12 @@ export function PublicLayout({
   userMenu,
 }: PublicLayoutProps) {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const pathname = usePathname();
+
+  // Close mobile menu on route change
+  useEffect(() => {
+    setMobileMenuOpen(false);
+  }, [pathname]);
 
   return (
     <div className="min-h-screen flex flex-col">

package/src/layouts/PublicLayout/components/PublicMobileDrawer.tsx

@@ -41,10 +41,6 @@ export function PublicMobileDrawer({
 }: PublicMobileDrawerProps) {
   const { isAuthenticated } = useAuth();
 
-  const handleNavigate = () => {
-    onClose();
-  };
-
   return (
     <Drawer open={isOpen} onOpenChange={(open) => !open && onClose()} direction="right">
       <DrawerContent direction="right" className="w-80 lg:hidden">
@@ -55,7 +51,7 @@ export function PublicMobileDrawer({
               <img
                 src={logo}
                 alt={`${siteName} Logo`}
-                className="h-8 w-auto object-contain"
+                className="h-6 w-auto object-contain"
               />
             )}
             <DrawerTitle className="text-lg font-bold text-foreground">
@@ -70,12 +66,6 @@ export function PublicMobileDrawer({
 
         {/* Scrollable Content */}
         <div className="flex-1 overflow-y-auto p-4 space-y-6">
-          {/* Theme Toggle */}
-          <div className="flex items-center justify-between px-4 py-3 border-b border-border/30">
-            <span className="text-sm font-medium text-foreground">Theme</span>
-            <ThemeToggle />
-          </div>
-
           {/* User Menu */}
           <UserMenu
             variant="mobile"
@@ -84,7 +74,7 @@ export function PublicMobileDrawer({
           />
 
           {/* Navigation Items */}
-          <div className="space-y-3">
+          <div className="space-y-3 pt-3">
             <h3 className="px-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
               Menu
             </h3>
@@ -94,16 +84,20 @@ export function PublicMobileDrawer({
                   key={item.href}
                   href={item.href}
                   className="block px-4 py-3 rounded-sm text-base font-medium transition-colors text-foreground hover:bg-accent hover:text-accent-foreground"
-                  onClick={handleNavigate}
                 >
                   {item.label}
                 </Link>
               ))}
             </div>
           </div>
+        </div>
 
-          {/* Bottom spacer */}
-          <div style={{ height: '15vh' }}></div>
+        {/* Theme Toggle - Fixed at bottom */}
+        <div className="border-t border-border/30 p-4">
+          <div className="flex items-center justify-between px-4 py-3">
+            <span className="text-sm font-medium text-foreground">Theme</span>
+            <ThemeToggle />
+          </div>
         </div>
       </DrawerContent>
     </Drawer>

package/src/layouts/PublicLayout/components/PublicNavigation.tsx

@@ -42,7 +42,7 @@ export function PublicNavigation({
           {/* Logo */}
           <Link href="/" className="flex items-center gap-2">
             {logo && (
-              <img src={logo} alt={siteName} className="h-8 w-8" />
+              <img src={logo} alt={siteName} className="h-6 w-auto object-contain" />
             )}
             <span className="font-bold text-lg">{siteName}</span>
           </Link>