@djangocfg/layouts 2.1.19 → 2.1.21

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

@@ -0,0 +1,77 @@
+/**
+ * Footer Project Info Component
+ */
+
+'use client';
+
+import React from 'react';
+import type { LucideIcon } from 'lucide-react';
+import { DjangoCFGLogo } from './DjangoCFGLogo';
+import { FooterSocialLinksComponent } from './FooterSocialLinks';
+import type { FooterSocialLinks } from './types';
+
+export interface FooterProjectInfoProps {
+  siteName: string;
+  description?: string;
+  logo?: string;
+  badge?: {
+    icon: LucideIcon;
+    text: string;
+  };
+  socialLinks?: FooterSocialLinks;
+  variant?: 'mobile' | 'desktop';
+}
+
+export function FooterProjectInfo({
+  siteName,
+  description,
+  logo,
+  badge,
+  socialLinks,
+  variant = 'desktop',
+}: FooterProjectInfoProps) {
+  const isMobile = variant === 'mobile';
+
+  return (
+    <div className={isMobile ? 'text-center space-y-4 mb-6' : 'space-y-4 lg:flex-shrink-0 lg:w-80'}>
+      <div className={isMobile ? 'flex items-center justify-center gap-2' : 'flex items-center gap-2'}>
+        {logo ? (
+          <div className={isMobile ? 'w-6 h-6 flex items-center justify-center' : 'w-8 h-8 flex items-center justify-center'}>
+            <img
+              src={logo}
+              alt={`${siteName} Logo`}
+              className="w-full h-full object-contain"
+            />
+          </div>
+        ) : (
+          <DjangoCFGLogo size={isMobile ? 24 : 32} className="text-foreground" />
+        )}
+        <span className={isMobile ? 'text-lg font-bold text-foreground' : 'text-xl font-bold text-foreground'}>
+          {siteName}
+        </span>
+      </div>
+
+      {description && (
+        <p className={isMobile ? 'text-muted-foreground text-sm leading-relaxed max-w-md mx-auto' : 'text-muted-foreground text-sm leading-relaxed'}>
+          {description}
+        </p>
+      )}
+
+      {badge && !isMobile && (
+        <div className="pt-2">
+          <span className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-gradient-to-r from-primary/80 to-secondary/60 border border-primary/30 shadow-brand text-xs font-semibold text-primary-foreground">
+            <badge.icon className="w-4 h-4" />
+            {badge.text}
+          </span>
+        </div>
+      )}
+
+      {socialLinks && (
+        <FooterSocialLinksComponent
+          socialLinks={socialLinks}
+          className={isMobile ? 'flex justify-center space-x-6' : 'flex space-x-4 pt-4'}
+        />
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,82 @@
+/**
+ * Footer Social Links Component
+ */
+
+'use client';
+
+import React from 'react';
+import {
+  Github,
+  Linkedin,
+  Twitter,
+  MessageCircle,
+  Youtube,
+  Facebook,
+  Instagram,
+  Mail,
+  MessageSquare,
+} from 'lucide-react';
+import type { FooterSocialLinks } from './types';
+
+export interface FooterSocialLinksProps {
+  socialLinks?: FooterSocialLinks;
+  className?: string;
+  iconClassName?: string;
+}
+
+const socialIconsMap = {
+  github: { icon: Github, title: 'GitHub' },
+  linkedin: { icon: Linkedin, title: 'LinkedIn' },
+  twitter: { icon: Twitter, title: 'Twitter' },
+  telegram: { icon: MessageCircle, title: 'Telegram' },
+  youtube: { icon: Youtube, title: 'YouTube' },
+  facebook: { icon: Facebook, title: 'Facebook' },
+  instagram: { icon: Instagram, title: 'Instagram' },
+  whatsapp: { icon: MessageSquare, title: 'WhatsApp' },
+  email: { icon: Mail, title: 'Email' },
+} as const;
+
+export function FooterSocialLinksComponent({
+  socialLinks,
+  className = 'flex space-x-4',
+  iconClassName = 'w-5 h-5',
+}: FooterSocialLinksProps) {
+  // Prepare social links data BEFORE render
+  const socialLinksData = socialLinks
+    ? Object.entries(socialLinks)
+        .filter(([_, url]) => url)
+        .map(([platform, url]) => {
+          const social = socialIconsMap[platform as keyof typeof socialIconsMap];
+          if (!social) return null;
+          return {
+            platform,
+            url: url!,
+            icon: social.icon,
+            title: social.title,
+          };
+        })
+        .filter((item): item is NonNullable<typeof item> => item !== null)
+    : [];
+
+  if (socialLinksData.length === 0) return null;
+
+  return (
+    <div className={className}>
+      {socialLinksData.map((social) => {
+        const Icon = social.icon;
+        return (
+          <a
+            key={social.platform}
+            href={social.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-muted-foreground hover:text-primary transition-colors"
+            title={social.title}
+          >
+            <Icon className={iconClassName} />
+          </a>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,129 @@
+/**
+ * Public Layout Footer
+ *
+ * Professional, flexible footer component for PublicLayout
+ * Supports desktop/mobile responsive layouts, social links, menu sections
+ */
+
+'use client';
+
+import React from 'react';
+import Link from 'next/link';
+import { useIsMobile } from '@djangocfg/ui-nextjs/hooks';
+import { FooterProjectInfo } from './FooterProjectInfo';
+import { FooterMenuSections } from './FooterMenuSections';
+import { FooterBottom } from './FooterBottom';
+import type { PublicFooterProps } from './types';
+
+export function PublicFooter({
+  siteName,
+  description,
+  logo,
+  badge,
+  socialLinks,
+  links = [],
+  menuSections = [],
+  copyright: copyrightProp,
+  credits: creditsProp,
+  variant = 'full',
+}: PublicFooterProps) {
+  const isMobile = useIsMobile();
+
+  // Prepare data BEFORE render
+  const currentYear = new Date().getFullYear();
+  const copyright = copyrightProp || `© ${currentYear} ${siteName}. All rights reserved.`;
+  const credits = creditsProp || {
+    text: 'Built with DjangoCFG',
+    url: 'https://djangocfg.com',
+  };
+
+  // Simple variant - minimal footer
+  if (variant === 'simple') {
+    return (
+      <footer className="bg-background border-t border-border mt-auto">
+        <div className="w-full px-4 py-4">
+          <div className="text-center">
+            <div className="text-sm text-muted-foreground">{copyright}</div>
+          </div>
+        </div>
+      </footer>
+    );
+  }
+
+  // Mobile Footer
+  if (isMobile) {
+    return (
+      <footer className="lg:hidden bg-background border-t border-border mt-auto">
+        <div className="w-full px-4 py-8">
+          <FooterProjectInfo
+            siteName={siteName}
+            description={description}
+            logo={logo}
+            socialLinks={socialLinks}
+            variant="mobile"
+          />
+
+          {/* Quick Links */}
+          {links.length > 0 && (
+            <div className="flex flex-wrap justify-center gap-3 mb-6">
+              {links.map((link) =>
+                link.external ? (
+                  <a
+                    key={link.path}
+                    href={link.path}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-xs text-muted-foreground hover:text-primary transition-colors"
+                  >
+                    {link.label}
+                  </a>
+                ) : (
+                  <Link
+                    key={link.path}
+                    href={link.path}
+                    className="text-xs text-muted-foreground hover:text-primary transition-colors"
+                  >
+                    {link.label}
+                  </Link>
+                )
+              )}
+            </div>
+          )}
+
+          <FooterBottom
+            copyright={copyright}
+            credits={credits}
+            variant="mobile"
+          />
+        </div>
+      </footer>
+    );
+  }
+
+  // Desktop Footer
+  return (
+    <footer className="max-lg:hidden bg-background border-t border-border mt-auto">
+      <div className="w-full px-4 sm:px-6 lg:px-8 py-12">
+        <div className="flex flex-col lg:flex-row gap-8 lg:gap-12">
+          <FooterProjectInfo
+            siteName={siteName}
+            description={description}
+            logo={logo}
+            badge={badge}
+            socialLinks={socialLinks}
+            variant="desktop"
+          />
+
+          <FooterMenuSections menuSections={menuSections} />
+        </div>
+
+        <FooterBottom
+          copyright={copyright}
+          credits={credits}
+          links={links}
+          variant="desktop"
+        />
+      </div>
+    </footer>
+  );
+}

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

@@ -0,0 +1,17 @@
+/**
+ * Public Footer Exports
+ */
+
+export { PublicFooter } from './PublicFooter';
+export { FooterProjectInfo } from './FooterProjectInfo';
+export { FooterMenuSections } from './FooterMenuSections';
+export { FooterBottom } from './FooterBottom';
+export { FooterSocialLinksComponent } from './FooterSocialLinks';
+export { DjangoCFGLogo } from './DjangoCFGLogo';
+
+export type {
+  PublicFooterProps,
+  FooterLink,
+  FooterMenuSection,
+  FooterSocialLinks,
+} from './types';

package/src/layouts/PublicLayout/components/PublicFooter/types.ts

@@ -0,0 +1,57 @@
+/**
+ * Public Footer Types
+ */
+
+import type { LucideIcon } from 'lucide-react';
+
+export interface FooterLink {
+  label: string;
+  path: string;
+  external?: boolean;
+}
+
+export interface FooterMenuSection {
+  title: string;
+  items: FooterLink[];
+}
+
+export interface FooterSocialLinks {
+  github?: string;
+  linkedin?: string;
+  twitter?: string;
+  telegram?: string;
+  youtube?: string;
+  facebook?: string;
+  instagram?: string;
+  whatsapp?: string;
+  email?: string;
+}
+
+export interface PublicFooterProps {
+  /** Project name */
+  siteName: string;
+  /** Project description */
+  description?: string;
+  /** Logo path or URL */
+  logo?: string;
+  /** Optional badge */
+  badge?: {
+    icon: LucideIcon;
+    text: string;
+  };
+  /** Social media links */
+  socialLinks?: FooterSocialLinks;
+  /** Quick links (bottom bar) */
+  links?: FooterLink[];
+  /** Footer menu sections (desktop grid) */
+  menuSections?: FooterMenuSection[];
+  /** Copyright text (auto-generated if not provided) */
+  copyright?: string;
+  /** Credits */
+  credits?: {
+    text: string;
+    url?: string;
+  };
+  /** Variant: full (with all sections) or simple (minimal) */
+  variant?: 'full' | 'simple';
+}

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

@@ -20,7 +20,7 @@ import {
 import { ThemeToggle } from '@djangocfg/ui-nextjs/theme';
 import { useAuth } from '@djangocfg/api/auth';
 import { UserMenu } from '../../_components/UserMenu';
-import type { NavigationItem } from '../PublicLayout';
+import type { NavigationItem, UserMenuConfig } from '../../shared/types';
 
 interface PublicMobileDrawerProps {
   isOpen: boolean;
@@ -28,11 +28,7 @@ interface PublicMobileDrawerProps {
   logo?: string;
   siteName: string;
   navigation: NavigationItem[];
-  userMenu?: {
-    profilePath?: string;
-    dashboardPath?: string;
-    authPath?: string;
-  };
+  userMenu?: UserMenuConfig;
 }
 
 export function PublicMobileDrawer({
@@ -83,6 +79,7 @@ export function PublicMobileDrawer({
           {/* User Menu */}
           <UserMenu
             variant="mobile"
+            groups={userMenu?.groups}
             profilePath={userMenu?.profilePath}
             dashboardPath={userMenu?.dashboardPath}
             authPath={userMenu?.authPath}

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

@@ -15,17 +15,13 @@ import { cn } from '@djangocfg/ui-nextjs/lib';
 import { useIsMobile } from '@djangocfg/ui-nextjs/hooks';
 import { useAuth } from '@djangocfg/api/auth';
 import { UserMenu } from '../../_components/UserMenu';
-import type { NavigationItem } from '../PublicLayout';
+import type { NavigationItem, UserMenuConfig } from '../../shared/types';
 
 interface PublicNavigationProps {
   logo?: string;
   siteName: string;
   navigation: NavigationItem[];
-  userMenu?: {
-    profilePath?: string;
-    dashboardPath?: string;
-    authPath?: string;
-  };
+  userMenu?: UserMenuConfig;
   onMobileMenuClick: () => void;
 }
 
@@ -74,6 +70,7 @@ export function PublicNavigation({
                 {/* User Menu */}
                 <UserMenu
                   variant="desktop"
+                  groups={userMenu?.groups}
                   profilePath={userMenu?.profilePath}
                   dashboardPath={userMenu?.dashboardPath}
                   authPath={userMenu?.authPath}

package/src/layouts/PublicLayout/index.ts

@@ -3,5 +3,16 @@
  */
 
 export { PublicLayout } from './PublicLayout';
-export type { PublicLayoutProps, NavigationItem, FooterConfig } from './PublicLayout';
+export type { PublicLayoutProps } from './PublicLayout';
+export {
+  PublicFooter,
+  FooterProjectInfo,
+  FooterMenuSections,
+  FooterBottom,
+  FooterSocialLinksComponent,
+  DjangoCFGLogo,
+} from './components/PublicFooter';
+export type {
+  PublicFooterProps,
+} from './components/PublicFooter';
 

package/src/layouts/_components/UserMenu.tsx

@@ -1,15 +1,38 @@
 /**
  * User Menu Component for Layouts
  *
- * Simplified user menu component that works without AppContext
- * Uses only useAuth() hook
+ * Flexible user menu component with group-based structure (like footer)
+ * Uses useAuth() hook for authentication state
+ *
+ * @example
+ * ```tsx
+ * import { Settings, LogOut, User } from 'lucide-react';
+ *
+ * <UserMenu
+ *   groups={[
+ *     {
+ *       title: 'Account',
+ *       items: [
+ *         { label: 'Profile', href: '/profile', icon: Settings },
+ *         { label: 'Dashboard', href: '/dashboard', icon: User }
+ *       ]
+ *     },
+ *     {
+ *       items: [
+ *         { label: 'Sign Out', onClick: () => logout(), icon: LogOut, variant: 'destructive' }
+ *       ]
+ *     }
+ *   ]}
+ *   authPath="/auth"
+ * />
+ * ```
  */
 
 'use client';
 
 import React from 'react';
 import Link from 'next/link';
-import { User, LogOut, Settings } from 'lucide-react';
+import { LogOut, Settings } from 'lucide-react';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -24,18 +47,26 @@ import {
   Button,
 } from '@djangocfg/ui-nextjs/components';
 import { useAuth } from '@djangocfg/api/auth';
+import type { UserMenuGroup } from '../shared/types';
 
 export interface UserMenuProps {
+  /** Display variant */
   variant?: 'desktop' | 'mobile';
+  /** Menu groups for authenticated users */
+  groups?: UserMenuGroup[];
+  /** Auth page path (for sign in button) */
+  authPath?: string;
+  /** @deprecated Use groups instead - Profile page path (backward compatibility) */
   profilePath?: string;
+  /** @deprecated Use groups instead - Dashboard page path (backward compatibility) */
   dashboardPath?: string;
-  authPath?: string;
 }
 
 export function UserMenu({
   variant = 'desktop',
-  profilePath = '/profile',
-  dashboardPath = '/dashboard',
+  groups,
+  profilePath = '/private/profile',
+  dashboardPath = '/private',
   authPath = '/auth',
 }: UserMenuProps) {
   const { user, isAuthenticated, logout } = useAuth();
@@ -49,6 +80,41 @@ export function UserMenu({
     return null;
   }
 
+  // Prepare menu groups (new groups prop or fallback to legacy props)
+  const menuGroups: UserMenuGroup[] = React.useMemo(() => {
+    if (groups && groups.length > 0) {
+      return groups;
+    }
+
+    // Fallback to legacy behavior for backward compatibility
+    const legacyGroups: UserMenuGroup[] = [];
+
+    if (profilePath) {
+      legacyGroups.push({
+        items: [
+          {
+            label: 'Profile',
+            href: profilePath,
+            icon: Settings,
+          },
+        ],
+      });
+    }
+
+    legacyGroups.push({
+      items: [
+        {
+          label: 'Sign Out',
+          onClick: () => logout(),
+          icon: LogOut,
+          variant: 'destructive',
+        },
+      ],
+    });
+
+    return legacyGroups;
+  }, [groups, profilePath, logout]);
+
   if (!isAuthenticated || !user) {
     // Guest user - show sign in button
     if (variant === 'mobile') {
@@ -92,22 +158,50 @@ export function UserMenu({
           </div>
         </div>
         <div className="space-y-1">
-          {profilePath && (
-            <Link
-              href={profilePath}
-              className="flex items-center gap-3 px-4 py-3 text-sm font-medium text-foreground hover:bg-accent hover:text-accent-foreground rounded-sm transition-colors"
-            >
-              <Settings className="h-4 w-4" />
-              Profile
-            </Link>
-          )}
-          <button
-            onClick={() => logout()}
-            className="flex items-center gap-3 px-4 py-3 text-sm font-medium text-destructive hover:bg-destructive/10 rounded-sm transition-colors w-full text-left"
-          >
-            <LogOut className="h-4 w-4" />
-            Sign Out
-          </button>
+          {menuGroups.map((group, groupIndex) => (
+            <div key={groupIndex}>
+              {group.title && (
+                <div className="px-4 py-2">
+                  <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+                    {group.title}
+                  </p>
+                </div>
+              )}
+              {group.items.map((item, itemIndex) => {
+                const Icon = item.icon;
+                const isDestructive = item.variant === 'destructive';
+                const baseClasses = `flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-sm transition-colors w-full text-left ${
+                  isDestructive
+                    ? 'text-destructive hover:bg-destructive/10'
+                    : 'text-foreground hover:bg-accent hover:text-accent-foreground'
+                }`;
+
+                if (item.onClick) {
+                  return (
+                    <button
+                      key={itemIndex}
+                      onClick={item.onClick}
+                      className={baseClasses}
+                    >
+                      {Icon && <Icon className="h-4 w-4" />}
+                      {item.label}
+                    </button>
+                  );
+                }
+
+                if (item.href) {
+                  return (
+                    <Link key={itemIndex} href={item.href} className={baseClasses}>
+                      {Icon && <Icon className="h-4 w-4" />}
+                      {item.label}
+                    </Link>
+                  );
+                }
+
+                return null;
+              })}
+            </div>
+          ))}
         </div>
       </div>
     );
@@ -135,24 +229,51 @@ export function UserMenu({
           </div>
         </DropdownMenuLabel>
         <DropdownMenuSeparator />
-        <DropdownMenuGroup>
-          {profilePath && (
-            <DropdownMenuItem asChild>
-              <Link href={profilePath} className="flex items-center">
-                <Settings className="mr-2 h-4 w-4" />
-                <span>Profile</span>
-              </Link>
-            </DropdownMenuItem>
-          )}
-        </DropdownMenuGroup>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem
-          onClick={() => logout()}
-          className="text-destructive focus:text-destructive"
-        >
-          <LogOut className="mr-2 h-4 w-4" />
-          <span>Sign Out</span>
-        </DropdownMenuItem>
+        {menuGroups.map((group, groupIndex) => (
+          <React.Fragment key={groupIndex}>
+            {groupIndex > 0 && <DropdownMenuSeparator />}
+            <DropdownMenuGroup>
+              {group.title && (
+                <DropdownMenuLabel className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+                  {group.title}
+                </DropdownMenuLabel>
+              )}
+              {group.items.map((item, itemIndex) => {
+                const Icon = item.icon;
+                const isDestructive = item.variant === 'destructive';
+
+                if (item.onClick) {
+                  return (
+                    <DropdownMenuItem
+                      key={itemIndex}
+                      onClick={item.onClick}
+                      className={isDestructive ? 'text-destructive focus:text-destructive' : ''}
+                    >
+                      {Icon && <Icon className="mr-2 h-4 w-4" />}
+                      <span>{item.label}</span>
+                    </DropdownMenuItem>
+                  );
+                }
+
+                if (item.href) {
+                  return (
+                    <DropdownMenuItem key={itemIndex} asChild>
+                      <Link
+                        href={item.href}
+                        className={`flex items-center ${isDestructive ? 'text-destructive' : ''}`}
+                      >
+                        {Icon && <Icon className="mr-2 h-4 w-4" />}
+                        <span>{item.label}</span>
+                      </Link>
+                    </DropdownMenuItem>
+                  );
+                }
+
+                return null;
+              })}
+            </DropdownMenuGroup>
+          </React.Fragment>
+        ))}
       </DropdownMenuContent>
     </DropdownMenu>
   );