@djangocfg/layouts 1.0.1

package/src/layouts/AppLayout/layouts/PrivateLayout/components/DashboardContent.tsx

@@ -0,0 +1,60 @@
+/**
+ * Dashboard Content
+ *
+ * Main content wrapper for dashboard pages
+ * Refactored from _old/DashboardLayout - uses context only!
+ */
+
+'use client';
+
+import React from 'react';
+import { cn } from '@djangocfg/ui/lib';
+import { useAppContext } from '../../../context';
+
+interface DashboardContentProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+const paddingVariants = {
+  none: '',
+  default: 'p-6',
+  sm: 'p-4',
+  md: 'p-6',
+  lg: 'p-8',
+};
+
+/**
+ * Dashboard Content Component
+ *
+ * Features:
+ * - Configurable padding from context
+ * - Full-width container
+ * - Custom className support
+ *
+ * Padding controlled by config.privateLayout.contentPadding
+ */
+export function DashboardContent({
+  children,
+  className,
+}: DashboardContentProps) {
+  const { config } = useAppContext();
+  const { privateLayout } = config;
+
+  const padding =
+    paddingVariants[
+      privateLayout.contentPadding as keyof typeof paddingVariants
+    ] || paddingVariants.default;
+
+  return (
+    <main
+      className={cn(
+        'w-full bg-background relative min-h-full',
+        padding,
+        className
+      )}
+    >
+      {children}
+    </main>
+  );
+}

package/src/layouts/AppLayout/layouts/PrivateLayout/components/DashboardHeader.tsx

@@ -0,0 +1,170 @@
+/**
+ * Dashboard Header
+ *
+ * Header for private/dashboard layout
+ * Refactored from _old/DashboardLayout - uses context only!
+ */
+
+'use client';
+
+import { Bell, LogIn, LogOut, User } from 'lucide-react';
+import React from 'react';
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Badge,
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Separator,
+  SidebarTrigger,
+} from '@djangocfg/ui';
+import { ThemeToggle } from '@djangocfg/ui/theme';
+import { useAuthDialog } from '../../../../../snippets';
+import { useAppContext } from '../../../context';
+import { useAuth } from '../../../../../auth';
+import { useNavigation } from '../../../hooks';
+
+/**
+ * Dashboard Header Component
+ *
+ * Features:
+ * - Sidebar trigger (mobile)
+ * - Page title
+ * - Custom header actions
+ * - Notifications button with badge
+ * - Theme toggle
+ * - User dropdown with avatar, profile, logout
+ * - Login button for guests
+ *
+ * All data from context!
+ */
+export function DashboardHeader() {
+  const { config } = useAppContext();
+  const { user } = useAuth();
+  const { getPageTitle } = useNavigation();
+  const { openAuthDialog } = useAuthDialog();
+  const { logout } = useAuth();
+
+  const { privateLayout } = config;
+  const pageTitle = getPageTitle();
+
+  // Notification handler - TODO: implement notification system
+  const handleNotificationClick = () => {
+    console.log('Notifications clicked');
+  };
+
+  const handleLogin = () => {
+    openAuthDialog();
+  };
+
+  return (
+    <header className="sticky top-0 py-2 z-50 h-16 flex items-center justify-between px-4 shrink-0 bg-background border-b border-border">
+      {/* Left side */}
+      <div className="flex items-center gap-4">
+        <SidebarTrigger className="-ml-1" />
+        <Separator orientation="vertical" className="mr-2 h-4" />
+
+        {pageTitle && (
+          <h1 className="text-lg font-semibold text-foreground">{pageTitle}</h1>
+        )}
+      </div>
+
+      {/* Right side */}
+      <div className="flex items-center gap-3">
+        {/* Custom header actions */}
+        {privateLayout.headerActions}
+
+        {/* Notifications */}
+        <Button
+          variant="ghost"
+          size="icon"
+          className="relative"
+          onClick={handleNotificationClick}
+        >
+          <Bell className="h-5 w-5" />
+          {/* TODO: implement notification count from context */}
+        </Button>
+
+        {/* Theme Toggle */}
+        <ThemeToggle />
+
+        {/* User menu or Login button */}
+        {user ? (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" className="flex items-center gap-2 p-2">
+                <Avatar className="h-8 w-8">
+                  <AvatarImage
+                    src={user.avatar || ''}
+                    alt={user.display_username || user.email || ''}
+                  />
+                  <AvatarFallback className="bg-primary/10 text-primary">
+                    {user.display_username?.charAt(0)?.toUpperCase() || 'U'}
+                  </AvatarFallback>
+                </Avatar>
+                <span className="hidden md:block text-sm font-medium">
+                  {user.display_username}
+                </span>
+              </Button>
+            </DropdownMenuTrigger>
+
+            <DropdownMenuContent align="end" className="w-48">
+              <DropdownMenuLabel className="p-0 font-normal">
+                <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                  <Avatar className="h-8 w-8">
+                    <AvatarImage
+                      src={user.avatar || ''}
+                      alt={user.display_username || user.email || ''}
+                    />
+                    <AvatarFallback className="bg-primary/10 text-primary">
+                      {user.display_username?.charAt(0)?.toUpperCase() || 'U'}
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="grid flex-1 text-left text-sm leading-tight">
+                    <span className="truncate font-semibold">
+                      {user.display_username || user.full_name || user.email}
+                    </span>
+                    <span className="truncate text-xs text-muted-foreground">
+                      {user.email}
+                    </span>
+                  </div>
+                </div>
+              </DropdownMenuLabel>
+
+              <DropdownMenuSeparator />
+
+              <DropdownMenuItem asChild>
+                <a
+                  href={privateLayout.profileHref}
+                  className="flex items-center gap-2"
+                >
+                  <User className="h-4 w-4" />
+                  Profile
+                </a>
+              </DropdownMenuItem>
+
+              <DropdownMenuSeparator />
+
+              <DropdownMenuItem onClick={logout}>
+                <LogOut className="mr-2 h-4 w-4" />
+                Logout
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        ) : (
+          <Button onClick={handleLogin} size="sm" className="gap-2">
+            <LogIn className="h-4 w-4" />
+            <span className="hidden sm:inline">Sign In</span>
+          </Button>
+        )}
+      </div>
+    </header>
+  );
+}

