@djangocfg/layouts 1.0.1

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

@@ -0,0 +1,262 @@
+/**
+ * Footer Component
+ *
+ * Responsive footer with Desktop and Mobile variants
+ * Refactored from _old/MainLayout - uses context only!
+ */
+
+'use client';
+
+import React from 'react';
+import Link from 'next/link';
+import { useIsMobile } from '@djangocfg/ui/hooks';
+import { useAppContext } from '../../../context';
+
+/**
+ * Footer Component
+ *
+ * Features:
+ * - Responsive (Desktop/Mobile variants)
+ * - Project info with logo and description
+ * - Badge (optional)
+ * - Social links (GitHub, LinkedIn, Twitter, Telegram)
+ * - Menu sections (single items or grouped)
+ * - Legal links (Privacy, Terms, Security, Cookies, etc.)
+ * - Copyright and branding
+ *
+ * All data from context!
+ */
+export function Footer() {
+  const { config } = useAppContext();
+  const isMobile = useIsMobile();
+
+  const { app, publicLayout } = config;
+  const footer = publicLayout.footer;
+  const currentYear = new Date().getFullYear();
+
+  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 space-x-2">
+              <div className="w-6 h-6 flex items-center justify-center">
+                <img
+                  src={app.logoPath}
+                  alt={`${app.name} Logo`}
+                  className="w-full h-full object-contain"
+                />
+              </div>
+              <span className="text-lg font-bold text-foreground">{app.name}</span>
+            </div>
+            {app.description && (
+              <p className="text-muted-foreground text-sm leading-relaxed max-w-md mx-auto">
+                {app.description}
+              </p>
+            )}
+          </div>
+
+          {/* Quick Links */}
+          <div className="flex flex-wrap justify-center gap-4 mb-6">
+            {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-sm text-muted-foreground">
+                © {currentYear} {app.name}. All rights reserved.
+              </div>
+              <div className="text-sm text-muted-foreground">
+                Made with ❤️ by{' '}
+                <a
+                  href="https://reforms.ai"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="hover:text-primary transition-colors"
+                >
+                  ReformsAI
+                </a>
+              </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 - Two Column Layout */}
+          <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">
+                <div className="w-8 h-8 flex items-center justify-center">
+                  <img
+                    src={app.logoPath}
+                    alt={`${app.name} Logo`}
+                    className="w-full h-full object-contain"
+                  />
+                </div>
+                <span className="text-xl font-bold text-foreground">{app.name}</span>
+              </div>
+              {app.description && (
+                <p className="text-muted-foreground text-sm leading-relaxed">
+                  {app.description}
+                </p>
+              )}
+              {/* Badge */}
+              {footer.badge && (
+                <div className="pt-2">
+                  <span className="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg bg-primary/10 hover:bg-primary/15 border border-primary/20 text-xs font-medium text-primary transition-colors">
+                    <footer.badge.icon className="w-3.5 h-3.5" />
+                    {footer.badge.text}
+                  </span>
+                </div>
+              )}
+            </div>
+
+            {/* Right Column - Footer Menu Sections */}
+            <div className="grid grid-cols-2 gap-8">
+              {footer.menuSections.map((section) => {
+                // Single item section - render as direct link
+                if (section.items.length === 1) {
+                  const item = section.items[0];
+                  if (!item) return null;
+
+                  return (
+                    <div key={section.title}>
+                      <Link
+                        href={item.path}
+                        className="text-muted-foreground hover:text-primary text-sm transition-colors"
+                      >
+                        {item.label}
+                      </Link>
+                    </div>
+                  );
+                }
+
+                // Multiple items - render as section
+                return (
+                  <div key={section.title}>
+                    <h3 className="text-lg font-semibold text-foreground mb-4">
+                      {section.title}
+                    </h3>
+                    <ul className="space-y-2">
+                      {section.items.map((item) => (
+                        <li key={item.path}>
+                          <Link
+                            href={item.path}
+                            className="text-muted-foreground hover:text-primary text-sm transition-colors"
+                          >
+                            {item.label}
+                          </Link>
+                        </li>
+                      ))}
+                    </ul>
+                  </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">
+              © {currentYear} {app.name}. All rights reserved.
+            </div>
+            <div className="text-xs text-muted-foreground flex items-center gap-1">
+              Made with ❤️ by{' '}
+              <a
+                href="https://reforms.ai"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="hover:text-primary transition-colors"
+              >
+                ReformsAI
+              </a>
+            </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/AppLayout/layouts/PublicLayout/components/MobileMenu.tsx

@@ -0,0 +1,289 @@
+/**
+ * Mobile Menu Drawer
+ *
+ * Full-screen slide-in menu for mobile devices
+ * Refactored from _old/MainLayout - uses context only!
+ */
+
+'use client';
+
+import React from 'react';
+import { createPortal } from 'react-dom';
+import Link from 'next/link';
+import { Crown, LogOut, Settings, User, X } from 'lucide-react';
+import { ButtonLink, Card, CardContent } from '@djangocfg/ui/components';
+import { ThemeToggle } from '@djangocfg/ui/theme';
+import { useAppContext } from '../../../context';
+import { useAuth } from '../../../../../auth';
+import { useNavigation } from '../../../hooks';
+
+/**
+ * Mobile Menu Component
+ *
+ * Features:
+ * - Slide-in drawer from right
+ * - User card with info (authenticated)
+ * - Welcome card with sign in (guest)
+ * - Navigation sections
+ * - Theme toggle
+ * - Backdrop overlay
+ *
+ * All data from context!
+ */
+export function MobileMenu() {
+  const { config, mobileMenuOpen, closeMobileMenu } = useAppContext();
+  const { user, isAuthenticated, logout } = useAuth();
+  const { isActive } = useNavigation();
+
+  const { app, publicLayout, routes } = config;
+
+  // Animation state
+  const [isAnimating, setIsAnimating] = React.useState(false);
+
+  // Trigger animation when menu opens
+  React.useEffect(() => {
+    if (mobileMenuOpen) {
+      // Small delay to trigger animation
+      setTimeout(() => setIsAnimating(true), 10);
+    } else {
+      setIsAnimating(false);
+    }
+  }, [mobileMenuOpen]);
+
+  const handleLogout = () => {
+    logout();
+    handleClose();
+  };
+
+  const handleClose = () => {
+    setIsAnimating(false);
+    setTimeout(closeMobileMenu, 300); // Wait for animation
+  };
+
+  const handleNavigate = () => {
+    handleClose();
+  };
+
+  if (!mobileMenuOpen) return null;
+
+  // Portal to body to avoid z-index and positioning issues
+  if (typeof window === 'undefined') return null;
+
+  return createPortal(
+    <>
+      {/* Backdrop with fade animation */}
+      <div
+        className={`fixed inset-0 z-[9998] bg-black/50 backdrop-blur-sm transition-opacity duration-300 lg:hidden ${
+          isAnimating ? 'opacity-100' : 'opacity-0'
+        }`}
+        onClick={handleClose}
+        aria-hidden="true"
+      />
+
+      {/* Menu Content with slide animation */}
+      <div
+        className={`fixed top-0 right-0 bottom-0 w-80 z-[9999] bg-card backdrop-blur-xl border-l border-border shadow-2xl transition-transform duration-300 ease-out lg:hidden ${
+          isAnimating ? 'translate-x-0' : 'translate-x-full'
+        }`}
+        role="dialog"
+        aria-modal="true"
+        aria-label="Mobile navigation menu"
+      >
+        <div className="flex flex-col h-full">
+          {/* Header */}
+          <div className="flex items-center justify-between p-4 border-b border-border/30">
+            <div className="flex items-center gap-3">
+              <img
+                src={app.logoPath}
+                alt={`${app.name} Logo`}
+                className="h-8 w-auto object-contain"
+              />
+              <span className="text-lg font-bold text-foreground">
+                {app.name}
+              </span>
+            </div>
+            <button
+              onClick={handleClose}
+              className="p-2 rounded-lg transition-colors hover:bg-accent/50"
+              aria-label="Close menu"
+            >
+              <X className="size-5" />
+            </button>
+          </div>
+
+          {/* Scrollable Content */}
+          <div className="flex-1 overflow-y-auto p-4 space-y-6">
+            {/* User Menu Card - Authenticated */}
+            {isAuthenticated ? (
+              <Card className="border-primary/20 shadow-lg bg-accent/30">
+                <CardContent className="p-4">
+                  {/* User Info Header */}
+                  <div className="flex items-center gap-3 mb-4 p-3 rounded-lg border border-border bg-accent/50">
+                    <div className="w-10 h-10 rounded-full flex items-center justify-center bg-primary flex-shrink-0 overflow-hidden">
+                      {user?.avatar ? (
+                        <img
+                          src={user.avatar}
+                          alt={user?.email || 'User'}
+                          className="w-10 h-10 rounded-full object-cover"
+                        />
+                      ) : (
+                        <User className="w-5 h-5 text-primary-foreground" />
+                      )}
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+                        Signed in as
+                      </p>
+                      <p className="text-sm font-semibold truncate text-foreground">
+                        {user?.email}
+                      </p>
+                    </div>
+                    <div className="flex items-center gap-1">
+                      <div className="size-2 rounded-full animate-pulse bg-green-500"></div>
+                      <span className="text-xs font-medium text-green-600 dark:text-green-400">
+                        Active
+                      </span>
+                    </div>
+                  </div>
+
+                  {/* Action Buttons */}
+                  <div className="space-y-3">
+                    {/* Dashboard link */}
+                    {publicLayout.userMenu.dashboardPath && (
+                      <ButtonLink
+                        href={publicLayout.userMenu.dashboardPath}
+                        variant="default"
+                        size="sm"
+                        className="w-full justify-center"
+                        onClick={handleNavigate}
+                      >
+                        <Crown className="w-4 h-4 mr-2" />
+                        Dashboard
+                      </ButtonLink>
+                    )}
+
+                    {/* Profile link */}
+                    <ButtonLink
+                      href={publicLayout.userMenu.profilePath}
+                      variant="outline"
+                      size="sm"
+                      className="w-full justify-center"
+                      onClick={handleNavigate}
+                    >
+                      <Settings className="w-4 h-4 mr-2" />
+                      Profile Settings
+                    </ButtonLink>
+
+                    {/* Logout */}
+                    <button
+                      onClick={handleLogout}
+                      className="w-full flex items-center justify-center gap-2 px-3 py-2 text-sm rounded-lg transition-colors border text-destructive border-destructive/30 hover:bg-destructive/10"
+                    >
+                      <LogOut className="w-4 h-4" />
+                      Sign Out
+                    </button>
+
+                    {/* Theme toggle */}
+                    <div className="flex justify-center pt-2 border-t border-border/30">
+                      <ThemeToggle />
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            ) : (
+              /* Guest Card */
+              <Card className="border-border bg-accent/30">
+                <CardContent className="p-4">
+                  <div className="text-center space-y-4">
+                    <div className="w-12 h-12 rounded-full flex items-center justify-center mx-auto bg-muted flex-shrink-0">
+                      <User className="w-6 h-6 text-muted-foreground" />
+                    </div>
+                    <div>
+                      <p className="text-sm font-medium mb-1 text-foreground">
+                        Welcome!
+                      </p>
+                      <p className="text-xs text-muted-foreground">
+                        Sign in to access your dashboard
+                      </p>
+                    </div>
+                    <ButtonLink
+                      href={routes.auth}
+                      variant="default"
+                      size="lg"
+                      className="w-full justify-center"
+                      onClick={handleNavigate}
+                    >
+                      <User className="w-5 h-5 mr-2" />
+                      Sign In
+                    </ButtonLink>
+
+                    {/* Theme toggle */}
+                    <div className="flex justify-center pt-2 border-t border-border/30">
+                      <ThemeToggle />
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            )}
+
+            {/* Navigation Sections */}
+            <div className="space-y-6">
+              {publicLayout.navigation.menuSections.map((section) => {
+                // Single item section
+                if (section.items.length === 1) {
+                  const item = section.items[0];
+                  if (!item) return null;
+
+                  return (
+                    <div key={section.title} className="space-y-2">
+                      <Link
+                        href={item.path}
+                        className={`block px-4 py-3 rounded-lg text-base font-medium transition-colors ${
+                          isActive(item.path)
+                            ? 'text-primary border border-primary/20 bg-primary/[0.1]'
+                            : 'text-muted-foreground hover:text-primary hover:bg-accent/50'
+                        }`}
+                        onClick={handleNavigate}
+                      >
+                        {item.label}
+                      </Link>
+                    </div>
+                  );
+                }
+
+                // Multiple items section
+                return (
+                  <div key={section.title} className="space-y-3">
+                    <h3 className="px-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                      {section.title}
+                    </h3>
+                    <div className="space-y-1">
+                      {section.items.map((item) => (
+                        <Link
+                          key={item.path}
+                          href={item.path}
+                          className={`block px-4 py-3 rounded-lg text-base font-medium transition-colors ${
+                            isActive(item.path)
+                              ? 'bg-accent text-accent-foreground'
+                              : 'text-foreground hover:bg-accent hover:text-accent-foreground'
+                          }`}
+                          onClick={handleNavigate}
+                        >
+                          {item.label}
+                        </Link>
+                      ))}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+
+            {/* Bottom spacer */}
+            <div className="h-20"></div>
+          </div>
+        </div>
+      </div>
+    </>,
+    document.body
+  );
+}