@digilogiclabs/create-saas-app 2.11.0 → 2.12.1

package/dist/templates/web/ui-auth-payments/template/src/components/shared/header.tsx

@@ -1,230 +1,229 @@
-'use client';
-
-import React, { useState } from 'react';
-import Link from 'next/link';
-import { LogOut, CreditCard, User, Settings, Home, Menu, X, Info } from 'lucide-react';
-import { useAuth } from '@digilogiclabs/app-sdk';
-import { 
-  ResponsiveHeader,
-  MobileNavigation,
-  HamburgerIcon,
-  useNetworkInfo,
-  useOfflineState
-} from '@digilogiclabs/saas-factory-ui';
-import { ThemeToggle } from '../ui/theme-toggle';
-
-export function Header() {
-  const { user, signOut } = useAuth();
-  const networkInfo = useNetworkInfo();
-  const isOnline = useOfflineState();
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-  
-  const projectName = "{{titleCaseName}}";
-  
-  const handleSignOut = async () => {
-    try {
-      await signOut();
-    } catch (error) {
-      console.error('Sign out error:', error);
-    }
-  };
-
-  const navigationItems = [
-    { 
-      label: 'Home', 
-      href: '/',
-      icon: Home,
-      protected: false 
-    },
-    { 
-      label: 'Dashboard', 
-      href: '/dashboard',
-      icon: User,
-      protected: true 
-    },
-    { 
-      label: 'Billing', 
-      href: '/billing',
-      icon: CreditCard,
-      protected: true 
-    },
-    { 
-      label: 'Checkout', 
-      href: '/checkout',
-      icon: CreditCard,
-      protected: false 
-    },
-    { 
-      label: 'Setup Guide', 
-      href: '/setup',
-      icon: Info,
-      protected: false 
-    },
-    { 
-      label: 'Settings', 
-      href: '/settings',
-      icon: Settings,
-      protected: true 
-    }
-  ];
-
-  const authActions = user ? [
-    {
-      label: 'Sign Out',
-      icon: LogOut,
-      onClick: handleSignOut,
-      variant: 'ghost' as const
-    }
-  ] : [
-    {
-      label: 'Login',
-      href: '/login',
-      variant: 'ghost' as const
-    },
-    {
-      label: 'Sign Up',
-      href: '/signup',
-      variant: 'default' as const
-    }
-  ];
-
-  // Filter navigation items based on user authentication
-  const visibleNavItems = navigationItems.filter(item => !item.protected || user);
-
-  return (
-    <>
-      {/* Network Status Banner */}
-      {!isOnline && (
-        <div className="bg-yellow-500 text-white text-center py-2 text-sm animate-pulse">
-          <span>⚠️ You're offline - Some features may be limited</span>
-        </div>
-      )}
-      
-      {/* Connection Quality Banner */}
-      {isOnline && networkInfo?.effectiveType === '2g' && (
-        <div className="bg-orange-500 text-white text-center py-2 text-sm">
-          <div className="animate-marquee whitespace-nowrap">
-            🐌 Slow connection detected - Optimized experience enabled • Reduced data usage • Cached content prioritized
-          </div>
-        </div>
-      )}
-
-      {/* Responsive Header */}
-      <header className="bg-white dark:bg-gray-800 shadow-md border-b">
-        <div className="container mx-auto px-4">
-          <div className="flex justify-between items-center h-16">
-            {/* Logo */}
-            <Link href="/" className="text-2xl font-bold text-gray-900 dark:text-white">
-              {projectName}
-            </Link>
-
-            {/* Desktop Navigation */}
-            <nav className="hidden md:flex items-center gap-6">
-              {visibleNavItems.map((item) => (
-                <Link
-                  key={item.href}
-                  href={item.href}
-                  className="flex items-center gap-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"
-                >
-                  <item.icon className="w-4 h-4" />
-                  {item.label}
-                </Link>
-              ))}
-              
-              {/* Auth Actions */}
-              <div className="flex items-center gap-2 ml-4 pl-4 border-l border-gray-200 dark:border-gray-600">
-                <ThemeToggle />
-                {user ? (
-                  <button
-                    onClick={handleSignOut}
-                    className="flex items-center gap-2 px-3 py-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"
-                  >
-                    <LogOut className="w-4 h-4" />
-                    Sign Out
-                  </button>
-                ) : (
-                  <div className="flex items-center gap-2">
-                    <Link
-                      href="/login"
-                      className="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"
-                    >
-                      Login
-                    </Link>
-                    <Link
-                      href="/signup"
-                      className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
-                    >
-                      Sign Up
-                    </Link>
-                  </div>
-                )}
-              </div>
-            </nav>
-
-            {/* Mobile Menu Button */}
-            <button
-              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
-              className="md:hidden p-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
-            >
-              {mobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
-            </button>
-          </div>
-
-          {/* Mobile Menu */}
-          {mobileMenuOpen && (
-            <div className="md:hidden border-t border-gray-200 dark:border-gray-600 py-4">
-              <nav className="flex flex-col space-y-3">
-                {visibleNavItems.map((item) => (
-                  <Link
-                    key={item.href}
-                    href={item.href}
-                    onClick={() => setMobileMenuOpen(false)}
-                    className="flex items-center gap-3 px-3 py-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors"
-                  >
-                    <item.icon className="w-4 h-4" />
-                    {item.label}
-                  </Link>
-                ))}
-                
-                {/* Mobile Auth Actions */}
-                <div className="flex items-center gap-3 px-3 pt-3 border-t border-gray-200 dark:border-gray-600">
-                  <ThemeToggle />
-                  {user ? (
-                    <button
-                      onClick={() => {
-                        handleSignOut();
-                        setMobileMenuOpen(false);
-                      }}
-                      className="flex items-center gap-2 px-3 py-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors"
-                    >
-                      <LogOut className="w-4 h-4" />
-                      Sign Out
-                    </button>
-                  ) : (
-                    <div className="flex flex-col gap-2 w-full">
-                      <Link
-                        href="/login"
-                        onClick={() => setMobileMenuOpen(false)}
-                        className="text-center py-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors"
-                      >
-                        Login
-                      </Link>
-                      <Link
-                        href="/signup"
-                        onClick={() => setMobileMenuOpen(false)}
-                        className="text-center py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
-                      >
-                        Sign Up
-                      </Link>
-                    </div>
-                  )}
-                </div>
-              </nav>
-            </div>
-          )}
-        </div>
-      </header>
-    </>
-  );
-}
-
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { ThemeToggle } from '@/components/ui/theme-toggle';
+import { useMockAuth } from '@/components/mock-auth-provider';
+import { MOCK_MODE } from '@/lib/mock';
+import {
+  User, LogOut, ChevronDown, Menu, X, MoreHorizontal,
+  LayoutDashboard, Settings, CreditCard,
+} from 'lucide-react';
+
+/**
+ * Navigation links config.
+ * - `auth`: if true, only shown when user is authenticated
+ * - Links are shown in order; on desktop, the first MAX_DESKTOP_NAV
+ *   are in the top bar and extras overflow into the user dropdown.
+ */
+const NAV_LINKS = [
+  { href: '/dashboard', label: 'Dashboard', icon: LayoutDashboard, auth: true },
+  { href: '/settings', label: 'Settings', icon: Settings, auth: true },
+  { href: '/checkout', label: 'Billing', icon: CreditCard, auth: true },
+  // Add more links here — extras automatically overflow to dropdown/mobile
+];
+
+/** Max nav links shown in the desktop top bar before overflow */
+const MAX_DESKTOP_NAV = 3;
+
+export function Header() {
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const { user, signOut, isAuthenticated } = useMockAuth();
+  const pathname = usePathname();
+
+  const handleSignOut = () => {
+    signOut();
+    setDropdownOpen(false);
+    setMobileOpen(false);
+  };
+
+  // Filter links based on auth state
+  const visibleLinks = NAV_LINKS.filter((link) => !link.auth || isAuthenticated);
+  const desktopLinks = visibleLinks.slice(0, MAX_DESKTOP_NAV);
+  const overflowLinks = visibleLinks.slice(MAX_DESKTOP_NAV);
+
+  const isActive = (href: string) =>
+    pathname === href || (href !== '/' && pathname.startsWith(href));
+
+  return (
+    <header className="sticky top-0 z-50 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="mx-auto flex h-14 max-w-6xl items-center px-4">
+        {/* Logo — left */}
+        <Link href="/" className="mr-auto text-lg font-bold text-foreground">
+          {'{{titleCaseName}}'}
+        </Link>
+
+        {/* ═══ Desktop (md+) ═══ */}
+        <div className="hidden items-center gap-1 md:flex">
+          {/* Primary nav links */}
+          {desktopLinks.map((link) => (
+            <Link
+              key={link.href}
+              href={link.href}
+              className={`rounded-md px-3 py-2 text-sm transition-colors ${
+                isActive(link.href)
+                  ? 'bg-primary/10 text-primary font-medium'
+                  : 'text-muted-foreground hover:text-foreground hover:bg-muted'
+              }`}
+            >
+              {link.label}
+            </Link>
+          ))}
+
+          <div className="ml-2 flex items-center gap-2">
+            <ThemeToggle />
+
+            {isAuthenticated && user ? (
+              <div className="relative">
+                <button
+                  onClick={() => setDropdownOpen(!dropdownOpen)}
+                  className="flex items-center gap-2 rounded-lg border border-border bg-card px-3 py-1.5 text-sm hover:bg-muted transition-colors"
+                >
+                  <div className="flex h-6 w-6 items-center justify-center rounded-full bg-primary/10">
+                    <User className="h-3.5 w-3.5 text-primary" />
+                  </div>
+                  <span className="text-foreground">{user.name}</span>
+                  {MOCK_MODE && (
+                    <span className="rounded bg-primary/10 px-1 py-0.5 text-[10px] text-primary font-medium">Mock</span>
+                  )}
+                  <ChevronDown className={`h-3.5 w-3.5 text-muted-foreground transition-transform ${dropdownOpen ? 'rotate-180' : ''}`} />
+                </button>
+
+                {dropdownOpen && (
+                  <>
+                    <div className="fixed inset-0 z-40" onClick={() => setDropdownOpen(false)} />
+                    <div className="absolute right-0 top-full z-50 mt-1 w-56 rounded-lg border border-border bg-card shadow-lg">
+                      {/* User info */}
+                      <div className="border-b border-border px-4 py-3">
+                        <p className="text-sm font-medium text-foreground">{user.name}</p>
+                        <p className="text-xs text-muted-foreground">{user.email}</p>
+                      </div>
+
+                      {/* Overflow nav links (4th+ links go here) */}
+                      {overflowLinks.length > 0 && (
+                        <div className="border-b border-border py-1">
+                          {overflowLinks.map((link) => (
+                            <Link
+                              key={link.href}
+                              href={link.href}
+                              onClick={() => setDropdownOpen(false)}
+                              className={`flex items-center gap-2 px-4 py-2 text-sm transition-colors ${
+                                isActive(link.href)
+                                  ? 'text-primary bg-primary/5'
+                                  : 'text-foreground hover:bg-muted'
+                              }`}
+                            >
+                              <link.icon className="h-4 w-4 text-muted-foreground" />
+                              {link.label}
+                            </Link>
+                          ))}
+                        </div>
+                      )}
+
+                      {/* Sign out */}
+                      <div className="py-1">
+                        <button
+                          onClick={handleSignOut}
+                          className="flex w-full items-center gap-2 px-4 py-2 text-sm text-destructive hover:bg-muted transition-colors"
+                        >
+                          <LogOut className="h-4 w-4" /> Sign Out
+                        </button>
+                      </div>
+                    </div>
+                  </>
+                )}
+              </div>
+            ) : (
+              <>
+                <Link href="/login" className="rounded-md px-3 py-1.5 text-sm text-foreground hover:bg-muted transition-colors">
+                  Sign In
+                </Link>
+                <Link href="/signup" className="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors">
+                  Sign Up
+                </Link>
+              </>
+            )}
+          </div>
+        </div>
+
+        {/* ═══ Mobile (<md) ═══ */}
+        <div className="flex items-center gap-2 md:hidden">
+          <ThemeToggle />
+          <button
+            className="inline-flex items-center justify-center rounded-md p-2 text-muted-foreground hover:text-foreground hover:bg-muted"
+            onClick={() => { setMobileOpen(!mobileOpen); setDropdownOpen(false); }}
+            aria-label="Toggle menu"
+          >
+            {mobileOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+          </button>
+        </div>
+      </div>
+
+      {/* ═══ Mobile overlay panel ═══ */}
+      {mobileOpen && (
+        <>
+          <div className="fixed inset-0 top-14 z-40 bg-background/80 backdrop-blur-sm md:hidden" onClick={() => setMobileOpen(false)} />
+          <div className="fixed inset-x-0 top-14 z-50 border-b border-border bg-background shadow-lg md:hidden">
+            {/* Nav links — filtered by auth */}
+            {visibleLinks.length > 0 && (
+              <nav className="px-4 py-2">
+                {visibleLinks.map((link) => (
+                  <Link
+                    key={link.href}
+                    href={link.href}
+                    onClick={() => setMobileOpen(false)}
+                    className={`flex items-center gap-3 rounded-md px-3 py-2.5 text-sm transition-colors ${
+                      isActive(link.href)
+                        ? 'bg-primary/10 text-primary font-medium'
+                        : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+                    }`}
+                  >
+                    <link.icon className="h-4 w-4" />
+                    {link.label}
+                  </Link>
+                ))}
+              </nav>
+            )}
+
+            {/* User section */}
+            <div className="border-t border-border px-4 py-3">
+              {isAuthenticated && user ? (
+                <>
+                  <div className="flex items-center gap-3 px-3 py-2">
+                    <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10">
+                      <User className="h-4 w-4 text-primary" />
+                    </div>
+                    <div className="min-w-0 flex-1">
+                      <p className="text-sm font-medium text-foreground truncate">{user.name}</p>
+                      <p className="text-xs text-muted-foreground truncate">{user.email}</p>
+                    </div>
+                    {MOCK_MODE && (
+                      <span className="rounded bg-primary/10 px-1.5 py-0.5 text-[10px] text-primary font-medium">Mock</span>
+                    )}
+                  </div>
+                  <button
+                    onClick={handleSignOut}
+                    className="mt-1 flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-sm text-destructive hover:bg-muted transition-colors"
+                  >
+                    <LogOut className="h-4 w-4" /> Sign Out
+                  </button>
+                </>
+              ) : (
+                <div className="flex gap-2">
+                  <Link href="/login" onClick={() => setMobileOpen(false)} className="flex-1 text-center rounded-md border border-border px-3 py-2.5 text-sm text-foreground hover:bg-muted transition-colors">
+                    Sign In
+                  </Link>
+                  <Link href="/signup" onClick={() => setMobileOpen(false)} className="flex-1 text-center rounded-md bg-primary px-3 py-2.5 text-sm text-primary-foreground hover:bg-primary/90 transition-colors">
+                    Sign Up
+                  </Link>
+                </div>
+              )}
+            </div>
+          </div>
+        </>
+      )}
+    </header>
+  );
+}