@djangocfg/layouts 1.4.29 → 2.0.1

package/src/layouts/PublicLayout/PublicLayout.tsx

@@ -0,0 +1,121 @@
+/**
+ * Public Layout
+ * 
+ * Simple layout for public pages (home, docs, contact, legal pages)
+ * Import and use directly with props - no complex configs needed!
+ * 
+ * Features:
+ * - Responsive navigation with mobile drawer
+ * - Footer with links and copyright
+ * - User menu integration
+ * 
+ * @example
+ * ```tsx
+ * import { PublicLayout } from '@djangocfg/layouts';
+ * 
+ * <PublicLayout
+ *   logo="/logo.svg"
+ *   siteName="My App"
+ *   navigation={[
+ *     { label: 'Home', href: '/' },
+ *     { label: 'Docs', href: '/docs' }
+ *   ]}
+ *   footer={{
+ *     links: { privacy: '/privacy', terms: '/terms' }
+ *   }}
+ * >
+ *   {children}
+ * </PublicLayout>
+ * ```
+ */
+
+'use client';
+
+import { ReactNode, useState } from 'react';
+import {
+  PublicNavigation,
+  PublicMobileDrawer,
+  PublicFooter,
+} from './components';
+
+export interface NavigationItem {
+  label: string;
+  href: string;
+  icon?: string;
+}
+
+export interface FooterConfig {
+  links?: {
+    privacy?: string;
+    terms?: string;
+    security?: string;
+    cookies?: string;
+    docs?: string;
+  };
+  /** Copyright text (optional, auto-generated from siteName if not provided) */
+  copyright?: string;
+}
+
+export interface PublicLayoutProps {
+  children: ReactNode;
+  /** Logo path or URL */
+  logo?: string;
+  /** Site name */
+  siteName?: string;
+  /** Navigation items */
+  navigation?: NavigationItem[];
+  /** Footer configuration */
+  footer?: FooterConfig;
+  /** User menu paths (optional, uses useAuth() for authentication state) */
+  userMenu?: {
+    /** Profile page path */
+    profilePath?: string;
+    /** Dashboard page path */
+    dashboardPath?: string;
+    /** Auth page path (for sign in button) */
+    authPath?: string;
+  };
+}
+
+export function PublicLayout({
+  children,
+  logo,
+  siteName = 'App',
+  navigation = [],
+  footer,
+  userMenu,
+}: PublicLayoutProps) {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  return (
+    <div className="min-h-screen flex flex-col">
+      {/* Navigation */}
+      <PublicNavigation
+        logo={logo}
+        siteName={siteName}
+        navigation={navigation}
+        userMenu={userMenu}
+        onMobileMenuClick={() => setMobileMenuOpen(true)}
+      />
+
+      {/* Mobile Drawer */}
+      <PublicMobileDrawer
+        isOpen={mobileMenuOpen}
+        onClose={() => setMobileMenuOpen(false)}
+        logo={logo}
+        siteName={siteName}
+        navigation={navigation}
+        userMenu={userMenu}
+      />
+
+      {/* Main Content */}
+      <main className="flex-1">{children}</main>
+
+      {/* Footer */}
+      {footer && (
+        <PublicFooter logo={logo} siteName={siteName} footer={footer} />
+      )}
+    </div>
+  );
+}
+

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

