npm - @djangocfg/layouts - Versions diffs - 2.1.249 → 2.1.252 - Mend

@djangocfg/layouts 2.1.249 → 2.1.252

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

package/README.md CHANGED Viewed

@@ -92,15 +92,17 @@ export default function RootLayout({ children }) {
     <html lang="en" suppressHydrationWarning>
       <body>
         <AppLayout
-          project="my-app"
-          theme={{ defaultTheme: 'system' }}
-          auth={{ apiUrl: process.env.NEXT_PUBLIC_API_URL }}
-          publicLayout={{ component: PublicLayout, enabledPath: ['/', '/legal', '/contact'] }}
-          privateLayout={{ component: PrivateLayout, enabledPath: ['/dashboard', '/profile'] }}
-          adminLayout={{ component: AdminLayout, enabledPath: '/admin' }}
-          noLayoutPaths={['/private/terminal', '/embed']}
+          layouts={{
+            public: { component: PublicLayout, enabledPath: ['/', '/legal', '/contact'] },
+            private: { component: PrivateLayout, enabledPath: ['/dashboard', '/profile'] },
+            admin: { component: AdminLayout, enabledPath: '/admin' },
+            noLayoutPaths: ['/private/terminal', '/embed'],
+          }}
+          baseApp={{
+            project: 'my-app',
+            theme: { defaultTheme: 'system' },
+            auth: { apiUrl: process.env.NEXT_PUBLIC_API_URL },
+          }}
         >
           {children}
         </AppLayout>

package/package.json CHANGED Viewed

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

package/src/index.ts CHANGED Viewed

@@ -6,10 +6,12 @@
  *
  * @example
  * ```tsx
- * import { PublicLayout, PrivateLayout, AuthLayout } from '@djangocfg/layouts';
+ * import { PublicLayout, PublicNavbar, PrivateLayout, AuthLayout } from '@djangocfg/layouts';
  *
  * // Public page
- * <PublicLayout logo="/logo.svg" siteName="My App" navigation={navItems}>
+ * <PublicLayout
+ *   navbar={<PublicNavbar config={{ logo: "/logo.svg", siteName: "My App", navigation: navItems }} />}
+ * >
  *   {children}
  * </PublicLayout>
  *

package/src/layouts/AppLayout/AppLayout.tsx CHANGED Viewed

@@ -88,9 +88,36 @@ interface LayoutConfig {
   enabledPath?: string | string[];
 }
+export interface AppLayoutLayoutsConfig {
+  public?: LayoutConfig;
+  private?: LayoutConfig;
+  admin?: LayoutConfig;
+  noLayoutPaths?: string | string[];
+  authPath?: string;
+}
+export interface AppLayoutBaseAppConfig {
+  project?: string;
+  theme?: ThemeConfig;
+  auth?: AuthConfig;
+  analytics?: AnalyticsConfig;
+  centrifugo?: CentrifugoConfig;
+  errorTracking?: ErrorTrackingConfig;
+  swr?: SWRConfigOptions;
+  errorBoundary?: ErrorBoundaryConfig;
+  pwaInstall?: PwaInstallConfig;
+  monitor?: MonitorConfig;
+  debug?: DebugConfig;
+}
 export interface AppLayoutProps {
   children: ReactNode;
+  /** Compact routing/layout config */
+  layouts?: AppLayoutLayoutsConfig;
+  /** Compact providers/base-app config */
+  baseApp?: AppLayoutBaseAppConfig;
   /** Project name — used as default for monitor.project and debug panel title */
   project?: string;
@@ -152,6 +179,16 @@ export interface AppLayoutProps {
   debug?: DebugConfig;
 }
+interface AppLayoutContentProps {
+  children: ReactNode;
+  publicLayout?: LayoutConfig;
+  privateLayout?: LayoutConfig;
+  adminLayout?: LayoutConfig;
+  noLayoutPaths?: string | string[];
+  authPath?: string;
+  i18n?: I18nLayoutConfig;
+}
 /**
  * AppLayout Content - Renders layout with all providers
  *
@@ -166,7 +203,7 @@ function AppLayoutContent({
   noLayoutPaths,
   authPath = '/auth',
   i18n,
-}: AppLayoutProps) {
+}: AppLayoutContentProps) {
   // Use pathname without locale prefix for route matching
   const pathname = usePathnameWithoutLocale();
@@ -270,20 +307,32 @@ function AppLayoutContent({
  * AppLayout - Main Component with All Providers
  */
 export function AppLayout(props: AppLayoutProps) {
+  const layoutsConfig = props.layouts;
+  const baseAppConfig = props.baseApp;
+  const publicLayout = layoutsConfig?.public ?? props.publicLayout;
+  const privateLayout = layoutsConfig?.private ?? props.privateLayout;
+  const adminLayout = layoutsConfig?.admin ?? props.adminLayout;
+  const noLayoutPaths = layoutsConfig?.noLayoutPaths ?? props.noLayoutPaths;
+  const authPath = layoutsConfig?.authPath ?? props.authPath;
   const {
-    project,
-    theme,
-    auth,
-    analytics,
-    centrifugo,
-    errorTracking,
-    errorBoundary,
-    swr,
-    pwaInstall,
-    monitor,
-    debug,
+    i18n,
+    children,
   } = props;
+  const project = baseAppConfig?.project ?? props.project;
+  const theme = baseAppConfig?.theme ?? props.theme;
+  const auth = baseAppConfig?.auth ?? props.auth;
+  const analytics = baseAppConfig?.analytics ?? props.analytics;
+  const centrifugo = baseAppConfig?.centrifugo ?? props.centrifugo;
+  const errorTracking = baseAppConfig?.errorTracking ?? props.errorTracking;
+  const errorBoundary = baseAppConfig?.errorBoundary ?? props.errorBoundary;
+  const swr = baseAppConfig?.swr ?? props.swr;
+  const pwaInstall = baseAppConfig?.pwaInstall ?? props.pwaInstall;
+  const monitor = baseAppConfig?.monitor ?? props.monitor;
+  const debug = baseAppConfig?.debug ?? props.debug;
   return (
     <BaseApp
       project={project}
@@ -298,7 +347,15 @@ export function AppLayout(props: AppLayoutProps) {
       monitor={monitor}
       debug={debug}
     >
-      <AppLayoutContent {...props} />
+      <AppLayoutContent
+        children={children}
+        publicLayout={publicLayout}
+        privateLayout={privateLayout}
+        adminLayout={adminLayout}
+        noLayoutPaths={noLayoutPaths}
+        authPath={authPath}
+        i18n={i18n}
+      />
     </BaseApp>
   );
 }

package/src/layouts/AppLayout/index.ts CHANGED Viewed

@@ -3,7 +3,13 @@
  */
 export { AppLayout } from './AppLayout';
-export type { AppLayoutProps, LayoutMode, I18nLayoutConfig } from './AppLayout';
+export type {
+  AppLayoutProps,
+  AppLayoutLayoutsConfig,
+  AppLayoutBaseAppConfig,
+  LayoutMode,
+  I18nLayoutConfig,
+} from './AppLayout';
 export { BaseApp } from './BaseApp';
 export type { BaseAppProps } from './BaseApp';

package/src/layouts/PrivateLayout/PrivateLayout.tsx CHANGED Viewed

@@ -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';
@@ -86,21 +47,25 @@ export interface SidebarConfig {
 }
 export interface HeaderConfig {
+  /** Shown next to the logo when the sidebar is expanded */
   title?: string;
-  /** User menu groups */
+  /** 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 +76,7 @@ export function PrivateLayout({
   children,
   sidebar,
   header,
+  pathname,
   contentPadding = 'default',
   i18n,
 }: PrivateLayoutProps) {
@@ -120,23 +86,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 +107,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 CHANGED Viewed

@@ -1,33 +1,50 @@
 /**
- * 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) {
   return (
-    <main
-      className={cn(
-        'flex-1 overflow-y-auto',
-        padding === 'default' && 'p-4 sm:p-6 lg:p-8'
+    <div className="flex min-h-0 min-w-0 flex-1 flex-col">
+      {hasSidebar && (
+        <div
+          className={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',
+          )}
+        >
+          <SidebarTrigger
+            className="shrink-0"
+            aria-label="Open menu"
+          />
+        </div>
       )}
-    >
-      {children}
-    </main>
+      <div
+        className={cn(
+          'min-h-0 flex-1 overflow-y-auto',
+          padding === 'default' && 'p-4 sm:p-6 lg:p-8',
+        )}
+      >
+        {children}
+      </div>
+    </div>
   );
 }