package/src/layouts/AppLayout/layouts/PrivateLayout/components/DashboardSidebar.tsx

@@ -0,0 +1,164 @@
+/**
+ * Dashboard Sidebar
+ *
+ * Sidebar navigation for private/dashboard layout
+ * Refactored from _old/DashboardLayout - uses context only!
+ */
+
+'use client';
+
+import Link from 'next/link';
+import React from 'react';
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  useSidebar,
+} from '@djangocfg/ui/components';
+import { useAppContext } from '../../../context';
+import { useNavigation } from '../../../hooks';
+
+/**
+ * Dashboard Sidebar Component
+ *
+ * Features:
+ * - Project logo and name (clickable to home)
+ * - Menu groups with labels
+ * - Menu items with icons, labels, badges
+ * - Sub-menu items (nested navigation)
+ * - Active state detection
+ * - Optional footer content
+ *
+ * All data from context!
+ */
+export function DashboardSidebar() {
+  const { config } = useAppContext();
+  const { currentPath } = useNavigation();
+  const { state, isMobile } = useSidebar();
+
+  const { app, privateLayout } = config;
+
+  const isActiveRoute = (path: string) => {
+    // Only exact match - no prefix matching
+    // This ensures /private/jobs ONLY matches /private/jobs
+    // and NOT /private, /private/jobs/123, etc.
+    return currentPath === path;
+  };
+
+  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={privateLayout.homeHref}>
+            <div className="flex items-center gap-3">
+              {app.logoPath ? (
+                <img
+                  src={app.logoPath}
+                  alt={app.name}
+                  className={isMobile ? "h-10 w-10 flex-shrink-0" : "h-8 w-8 flex-shrink-0"}
+                />
+              ) : (
+                <div className={isMobile ? "h-10 w-10 bg-primary rounded-lg flex items-center justify-center flex-shrink-0" : "h-8 w-8 bg-primary rounded-lg flex items-center justify-center flex-shrink-0"}>
+                  <span className="text-primary-foreground font-bold text-sm">
+                    {app.name.charAt(0).toUpperCase()}
+                  </span>
+                </div>
+              )}
+              {state !== "collapsed" && (
+                <span className={isMobile ? "font-semibold text-foreground truncate text-base" : "font-semibold text-foreground truncate"} style={{ whiteSpace: 'nowrap' }}>
+                  {app.name}
+                </span>
+              )}
+            </div>
+          </Link>
+        </div>
+      </SidebarHeader>
+
+      <SidebarContent>
+        {privateLayout.menuGroups.map((group) => (
+          <SidebarGroup key={group.label}>
+            <SidebarGroupLabel>{group.label}</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {group.items.map((item) => {
+                  const isActive = isActiveRoute(item.path);
+                  const Icon = item.icon;
+
+                  return (
+                    <SidebarMenuItem key={item.path}>
+                      <SidebarMenuButton
+                        asChild
+                        isActive={isActive}
+                        tooltip={item.label}
+                        size={isMobile ? "lg" : "default"}
+                      >
+                        <Link href={item.path}>
+                          <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>
+
+                      {/* Submenu */}
+                      {item.subItems && item.subItems.length > 0 && (
+                        <SidebarMenuSub>
+                          {item.subItems.map((subItem) => {
+                            const isSubActive = isActiveRoute(subItem.path);
+                            const SubIcon = subItem.icon;
+
+                            return (
+                              <SidebarMenuSubItem key={subItem.path}>
+                                <SidebarMenuSubButton
+                                  asChild
+                                  isActive={isSubActive}
+                                  size={isMobile ? "md" : "md"}
+                                >
+                                  <Link href={subItem.path}>
+                                    <SubIcon className={isMobile ? "h-5 w-5" : "h-4 w-4"} />
+                                    <span className={isMobile ? "text-base" : ""}>{subItem.label}</span>
+                                  </Link>
+                                </SidebarMenuSubButton>
+                              </SidebarMenuSubItem>
+                            );
+                          })}
+                        </SidebarMenuSub>
+                      )}
+                    </SidebarMenuItem>
+                  );
+                })}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        ))}
+      </SidebarContent>
+
+      {/* TODO: implement footer content if needed */}
+      {/* <SidebarFooter>Footer content here</SidebarFooter> */}
+    </Sidebar>
+  );
+}