@@ -0,0 +1,190 @@
+/**
+ * Public Layout Footer
+ *
+ * Footer component for PublicLayout
+ */
+
+'use client';
+
+import React from 'react';
+import Link from 'next/link';
+import { useIsMobile } from '@djangocfg/ui/hooks';
+
+interface FooterConfig {
+  links?: {
+    privacy?: string;
+    terms?: string;
+    security?: string;
+    cookies?: string;
+    docs?: string;
+  };
+  copyright?: string;
+}
+
+interface PublicFooterProps {
+  logo?: string;
+  siteName: string;
+  footer?: FooterConfig;
+}
+
+export function PublicFooter({
+  logo,
+  siteName,
+  footer,
+}: PublicFooterProps) {
+  const isMobile = useIsMobile();
+  const currentYear = new Date().getFullYear();
+  const copyright =
+    footer?.copyright ||
+    `© ${currentYear} ${siteName}. All rights reserved.`;
+
+  if (isMobile) {
+    return (
+      <footer className="lg:hidden bg-background border-t border-border mt-auto">
+        <div className="w-full px-4 py-8">
+          {/* Project Info */}
+          <div className="text-center space-y-4 mb-6">
+            <div className="flex items-center justify-center gap-2">
+              {logo && (
+                <div className="w-6 h-6 flex items-center justify-center">
+                  <img
+                    src={logo}
+                    alt={`${siteName} Logo`}
+                    className="w-full h-full object-contain"
+                  />
+                </div>
+              )}
+              <span className="text-lg font-bold text-foreground">
+                {siteName}
+              </span>
+            </div>
+          </div>
+
+          {/* Quick Links */}
+          <div className="flex flex-wrap justify-center gap-4 mb-6 items-center">
+            {footer?.links?.docs && (
+              <a
+                href={footer.links.docs}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-sm text-muted-foreground hover:text-primary transition-colors"
+                title="Documentation"
+              >
+                Docs
+              </a>
+            )}
+            {footer?.links?.privacy && (
+              <Link
+                href={footer.links.privacy}
+                className="text-sm text-muted-foreground hover:text-primary transition-colors"
+              >
+                Privacy
+              </Link>
+            )}
+            {footer?.links?.terms && (
+              <Link
+                href={footer.links.terms}
+                className="text-sm text-muted-foreground hover:text-primary transition-colors"
+              >
+                Terms
+              </Link>
+            )}
+          </div>
+
+          {/* Bottom Section */}
+          <div className="border-t border-border pt-4">
+            <div className="text-center space-y-2">
+              <div className="text-xs text-muted-foreground">{copyright}</div>
+            </div>
+          </div>
+        </div>
+      </footer>
+    );
+  }
+
+  // Desktop Footer
+  return (
+    <footer className="max-lg:hidden bg-background border-t border-border mt-auto">
+      <div className="w-full px-8 lg:px-16 xl:px-24 py-12">
+        <div className="flex flex-col gap-8">
+          {/* Top Section */}
+          <div className="flex gap-8">
+            {/* Left Column - Project Info */}
+            <div className="space-y-4" style={{ width: '30%', minWidth: '300px' }}>
+              <div className="flex items-center gap-2">
+                {logo && (
+                  <div className="w-8 h-8 flex items-center justify-center">
+                    <img
+                      src={logo}
+                      alt={`${siteName} Logo`}
+                      className="w-full h-full object-contain"
+                    />
+                  </div>
+                )}
+                <span className="text-xl font-bold text-foreground">
+                  {siteName}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {/* Bottom Section */}
+          <div
+            className="border-t border-border"
+            style={{ marginTop: '2rem', paddingTop: '2rem' }}
+          >
+            <div className="flex justify-between items-center gap-4">
+              <div className="text-xs text-muted-foreground">{copyright}</div>
+              <div className="flex flex-wrap items-center gap-4">
+                {footer?.links?.docs && (
+                  <a
+                    href={footer.links.docs}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-xs text-muted-foreground hover:text-primary transition-colors"
+                    title="Documentation"
+                  >
+                    Docs
+                  </a>
+                )}
+                {footer?.links?.privacy && (
+                  <Link
+                    href={footer.links.privacy}
+                    className="text-xs text-muted-foreground hover:text-primary transition-colors"
+                  >
+                    Privacy Policy
+                  </Link>
+                )}
+                {footer?.links?.terms && (
+                  <Link
+                    href={footer.links.terms}
+                    className="text-xs text-muted-foreground hover:text-primary transition-colors"
+                  >
+                    Terms of Service
+                  </Link>
+                )}
+                {footer?.links?.security && (
+                  <Link
+                    href={footer.links.security}
+                    className="text-xs text-muted-foreground hover:text-primary transition-colors"
+                  >
+                    Security
+                  </Link>
+                )}
+                {footer?.links?.cookies && (
+                  <Link
+                    href={footer.links.cookies}
+                    className="text-xs text-muted-foreground hover:text-primary transition-colors"
+                  >
+                    Cookies
+                  </Link>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
+

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

@@ -0,0 +1,117 @@
+/**
+ * Public Layout Mobile Drawer
+ *
+ * Mobile drawer component for PublicLayout navigation
+ */
+
+'use client';
+
+import React from 'react';
+import Link from 'next/link';
+import { X } from 'lucide-react';
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerClose,
+  Button,
+} from '@djangocfg/ui/components';
+import { ThemeToggle } from '@djangocfg/ui/theme';
+import { useAuth } from '../../../auth';
+import { UserMenu } from '../../_components/UserMenu';
+import type { NavigationItem } from '../PublicLayout';
+
+interface PublicMobileDrawerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  logo?: string;
+  siteName: string;
+  navigation: NavigationItem[];
+  userMenu?: {
+    profilePath?: string;
+    dashboardPath?: string;
+    authPath?: string;
+  };
+}
+
+export function PublicMobileDrawer({
+  isOpen,
+  onClose,
+  logo,
+  siteName,
+  navigation,
+  userMenu,
+}: 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">
+        {/* Header */}
+        <DrawerHeader className="flex flex-row items-center justify-between p-4 border-b border-border/30">
+          <div className="flex items-center gap-3">
+            {logo && (
+              <img
+                src={logo}
+                alt={`${siteName} Logo`}
+                className="h-8 w-auto object-contain"
+              />
+            )}
+            <DrawerTitle className="text-lg font-bold text-foreground">
+              {siteName}
+            </DrawerTitle>
+          </div>
+          <DrawerClose className="p-2 rounded-sm transition-colors hover:bg-accent/50">
+            <X className="size-5" />
+            <span className="sr-only">Close menu</span>
+          </DrawerClose>
+        </DrawerHeader>
+
+        {/* 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"
+            profilePath={userMenu?.profilePath}
+            dashboardPath={userMenu?.dashboardPath}
+            authPath={userMenu?.authPath}
+          />
+
+          {/* Navigation Items */}
+          <div className="space-y-3">
+            <h3 className="px-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+              Menu
+            </h3>
+            <div className="space-y-1">
+              {navigation.map((item) => (
+                <Link
+                  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>
+
+          {/* Bottom spacer */}
+          <div style={{ height: '15vh' }}></div>
+        </div>
+      </DrawerContent>
+    </Drawer>
+  );
+}
+

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

@@ -0,0 +1,101 @@
+/**
+ * Public Layout Navigation
+ *
+ * Navigation component for PublicLayout with mobile drawer support
+ */
+
+'use client';
+
+import React from 'react';
+import Link from 'next/link';
+import { Menu } from 'lucide-react';
+import { Button } from '@djangocfg/ui/components';
+import { ThemeToggle } from '@djangocfg/ui/theme';
+import { cn } from '@djangocfg/ui/lib';
+import { useIsMobile } from '@djangocfg/ui/hooks';
+import { useAuth } from '../../../auth';
+import { UserMenu } from '../../_components/UserMenu';
+import type { NavigationItem } from '../PublicLayout';
+
+interface PublicNavigationProps {
+  logo?: string;
+  siteName: string;
+  navigation: NavigationItem[];
+  userMenu?: {
+    profilePath?: string;
+    dashboardPath?: string;
+    authPath?: string;
+  };
+  onMobileMenuClick: () => void;
+}
+
+export function PublicNavigation({
+  logo,
+  siteName,
+  navigation,
+  userMenu,
+  onMobileMenuClick,
+}: PublicNavigationProps) {
+  const { isAuthenticated } = useAuth();
+  const isMobile = useIsMobile();
+
+  return (
+    <nav className="sticky top-0 w-full backdrop-blur-xl z-50 border-b bg-background/80">
+      <div className="w-full px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between py-4">
+          {/* Logo */}
+          <Link href="/" className="flex items-center gap-2">
+            {logo && (
+              <img src={logo} alt={siteName} className="h-8 w-8" />
+            )}
+            <span className="font-bold text-lg">{siteName}</span>
+          </Link>
+
+          {/* Desktop Navigation */}
+          <div className="hidden md:flex items-center gap-6">
+            {navigation.map((item) => (
+              <Link
+                key={item.href}
+                href={item.href}
+                className="text-sm font-medium hover:text-primary transition-colors"
+              >
+                {item.label}
+              </Link>
+            ))}
+          </div>
+
+          {/* User Menu / Actions */}
+          <div className="flex items-center gap-4">
+            {!isMobile && (
+              <>
+                {/* Theme Toggle */}
+                <ThemeToggle />
+
+                {/* User Menu */}
+                <UserMenu
+                  variant="desktop"
+                  profilePath={userMenu?.profilePath}
+                  dashboardPath={userMenu?.dashboardPath}
+                  authPath={userMenu?.authPath}
+                />
+              </>
+            )}
+
+            {/* Mobile Menu Button */}
+            {isMobile && (
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={onMobileMenuClick}
+                aria-label="Toggle mobile menu"
+              >
+                <Menu className="h-5 w-5" />
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+}
+

package/src/layouts/PublicLayout/components/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Public Layout Components
+ */
+
+export { PublicNavigation } from './PublicNavigation';
+export { PublicMobileDrawer } from './PublicMobileDrawer';
+export { PublicFooter } from './PublicFooter';
+

package/src/layouts/PublicLayout/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Public Layout exports
+ */
+
+export { PublicLayout } from './PublicLayout';
+export type { PublicLayoutProps, NavigationItem, FooterConfig } from './PublicLayout';
+