@djangocfg/layouts 1.0.3 → 1.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Layout system and components for Unrealon applications",
   "author": {
     "name": "DjangoCFG",
@@ -53,9 +53,9 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^1.0.3",
-    "@djangocfg/og-image": "^1.0.3",
-    "@djangocfg/ui": "^1.0.3",
+    "@djangocfg/api": "^1.0.5",
+    "@djangocfg/og-image": "^1.0.5",
+    "@djangocfg/ui": "^1.0.5",
     "@hookform/resolvers": "^5.2.0",
     "consola": "^3.4.2",
     "lucide-react": "^0.468.0",
@@ -76,7 +76,7 @@
     "vidstack": "0.6.15"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^1.0.3",
+    "@djangocfg/typescript-config": "^1.0.5",
     "@types/node": "^24.7.2",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.1",

package/src/layouts/AppLayout/layouts/AuthLayout/AuthHelp.tsx

@@ -51,7 +51,7 @@ export const AuthHelp: React.FC<AuthHelpProps> = ({
   if (variant === 'compact') {
     return (
       <div
-        className={`flex items-center justify-between p-3 bg-muted/30 rounded-lg border border-border ${className}`}
+        className={`flex items-center justify-between p-3 bg-muted/30 rounded-sm border border-border ${className}`}
       >
         <div className="flex items-center space-x-2">
           {getChannelIcon()}
@@ -78,7 +78,7 @@ export const AuthHelp: React.FC<AuthHelpProps> = ({
 
   return (
     <div
-      className={`space-y-3 p-3 bg-muted/30 rounded-lg border border-border ${className}`}
+      className={`space-y-3 p-3 bg-muted/30 rounded-sm border border-border ${className}`}
     >
       <div className="flex items-start space-x-2">
         {getChannelIcon()}

package/src/layouts/AppLayout/layouts/AuthLayout/OTPForm.tsx

@@ -80,27 +80,27 @@ export const OTPForm: React.FC = () => {
                 <InputOTPGroup className="gap-2">
                   <InputOTPSlot
                     index={0}
-                    className="h-12 w-12 text-lg font-semibold border-2 border-border bg-background rounded-lg shadow-sm"
+                    className="h-12 w-12 text-lg font-semibold border-2 border-border bg-background rounded-sm shadow-sm"
                   />
                   <InputOTPSlot
                     index={1}
-                    className="h-12 w-12 text-lg font-semibold border-2 border-border bg-background rounded-lg shadow-sm"
+                    className="h-12 w-12 text-lg font-semibold border-2 border-border bg-background rounded-sm shadow-sm"
                   />
                   <InputOTPSlot
                     index={2}
-                    className="h-12 w-12 text-lg font-semibold border-2 border-border bg-background rounded-lg shadow-sm"
+                    className="h-12 w-12 text-lg font-semibold border-2 border-border bg-background rounded-sm shadow-sm"
                   />
                   <InputOTPSlot
                     index={3}
-                    className="h-12 w-12 text-lg font-semibold border-2 border-border bg-background rounded-lg shadow-sm"
+                    className="h-12 w-12 text-lg font-semibold border-2 border-border bg-background rounded-sm shadow-sm"
                   />
                   <InputOTPSlot
                     index={4}
-                    className="h-12 w-12 text-lg font-semibold border-2 border-border bg-background rounded-lg shadow-sm"
+                    className="h-12 w-12 text-lg font-semibold border-2 border-border bg-background rounded-sm shadow-sm"
                   />
                   <InputOTPSlot
                     index={5}
-                    className="h-12 w-12 text-lg font-semibold border-2 border-border bg-background rounded-lg shadow-sm"
+                    className="h-12 w-12 text-lg font-semibold border-2 border-border bg-background rounded-sm shadow-sm"
                   />
                 </InputOTPGroup>
               </InputOTP>

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

@@ -81,7 +81,7 @@ export function DashboardSidebar() {
                   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"}>
+                <div className={isMobile ? "h-10 w-10 bg-primary rounded-sm flex items-center justify-center flex-shrink-0" : "h-8 w-8 bg-primary rounded-sm flex items-center justify-center flex-shrink-0"}>
                   <span className="text-primary-foreground font-bold text-sm">
                     {app.name.charAt(0).toUpperCase()}
                   </span>

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

@@ -61,7 +61,7 @@ export function DesktopUserMenu() {
           {/* 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"
+              className="flex items-center gap-2 px-3 py-2 rounded-sm text-sm font-medium transition-colors text-foreground hover:text-primary hover:bg-accent/50"
               onClick={toggleUserMenu}
               aria-haspopup="true"
               aria-expanded={userMenuOpen}
@@ -85,15 +85,15 @@ export function DesktopUserMenu() {
                 />
                 {/* 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"
+                  className="absolute top-full right-0 mt-2 w-48 rounded-sm shadow-sm backdrop-blur-xl z-[9996] bg-popover border border-border"
                   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">
+                    <div className="px-3 py-2 text-sm mb-2 border-b border-border">
+                      <div className="text-muted-foreground">Signed in as:</div>
+                      <div className="font-medium truncate text-popover-foreground mt-1">
                         {user?.email}
                       </div>
                     </div>
@@ -113,7 +113,7 @@ export function DesktopUserMenu() {
                     {/* 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]"
+                      className="w-full flex items-center gap-2 px-3 py-2 text-sm rounded-sm transition-colors text-destructive hover:bg-destructive/[0.1]"
                     >
                       <LogOut className="size-4" />
                       <span>Sign out</span>

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

@@ -139,7 +139,7 @@ export function Footer() {
               {/* 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">
+                  <span className="inline-flex items-center gap-2 px-3 py-1.5 rounded-sm 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>

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

@@ -10,12 +10,11 @@
 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 { X } from 'lucide-react';
 import { useAppContext } from '../../../context';
 import { useAuth } from '../../../../../auth';
 import { useNavigation } from '../../../hooks';
+import { MobileMenuUserCard } from './MobileMenuUserCard';
 
 /**
  * Mobile Menu Component
@@ -37,34 +36,47 @@ export function MobileMenu() {
 
   const { app, publicLayout, routes } = config;
 
-  // Animation state
-  const [isAnimating, setIsAnimating] = React.useState(false);
+  // Track if we should render (stays true during close animation)
+  const [shouldRender, setShouldRender] = React.useState(false);
 
-  // Trigger animation when menu opens
+  // Track animation state separately
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  // Handle opening
   React.useEffect(() => {
     if (mobileMenuOpen) {
-      // Small delay to trigger animation
-      setTimeout(() => setIsAnimating(true), 10);
+      setShouldRender(true);
+      // Trigger animation after render
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          setIsOpen(true);
+        });
+      });
     } else {
-      setIsAnimating(false);
+      // Start close animation
+      setIsOpen(false);
+      // Wait for animation to finish before unmounting
+      const timer = setTimeout(() => {
+        setShouldRender(false);
+      }, 300);
+      return () => clearTimeout(timer);
     }
   }, [mobileMenuOpen]);
 
   const handleLogout = () => {
     logout();
-    handleClose();
+    closeMobileMenu();
   };
 
   const handleClose = () => {
-    setIsAnimating(false);
-    setTimeout(closeMobileMenu, 300); // Wait for animation
+    closeMobileMenu();
   };
 
   const handleNavigate = () => {
-    handleClose();
+    closeMobileMenu();
   };
 
-  if (!mobileMenuOpen) return null;
+  if (!shouldRender) return null;
 
   // Portal to body to avoid z-index and positioning issues
   if (typeof window === 'undefined') return null;
@@ -73,8 +85,8 @@ export function MobileMenu() {
     <>
       {/* 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'
+        className={`fixed inset-0 z-[150] bg-black/50 backdrop-blur-sm transition-opacity duration-300 ease-in-out lg:hidden ${
+          isOpen ? 'opacity-100' : 'opacity-0'
         }`}
         onClick={handleClose}
         aria-hidden="true"
@@ -82,8 +94,8 @@ export function MobileMenu() {
 
       {/* 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'
+        className={`fixed top-0 right-0 bottom-0 w-80 z-[200] bg-popover border-l border-border shadow-2xl transition-transform duration-300 ease-in-out lg:hidden ${
+          isOpen ? 'translate-x-0' : 'translate-x-full'
         }`}
         role="dialog"
         aria-modal="true"
@@ -104,7 +116,7 @@ export function MobileMenu() {
             </div>
             <button
               onClick={handleClose}
-              className="p-2 rounded-lg transition-colors hover:bg-accent/50"
+              className="p-2 rounded-sm transition-colors hover:bg-accent/50"
               aria-label="Close menu"
             >
               <X className="size-5" />
@@ -113,118 +125,16 @@ export function MobileMenu() {
 
           {/* 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>
-            )}
+            {/* User Menu Card */}
+            <MobileMenuUserCard
+              isAuthenticated={isAuthenticated}
+              user={user}
+              dashboardPath={publicLayout.userMenu.dashboardPath}
+              profilePath={publicLayout.userMenu.profilePath}
+              authPath={routes.auth}
+              onLogout={handleLogout}
+              onNavigate={handleNavigate}
+            />
 
             {/* Navigation Sections */}
             <div className="space-y-6">
@@ -238,7 +148,7 @@ export function MobileMenu() {
                     <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 ${
+                        className={`block px-4 py-3 rounded-sm 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'
@@ -262,7 +172,7 @@ export function MobileMenu() {
                         <Link
                           key={item.path}
                           href={item.path}
-                          className={`block px-4 py-3 rounded-lg text-base font-medium transition-colors ${
+                          className={`block px-4 py-3 rounded-sm text-base font-medium transition-colors ${
                             isActive(item.path)
                               ? 'bg-accent text-accent-foreground'
                               : 'text-foreground hover:bg-accent hover:text-accent-foreground'

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

@@ -0,0 +1,150 @@
+/**
+ * Mobile Menu User Card Component
+ *
+ * Displays user information and action buttons in mobile menu
+ * - Authenticated: shows user info with dashboard, profile, and logout
+ * - Guest: shows welcome message with sign in button
+ */
+
+'use client';
+
+import React from 'react';
+import { Crown, LogOut, Settings, User } from 'lucide-react';
+import { Button, ButtonLink, Card, CardContent } from '@djangocfg/ui/components';
+import { ThemeToggle } from '@djangocfg/ui/theme';
+
+interface MobileMenuUserCardProps {
+  isAuthenticated: boolean;
+  user?: {
+    email?: string;
+    avatar?: string;
+  } | null;
+  dashboardPath?: string;
+  profilePath: string;
+  authPath: string;
+  onLogout: () => void;
+  onNavigate: () => void;
+}
+
+export function MobileMenuUserCard({
+  isAuthenticated,
+  user,
+  dashboardPath,
+  profilePath,
+  authPath,
+  onLogout,
+  onNavigate,
+}: MobileMenuUserCardProps) {
+  if (isAuthenticated) {
+    return (
+      <Card className="border-primary/20 shadow-lg !bg-accent/50">
+        <CardContent className="p-4">
+          {/* User Info Header */}
+          <div className="flex items-center gap-3 mb-4 p-3 rounded-sm border border-border bg-accent/70">
+            <div className="w-10 h-10 rounded-full flex items-center justify-center bg-primary flex-shrink-0 overflow-hidden relative">
+              {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" />
+              )}
+              {/* Active indicator */}
+              <div className="absolute -bottom-0.5 -right-0.5 size-3 rounded-full bg-green-500 border-2 border-background" />
+            </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>
+
+          {/* Action Buttons */}
+          <div className="space-y-3">
+            {/* Dashboard link */}
+            {dashboardPath && (
+              <ButtonLink
+                href={dashboardPath}
+                variant="default"
+                size="sm"
+                className="w-full h-9"
+                onClick={onNavigate}
+              >
+                <Crown className="w-4 h-4 mr-2" />
+                Dashboard
+              </ButtonLink>
+            )}
+
+            {/* Quick Actions - Icons only */}
+            <div className="flex items-center justify-center gap-2 pt-3 mt-1 border-t border-border/30">
+              {/* Profile Settings */}
+              <ButtonLink
+                href={profilePath}
+                variant="ghost"
+                size="icon"
+                className="h-9 w-9"
+                onClick={onNavigate}
+                aria-label="Profile Settings"
+              >
+                <Settings className="h-5 w-5" />
+              </ButtonLink>
+
+              {/* Theme Toggle */}
+              <ThemeToggle />
+
+              {/* Sign Out */}
+              <Button
+                onClick={onLogout}
+                variant="ghost"
+                size="icon"
+                className="h-9 w-9 text-destructive hover:bg-destructive/10 hover:text-destructive"
+                aria-label="Sign Out"
+              >
+                <LogOut className="h-5 w-5" />
+              </Button>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  // Guest Card
+  return (
+    <Card className="border-border !bg-accent/50">
+      <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">
+            <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={authPath}
+            variant="default"
+            size="default"
+            className="w-full"
+            onClick={onNavigate}
+          >
+            <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>
+  );
+}

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

@@ -49,7 +49,7 @@ export function Navigation() {
   const { app, publicLayout } = config;
 
   return (
-    <nav className="sticky top-0 w-full border-b backdrop-blur-xl z-[9990] bg-surface-gradient border-border/30">
+    <nav className="sticky top-0 w-full border-b backdrop-blur-xl z-[100] bg-background/80 border-border/30">
       <div className="w-full px-4 sm:px-6 lg:px-8">
         <div className="flex items-center justify-between h-16">
           {/* Left side - Logo and Navigation Menu */}
@@ -143,7 +143,7 @@ export function Navigation() {
           {isMobile && (
           <button
             onClick={toggleMobileMenu}
-            className="p-3 rounded-lg border shadow-sm transition-all duration-200 bg-card/50 hover:bg-card border-border/50 hover:border-primary/50 text-foreground hover:text-primary"
+            className="p-3 rounded-sm border shadow-sm transition-all duration-200 bg-card/50 hover:bg-card border-border/50 hover:border-primary/50 text-foreground hover:text-primary"
             aria-label="Toggle mobile menu"
           >
             <Menu className="size-5" />