package/src/layouts/AppLayout/layouts/PrivateLayout/components/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Private Layout Components
+ */
+
+export { DashboardHeader } from './DashboardHeader';
+export { DashboardSidebar } from './DashboardSidebar';
+export { DashboardContent } from './DashboardContent';

package/src/layouts/AppLayout/layouts/PrivateLayout/index.ts

@@ -0,0 +1,5 @@
+/**
+ * PrivateLayout Module
+ */
+
+export * from './PrivateLayout';

package/src/layouts/AppLayout/layouts/PublicLayout/PublicLayout.tsx

@@ -0,0 +1,44 @@
+/**
+ * Public Layout
+ *
+ * Layout for public pages (landing, docs, etc.)
+ * All data accessed through context - no prop drilling
+ */
+
+'use client';
+
+import React, { ReactNode } from 'react';
+import { Navigation } from './components/Navigation';
+import { Footer } from './components/Footer';
+
+export interface PublicLayoutProps {
+  children: ReactNode;
+}
+
+/**
+ * Public Layout Component
+ *
+ * Features:
+ * - Top navigation bar
+ * - User menu integration
+ * - Footer with links
+ * - Mobile responsive
+ *
+ * All data from useAppContext() and useAuth() - no props needed!
+ */
+export function PublicLayout({ children }: PublicLayoutProps) {
+  return (
+    <div className="min-h-screen flex flex-col">
+      {/* Navigation - gets data from context */}
+      <Navigation />
+
+      {/* Main Content */}
+      <main className="flex-1">
+        {children}
+      </main>
+
+      {/* Footer - gets data from context */}
+      <Footer />
+    </div>
+  );
+}

package/src/layouts/AppLayout/layouts/PublicLayout/components/DesktopUserMenu.tsx

