@djangocfg/layouts 2.1.249 → 2.1.251

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

@@ -12,7 +12,6 @@ import React, { useEffect, useState } from 'react';
 import { Laptop, Moon, Sun } from 'lucide-react';
 
 import { Button } from '@djangocfg/ui-core/components';
-import { useIsMobile } from '@djangocfg/ui-core/hooks';
 import { useThemeContext } from '@djangocfg/ui-nextjs/theme';
 
 import { LocaleSwitcher } from '../../../_components/LocaleSwitcher';
@@ -71,33 +70,36 @@ function ThemeModeControl() {
 }
 
 export function PublicFooter({
-  siteName,
+  projectInfo,
   description,
-  logo,
   badge,
   socialLinks,
   links = [],
   menuSections = [],
+  showProjectInfo = true,
+  menuColumnMinWidth = 180,
+  menuMaxColumns = 5,
   copyright: copyrightProp,
   credits: creditsProp,
   variant = 'full',
   containerClassName,
   i18n,
 }: 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',
-  };
+  const copyright = copyrightProp || `© ${currentYear}. All rights reserved.`;
+  const credits = creditsProp;
 
   // Simple variant - minimal footer
   if (variant === 'simple') {
     return (
-      <footer className="bg-background border-t border-border mt-auto">
+      <footer
+        className="border-t border-border/60 mt-auto"
+        style={{
+          background: 'linear-gradient(to bottom, hsl(var(--accent) / 0.26), hsl(var(--background) / 0.97) 42%, hsl(var(--accent) / 0.34))',
+          boxShadow: 'inset 0 1px 0 hsl(var(--border) / 0.75), inset 0 14px 26px hsl(var(--accent) / 0.18)',
+        }}
+      >
         <div className={`mx-auto px-4 py-4 ${containerClassName || 'w-full'}`}>
           <div className="text-center">
             <div className="text-sm text-muted-foreground">{copyright}</div>
@@ -110,17 +112,22 @@ export function PublicFooter({
   // Compact variant - single line with logo and links
   if (variant === 'compact') {
     return (
-      <footer className="bg-background border-t border-border mt-auto">
+      <footer
+        className="border-t border-border/60 mt-auto"
+        style={{
+          background: 'linear-gradient(to bottom, hsl(var(--accent) / 0.26), hsl(var(--background) / 0.97) 42%, hsl(var(--accent) / 0.34))',
+          boxShadow: 'inset 0 1px 0 hsl(var(--border) / 0.75), inset 0 14px 26px hsl(var(--accent) / 0.18)',
+        }}
+      >
         <div className={`mx-auto px-4 sm:px-6 lg:px-8 py-8 ${containerClassName || 'w-full'}`}>
           {/* Main row: logo left, links right */}
           <div className="flex flex-col sm:flex-row items-center justify-between gap-6">
             {/* Logo + Name */}
-            <div className="flex items-center gap-3">
-              {logo && (
-                <img src={logo} alt={siteName} className="h-8 w-8" />
-              )}
-              <span className="text-lg font-semibold text-foreground">{siteName}</span>
-            </div>
+            {projectInfo ?? (
+              <div className="flex items-center gap-3">
+                <span className="text-lg font-semibold text-foreground">Project</span>
+              </div>
+            )}
 
             {/* Links */}
             {links.length > 0 && (
@@ -153,17 +160,19 @@ export function PublicFooter({
           {/* Bottom row: copyright + credits */}
           <div className="mt-6 pt-6 border-t border-border flex flex-col sm:flex-row items-center justify-between gap-3 text-sm text-muted-foreground">
             <span>{copyright}</span>
-            {credits.url ? (
-              <a
-                href={credits.url}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="hover:text-primary transition-colors"
-              >
-                {credits.text}
-              </a>
-            ) : (
-              <span>{credits.text}</span>
+            {credits && (
+              credits.url ? (
+                <a
+                  href={credits.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="hover:text-primary transition-colors"
+                >
+                  {credits.text}
+                </a>
+              ) : (
+                <span>{credits.text}</span>
+              )
             )}
           </div>
         </div>
@@ -171,18 +180,25 @@ export function PublicFooter({
     );
   }
 
-  // Mobile Footer
-  if (isMobile) {
-    return (
-      <footer className="lg:hidden bg-background border-t border-border mt-auto">
+  return (
+    <>
+      <footer
+        className="lg:hidden border-t border-border/60 mt-auto"
+        style={{
+          background: 'linear-gradient(to bottom, hsl(var(--accent) / 0.26), hsl(var(--background) / 0.97) 42%, hsl(var(--accent) / 0.34))',
+          boxShadow: 'inset 0 1px 0 hsl(var(--border) / 0.75), inset 0 14px 26px hsl(var(--accent) / 0.18)',
+        }}
+      >
         <div className={`mx-auto px-4 py-8 ${containerClassName || 'w-full'}`}>
-          <FooterProjectInfo
-            siteName={siteName}
-            description={description}
-            logo={logo}
-            socialLinks={socialLinks}
-            variant="mobile"
-          />
+          {showProjectInfo && (
+            projectInfo ?? (
+              <FooterProjectInfo
+                description={description}
+                socialLinks={socialLinks}
+                variant="mobile"
+              />
+            )
+          )}
 
           {/* Quick Links */}
           {links.length > 0 && (
@@ -213,15 +229,17 @@ export function PublicFooter({
 
           <div className="border-t border-border mt-6 pt-4 space-y-3">
             <div className="text-xs text-muted-foreground text-center">{copyright}</div>
-            <div className="text-xs text-muted-foreground text-center">
-              {credits.url ? (
-                <a href={credits.url} target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors">
-                  {credits.text}
-                </a>
-              ) : (
-                credits.text
-              )}
-            </div>
+            {credits && (
+              <div className="text-xs text-muted-foreground text-center">
+                {credits.url ? (
+                  <a href={credits.url} target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors">
+                    {credits.text}
+                  </a>
+                ) : (
+                  credits.text
+                )}
+              </div>
+            )}
           </div>
 
           <div className="mt-5 pt-4 border-t border-border/60 flex items-center justify-center gap-2">
@@ -239,69 +257,72 @@ export function PublicFooter({
           </div>
         </div>
       </footer>
-    );
-  }
-
-  // Desktop Footer
-  return (
-    <footer
-      className="max-lg:hidden border-t border-border/50 mt-auto"
-      style={{ backgroundColor: 'hsl(var(--background) / 0.94)' }}
-    >
-      <div className={`mx-auto px-6 sm:px-8 lg:px-10 py-14 ${containerClassName || 'w-full'}`}>
-        <div className="grid grid-cols-12 gap-10 lg:gap-14">
-          <div className="col-span-12 lg:col-span-4">
-          <FooterProjectInfo
-            siteName={siteName}
-            description={description}
-            logo={logo}
-            badge={badge}
-            socialLinks={socialLinks}
-            variant="desktop"
-          />
-          </div>
+      <footer
+        className="max-lg:hidden border-t border-border/60 mt-auto"
+        style={{
+          background: 'linear-gradient(to bottom, hsl(var(--accent) / 0.26), hsl(var(--background) / 0.97) 42%, hsl(var(--accent) / 0.34))',
+          boxShadow: 'inset 0 1px 0 hsl(var(--border) / 0.75), inset 0 14px 26px hsl(var(--accent) / 0.18)',
+        }}
+      >
+        <div className={`mx-auto px-6 sm:px-8 lg:px-10 py-14 ${containerClassName || 'w-full'}`}>
+          <div className="grid grid-cols-12 gap-10 lg:gap-14">
+            {showProjectInfo && (
+              <div className="col-span-12 lg:col-span-4">
+                {projectInfo ?? (
+                  <FooterProjectInfo
+                    description={description}
+                    badge={badge}
+                    socialLinks={socialLinks}
+                    variant="desktop"
+                  />
+                )}
+              </div>
+            )}
 
-          <div className="col-span-12 lg:col-span-8 lg:pl-8">
-          <FooterMenuSections menuSections={menuSections} />
+            <div className={showProjectInfo ? 'col-span-12 lg:col-span-8 lg:pl-8' : 'col-span-12'}>
+              <FooterMenuSections
+                menuSections={menuSections}
+                minColumnWidth={menuColumnMinWidth}
+                maxColumns={menuMaxColumns}
+              />
+            </div>
           </div>
-        </div>
 
-        <div className="mt-12 pt-5 border-t border-border/60 flex items-center justify-between gap-8">
-          <div className="text-xs text-muted-foreground shrink-0">{copyright}</div>
+          <div className="mt-12 pt-5 border-t border-border/60 grid grid-cols-1 lg:grid-cols-[1fr_auto_1fr] items-center gap-4 lg:gap-6">
+            <div className="text-xs text-muted-foreground text-center lg:text-left lg:justify-self-start">
+              {copyright}
+            </div>
 
-          <div className="flex-1 flex items-center justify-center min-w-0">
-            {credits.url ? (
-              <a href={credits.url} target="_blank" rel="noopener noreferrer" className="text-xs text-muted-foreground hover:text-foreground transition-colors whitespace-nowrap">
-                {credits.text}
-              </a>
-            ) : (
-              <span className="text-xs text-muted-foreground whitespace-nowrap">{credits.text}</span>
-            )}
-          </div>
+            <div className="min-w-0 flex items-center justify-center gap-3 text-xs text-muted-foreground flex-wrap">
+              {credits && (
+                credits.url ? (
+                  <a href={credits.url} target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors whitespace-nowrap">
+                    {credits.text}
+                  </a>
+                ) : (
+                  <span className="whitespace-nowrap">{credits.text}</span>
+                )
+              )}
+              {links.length > 0 && links.map((link) =>
+                link.external ? (
+                  <a
+                    key={link.path}
+                    href={link.path}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="hover:text-foreground transition-colors whitespace-nowrap"
+                  >
+                    {link.label}
+                  </a>
+                ) : (
+                  <Link key={link.path} href={link.path} className="hover:text-foreground transition-colors whitespace-nowrap">
+                    {link.label}
+                  </Link>
+                )
+              )}
+            </div>
 
-          <div className="flex flex-col items-end gap-2 shrink-0">
-            {links.length > 0 && (
-              <div className="flex items-center gap-2 text-xs text-muted-foreground">
-                {links.map((link) =>
-                  link.external ? (
-                    <a
-                      key={link.path}
-                      href={link.path}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="hover:text-foreground transition-colors whitespace-nowrap"
-                    >
-                      {link.label}
-                    </a>
-                  ) : (
-                    <Link key={link.path} href={link.path} className="hover:text-foreground transition-colors whitespace-nowrap">
-                      {link.label}
-                    </Link>
-                  )
-                )}
-              </div>
-            )}
-            <div className="flex items-center gap-2">
+            <div className="flex items-center justify-center lg:justify-self-end gap-2">
               <ThemeModeControl />
               {i18n && (
                 <LocaleSwitcher
@@ -316,7 +337,7 @@ export function PublicFooter({
             </div>
           </div>
         </div>
-      </div>
-    </footer>
+      </footer>
+    </>
   );
 }

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

@@ -3,6 +3,7 @@
  */
 
 import type { LucideIcon } from 'lucide-react';
+import type { ReactNode } from 'react';
 import type { I18nLayoutConfig } from '../../../AppLayout/AppLayout';
 
 export interface FooterLink {
@@ -29,12 +30,10 @@ export interface FooterSocialLinks {
 }
 
 export interface PublicFooterProps {
-  /** Project name */
-  siteName: string;
+  /** Custom project/brand block node (full control over footer brand area) */
+  projectInfo?: ReactNode;
   /** Project description */
   description?: string;
-  /** Logo path or URL */
-  logo?: string;
   /** Optional badge */
   badge?: {
     icon: LucideIcon;
@@ -46,6 +45,12 @@ export interface PublicFooterProps {
   links?: FooterLink[];
   /** Footer menu sections (desktop grid) */
   menuSections?: FooterMenuSection[];
+  /** Show brand block (logo + project info) in footer */
+  showProjectInfo?: boolean;
+  /** Minimum width in pixels for each footer menu column */
+  menuColumnMinWidth?: number;
+  /** Soft max column count for menu grid */
+  menuMaxColumns?: number;
   /** Copyright text (auto-generated if not provided) */
   copyright?: string;
   /** Credits */

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

@@ -13,6 +13,7 @@ import React, { useMemo } from 'react';
 import { useAuth } from '@djangocfg/api/auth';
 import { useAppT } from '@djangocfg/i18n';
 import { Button } from '@djangocfg/ui-core/components';
+import { usePathnameWithoutLocale } from '../../../hooks';
 
 import { UserMenu } from '../../_components/UserMenu';
 import { usePublicLayoutOptional } from '../context';
@@ -32,10 +33,11 @@ export function PublicMobileDrawer(props: PublicMobileDrawerProps = {}) {
   const context = usePublicLayoutOptional();
   const mobileMenuOpen = props.isOpen ?? context?.mobileMenuOpen ?? false;
   const closeMobileMenu = props.onClose ?? context?.closeMobileMenu ?? (() => {});
-  const navigation = props.navigation ?? context?.navigation ?? [];
-  const userMenu = props.userMenu ?? context?.userMenu;
-  const containerClassName = props.containerClassName ?? context?.containerClassName;
+  const navigation = props.navigation ?? [];
+  const userMenu = props.userMenu;
+  const containerClassName = props.containerClassName;
   const { isAuthenticated } = useAuth();
+  const pathname = usePathnameWithoutLocale();
   const t = useAppT();
   const { isRendered, isActive, onTransitionEnd } = useFloatingPanel({
     isOpen: mobileMenuOpen,
@@ -48,6 +50,17 @@ export function PublicMobileDrawer(props: PublicMobileDrawerProps = {}) {
     signIn: t('layouts.profile.login'),
   }), [t]);
 
+  const mobileNavigation = useMemo(() => {
+    const hasHome = navigation.some((item) => item.href === '/');
+    if (hasHome) return navigation;
+    return [{ label: 'Home', href: '/' }, ...navigation];
+  }, [navigation]);
+
+  const isActivePath = (href: string) => {
+    if (href === '/') return pathname === '/';
+    return pathname === href || pathname.startsWith(`${href}/`);
+  };
+
   if (!isRendered) return null;
 
   return (
@@ -60,15 +73,22 @@ export function PublicMobileDrawer(props: PublicMobileDrawerProps = {}) {
           onClick={closeMobileMenu}
         />
       )}
-      <div className="fixed inset-x-0 top-20 z-1000 lg:hidden px-4 sm:px-6 lg:px-8">
+      <div
+        className="fixed inset-x-0 z-1000 lg:hidden px-4 sm:px-6 lg:px-8"
+        style={{ top: 'var(--public-navbar-mobile-drawer-top, 5rem)' }}
+      >
         <div
           onTransitionEnd={onTransitionEnd}
-          className={`mx-auto w-full max-h-[80vh] rounded-2xl border border-border/60 bg-background/95 backdrop-blur-xl shadow-2xl overflow-hidden flex flex-col transform-gpu will-change-transform transition-[transform,opacity] duration-[220ms] ease-out ${containerClassName || ''} ${
+          className={`mx-auto w-full rounded-2xl border border-border/60 bg-background/95 backdrop-blur-xl shadow-2xl overflow-hidden flex flex-col transform-gpu will-change-transform transition-[transform,opacity] duration-[220ms] ease-out ${containerClassName || ''} ${
             isActive
               ? 'opacity-100 translate-y-0 scale-100'
               : 'opacity-0 -translate-y-2 scale-[0.985] pointer-events-none'
           }`}
-          style={{ backgroundColor: 'hsl(var(--background) / 0.72)', backdropFilter: 'blur(10px)' }}
+          style={{
+            maxHeight: 'min(var(--public-navbar-mobile-drawer-max-height, calc(100dvh - 5rem - 12px)), calc(100dvh - 12px))',
+            backgroundColor: 'hsl(var(--background) / 0.72)',
+            backdropFilter: 'blur(10px)',
+          }}
         >
           {/* Scrollable content */}
           <div className="flex-1 min-h-0 overflow-y-auto px-4 py-4 space-y-5">
@@ -92,12 +112,16 @@ export function PublicMobileDrawer(props: PublicMobileDrawerProps = {}) {
             </h3>
           </div>
           <div className="space-y-1">
-            {navigation.map((item) => (
+            {mobileNavigation.map((item) => (
               <div key={item.href}>
                 <Link
                   href={item.href}
                   onClick={closeMobileMenu}
-                  className="block px-3 py-2.5 rounded-lg text-[15px] font-medium transition-colors text-foreground hover:bg-accent/70 hover:text-accent-foreground"
+                  className={`block px-3 py-2.5 rounded-lg text-[15px] font-medium transition-colors ${
+                    isActivePath(item.href)
+                      ? 'bg-accent/55 text-foreground'
+                      : 'text-foreground hover:bg-accent/70 hover:text-accent-foreground'
+                  }`}
                 >
                   {item.label}
                 </Link>

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

@@ -0,0 +1,74 @@
+'use client';
+
+import React from 'react';
+
+import { PublicMobileDrawer } from './PublicMobileDrawer';
+import { PublicNavigation } from './PublicNavigation';
+
+import type { NavigationItem, UserMenuConfig } from '../../types';
+import type {
+  PublicDesktopDropdownRenderer,
+  PublicNavbarPosition,
+  PublicNavbarVariant,
+} from './PublicNavigation';
+
+export interface PublicNavbarConfig {
+  brand?: React.ReactNode;
+  brandHref?: string;
+  logo?: string;
+  siteName?: string;
+  navigation?: NavigationItem[];
+  userMenu?: UserMenuConfig;
+  containerClassName?: string;
+  navbarVariant?: PublicNavbarVariant;
+  navbarPosition?: PublicNavbarPosition;
+  renderDesktopDropdown?: PublicDesktopDropdownRenderer;
+  desktopMaxPrimaryItems?: number;
+}
+
+export interface PublicNavbarProps extends PublicNavbarConfig {
+  /**
+   * Preferred API: pass everything as a single config object.
+   * Flat props are still supported and override `config`.
+   */
+  config?: PublicNavbarConfig;
+}
+
+export function PublicNavbar(props: PublicNavbarProps = {}) {
+  const cfg = props.config ?? {};
+  const brand = props.brand ?? cfg.brand;
+  const brandHref = props.brandHref ?? cfg.brandHref;
+  const logo = props.logo ?? cfg.logo;
+  const siteName = props.siteName ?? cfg.siteName;
+  const navigation = props.navigation ?? cfg.navigation ?? [];
+  const userMenu = props.userMenu ?? cfg.userMenu;
+  const containerClassName = props.containerClassName ?? cfg.containerClassName;
+  const navbarVariant = props.navbarVariant ?? cfg.navbarVariant;
+  const navbarPosition = props.navbarPosition ?? cfg.navbarPosition;
+  const renderDesktopDropdown = props.renderDesktopDropdown ?? cfg.renderDesktopDropdown;
+  const desktopMaxPrimaryItems = props.desktopMaxPrimaryItems ?? cfg.desktopMaxPrimaryItems;
+
+  return (
+    <>
+      <PublicNavigation
+        brand={brand}
+        brandHref={brandHref}
+        logo={logo}
+        siteName={siteName}
+        navigation={navigation}
+        userMenu={userMenu}
+        containerClassName={containerClassName}
+        navbarVariant={navbarVariant}
+        navbarPosition={navbarPosition}
+        renderDesktopDropdown={renderDesktopDropdown}
+        desktopMaxPrimaryItems={desktopMaxPrimaryItems}
+      />
+      <PublicMobileDrawer
+        navigation={navigation}
+        userMenu={userMenu}
+        containerClassName={containerClassName}
+      />
+    </>
+  );
+}
+