@@ -0,0 +1,136 @@
+/**
+ * Desktop User Menu
+ *
+ * User dropdown menu for desktop navigation
+ * Refactored from _old/MainLayout - uses context only!
+ */
+
+'use client';
+
+import React from 'react';
+import { useRouter } from 'next/router';
+import { ChevronDown, LayoutDashboard, LogOut, User } from 'lucide-react';
+import { ButtonLink } from '@djangocfg/ui/components';
+import { useAppContext } from '../../../context';
+import { useAuth } from '../../../../../auth';
+
+/**
+ * Desktop User Menu Component
+ *
+ * Features:
+ * - Sign in button for guests
+ * - Dashboard link for authenticated users (if not on dashboard)
+ * - User dropdown with email and profile link
+ * - Logout button
+ *
+ * All data from context!
+ */
+export function DesktopUserMenu() {
+  const router = useRouter();
+  const { config, userMenuOpen, toggleUserMenu, closeUserMenu } = useAppContext();
+  const { user, isAuthenticated, logout } = useAuth();
+
+  const { routes, publicLayout } = config;
+
+  const handleLogout = () => {
+    logout();
+    closeUserMenu();
+  };
+
+  const isDashboard = publicLayout.userMenu.dashboardPath
+    ? router.pathname.includes(publicLayout.userMenu.dashboardPath)
+    : false;
+
+  return (
+    <div className="flex items-center gap-3">
+      {/* Authenticated user */}
+      {isAuthenticated ? (
+        <div className="flex items-center gap-3">
+          {/* Dashboard button (only if not on dashboard) */}
+          {publicLayout.userMenu.dashboardPath && !isDashboard && (
+            <ButtonLink
+              href={publicLayout.userMenu.dashboardPath}
+              variant="default"
+              size="sm"
+            >
+              <LayoutDashboard className="size-4 mr-2" />
+              Dashboard
+            </ButtonLink>
+          )}
+
+          {/* User Dropdown */}
+          <div className="relative">
+            <button
+              className="flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors text-foreground hover:text-primary hover:bg-accent/50"
+              onClick={toggleUserMenu}
+              aria-haspopup="true"
+              aria-expanded={userMenuOpen}
+            >
+              <User className="size-4" />
+              <span className="max-w-[120px] truncate">{user?.email}</span>
+              <ChevronDown
+                className={`size-4 transition-transform ${
+                  userMenuOpen ? 'rotate-180' : ''
+                }`}
+              />
+            </button>
+
+            {userMenuOpen && (
+              <>
+                {/* Backdrop */}
+                <div
+                  className="fixed inset-0 z-[9995]"
+                  onClick={closeUserMenu}
+                  aria-hidden="true"
+                />
+                {/* Dropdown */}
+                <div
+                  className="absolute top-full right-0 mt-2 w-48 rounded-lg shadow-lg backdrop-blur-xl z-[9996] bg-card/95 border border-border/50"
+                  role="menu"
+                  aria-label="User menu"
+                >
+                  <div className="p-2">
+                    {/* User info */}
+                    <div className="px-3 py-2 text-sm mb-2 border-b text-muted-foreground border-border/30">
+                      Signed in as:
+                      <div className="font-medium truncate text-foreground">
+                        {user?.email}
+                      </div>
+                    </div>
+
+                    {/* Profile link */}
+                    <ButtonLink
+                      href={publicLayout.userMenu.profilePath}
+                      variant="ghost"
+                      size="sm"
+                      className="w-full justify-start"
+                      onClick={closeUserMenu}
+                    >
+                      <User className="size-4 mr-2" />
+                      Profile
+                    </ButtonLink>
+
+                    {/* Logout button */}
+                    <button
+                      onClick={handleLogout}
+                      className="w-full flex items-center gap-2 px-3 py-2 text-sm rounded-lg transition-colors text-destructive hover:bg-destructive/[0.1]"
+                    >
+                      <LogOut className="size-4" />
+                      <span>Sign out</span>
+                    </button>
+                  </div>
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      ) : (
+        /* Guest - Sign in button */
+        <ButtonLink href={routes.auth} variant="default" size="sm" className="h-9 gap-1.5">
+          <User className="w-4 h-4" />
+          Sign In
+        </ButtonLink>
+      )}
+    </div>
+  );
+}