firebase-os 1.1.3 → 1.1.5

package/src/components/Navbar.tsx

@@ -0,0 +1,563 @@
+import { Database, User as UserIcon, Menu, Sun, Moon, Users, Settings, HelpCircle, LayoutTemplate, Mail, LogIn, HardDrive, LayoutDashboard, ChevronDown, Layers, MoreHorizontal } from 'lucide-react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useAuth } from '../lib/AuthContext';
+import { useState, useEffect, useRef } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useTheme } from '../lib/ThemeContext';
+// import { themeConfig } from '../theme.config'; // We now use dynamic activeConfig
+import { ContactPopup } from './ContactPopup';
+import { AdminNotifications } from './AdminNotifications';
+import { db } from '../lib/firebase';
+import { collection, onSnapshot, doc } from 'firebase/firestore';
+import { defaultMenuOrder } from '../configs/pages/menuOrders.config';
+import type { OrderItem } from '../configs/pages/tabOrders.config';
+import { parseOrderItems } from '../configs/pages/tabOrders.config';
+import { defaultSupportConfig } from '../configs/pages/support.config';
+
+export interface BaseMenuItem {
+  label: string;
+  path?: string;
+  action?: () => void;
+  submenu?: { label: string; path?: string; action?: () => void }[];
+}
+
+// System menu stubs — always available even if not in Firestore
+const systemMenuDefaults: Record<string, { label: string; path: string }> = {
+  templates: { label: 'Templates', path: '/templates' },
+  setup:     { label: 'Setup',     path: '/setup' },
+  contact:   { label: 'Contact',   path: '/contact' },
+};
+
+export function Navbar({ customMenu, standalone }: { customMenu?: BaseMenuItem[], standalone?: boolean }) {
+  const { user, userRole, signOut } = useAuth();
+  const navigate = useNavigate();
+  const [dropdownOpen, setDropdownOpen] = useState<'user' | 'nav' | 'guest' | 'overflow' | false>(false);
+  const [activeSubmenu, setActiveSubmenu] = useState<string | null>(null);
+  const [contactOpen, setContactOpen] = useState(false);
+  const [supportOpen, setSupportOpen] = useState(false);
+  const [photoError, setPhotoError] = useState(false);
+  const displayName = user?.displayName || user?.email?.split('@')[0] || 'User';
+  const capitalizedName = displayName.charAt(0).toUpperCase() + displayName.slice(1);
+
+  const { theme, toggleTheme, activeConfig } = useTheme();
+
+  const handleSignOut = async () => {
+    await signOut();
+    navigate('/');
+    setDropdownOpen(false);
+  };
+
+  // ── Public menu: reads from sys_pages + sys_configs/page_order ──────────
+  const [pageInfoMap, setPageInfoMap] = useState<Record<string, { label: string; path: string }>>({ ...systemMenuDefaults });
+  const [menuOrder, setMenuOrder] = useState<OrderItem[]>(defaultMenuOrder);
+
+  useEffect(() => {
+    if (!db) return;
+
+    // 1. Page info from sys_pages (same source as Settings.tsx)
+    const unsubPages = onSnapshot(collection(db, 'sys_pages'), (snap) => {
+      const map: Record<string, { label: string; path: string }> = { ...systemMenuDefaults };
+      snap.forEach(d => {
+        const val = d.data();
+        if (val.enabled === false) return;
+        const label = val.pageName || val.title || systemMenuDefaults[d.id]?.label || d.id;
+        const path = val.route || (d.id === 'home' ? '/' : '/' + d.id);
+        map[d.id] = { label, path };
+      });
+      setPageInfoMap(map);
+    });
+
+    // 2. Order + visibility from sys_configs/page_order (same source as Settings.tsx)
+    const unsubOrder = onSnapshot(doc(db, 'sys_configs', 'page_order'), (d) => {
+      setMenuOrder(
+        d.exists() && Array.isArray(d.data().order)
+          ? parseOrderItems(d.data().order)
+          : defaultMenuOrder
+      );
+    });
+
+    const unsubSupport = onSnapshot(doc(db, 'sys_tabs', 'support'), (d) => {
+       if (d.exists() && d.data().pageName) {
+           setSupportConfig(d.data().pageName);
+       }
+    });
+
+    return () => { unsubPages(); unsubOrder(); unsubSupport(); };
+  }, []);
+
+  const [supportConfig, setSupportConfig] = useState(defaultSupportConfig.tabName);
+
+  // Build ordered, visibility-filtered menu (excluding 'home' — that's the logo link)
+  const builtMenu: BaseMenuItem[] = (() => {
+    const hiddenIds = new Set(menuOrder.filter(o => o.hidden).map(o => o.id));
+    const placed = new Set<string>();
+    const items: BaseMenuItem[] = [];
+
+    // Follow the order list, skip hidden + home
+    menuOrder.forEach(o => {
+      if (o.hidden || o.id === 'home') return;
+      const info = pageInfoMap[o.id];
+      if (info) {
+        items.push({ label: info.label, path: info.path });
+        placed.add(o.id);
+      }
+    });
+
+    // Append any pages not yet in the order list (new custom pages)
+    Object.entries(pageInfoMap).forEach(([id, info]) => {
+      if (!placed.has(id) && !hiddenIds.has(id) && id !== 'home' && info.path !== '/' && info.path !== '/support') {
+        items.push({ label: info.label, path: info.path });
+      }
+    });
+
+    return items;
+  })();
+
+  const menuItemsToUse = customMenu || builtMenu;
+
+  const guestNavRef = useRef<HTMLDivElement>(null);
+  const measureRef = useRef<HTMLDivElement>(null);
+  const [maxVisible, setMaxVisible] = useState(menuItemsToUse.length);
+  const navKey = menuItemsToUse.map(o => o.label).join('|');
+
+  useEffect(() => {
+    if (standalone || user) return;
+    
+    const measure = () => {
+      const container = guestNavRef.current;
+      const measureRow = measureRef.current;
+      if (!container || !measureRow) return;
+      
+      const containerWidth = container.clientWidth;
+      const moreButtonWidth = 50; 
+      const gap = 28; // gap-7 = 28px
+      const tabEls = measureRow.querySelectorAll<HTMLElement>('[data-measure-nav]');
+      if (tabEls.length === 0) { setMaxVisible(menuItemsToUse.length); return; }
+      
+      let checkWidth = 0;
+      let allFit = true;
+      for (let i = 0; i < tabEls.length; i++) {
+        checkWidth += tabEls[i].offsetWidth + (i > 0 ? gap : 0);
+        if (checkWidth > containerWidth) { allFit = false; break; }
+      }
+      if (allFit) { setMaxVisible(menuItemsToUse.length); return; }
+      
+      let totalWidth = 0;
+      let fitCount = 0;
+      for (let i = 0; i < tabEls.length; i++) {
+        const tabWidth = tabEls[i].offsetWidth;
+        const neededWidth = totalWidth + tabWidth + (i > 0 ? gap : 0);
+        if (neededWidth + moreButtonWidth > containerWidth) break;
+        totalWidth = neededWidth;
+        fitCount++;
+      }
+      setMaxVisible(Math.max(fitCount, 1));
+    };
+
+    const raf = requestAnimationFrame(measure);
+    if (typeof ResizeObserver === 'undefined') return () => cancelAnimationFrame(raf);
+    const ro = new ResizeObserver(() => requestAnimationFrame(measure));
+    if (guestNavRef.current) ro.observe(guestNavRef.current);
+    return () => { cancelAnimationFrame(raf); ro.disconnect(); };
+  }, [navKey, standalone, user, menuItemsToUse.length]);
+
+  const visibleMenuItems = menuItemsToUse.slice(0, maxVisible);
+  const hiddenMenuItems = menuItemsToUse.slice(maxVisible);
+
+  return (
+    <nav className="flex items-center justify-between w-full max-w-7xl mx-auto z-40 p-4 md:p-10 relative">
+      {/* Logo */}
+      <div className="flex items-center gap-2 md:gap-4 z-50">
+        <Link to="/" className="flex items-center gap-2 md:gap-3 group cursor-pointer z-50">
+          <div className="w-9 h-9 md:w-10 md:h-10 rounded-xl glass-panel flex items-center justify-center glow-hover shadow-lg transition-transform duration-500 group-hover:rotate-[360deg] group-active:scale-95 overflow-hidden">
+            {activeConfig?.logoUrl ? (
+              <img src={activeConfig.logoUrl} alt="Logo" className="w-full h-full object-cover" />
+            ) : (
+              <Database className="w-4 h-4 md:w-5 md:h-5 text-accent" />
+            )}
+          </div>
+          <span className="hidden lg:block font-bold text-[22px] tracking-tight text-gradient transition-colors duration-300 drop-shadow-sm">
+            {activeConfig?.appName || ''}
+          </span>
+        </Link>
+      </div>
+
+
+
+      <AnimatePresence>
+        {contactOpen && <ContactPopup formId="contact" onClose={() => setContactOpen(false)} />}
+      </AnimatePresence>
+      <AnimatePresence>
+        {supportOpen && <ContactPopup formId="support" onClose={() => setSupportOpen(false)} />}
+      </AnimatePresence>
+
+      {/* Right Auth Block */}
+      <div className="flex items-center gap-2 md:gap-4 z-50 relative ml-auto flex-1 justify-end">
+        {!standalone && !user && (
+          <>
+            <div
+              ref={measureRef}
+              aria-hidden="true"
+              className="flex items-center gap-7 whitespace-nowrap px-1"
+              style={{ position: 'fixed', top: -9999, left: 0, visibility: 'hidden', height: 0, pointerEvents: 'none' }}
+            >
+              {menuItemsToUse.map((item, idx) => (
+                <span key={item.path || idx} data-measure-nav className="text-[13px] md:text-[14px] font-bold tracking-wide flex items-center gap-1.5 shrink-0">
+                  {item.label}
+                  {item.submenu && <ChevronDown className="w-3 h-3" />}
+                </span>
+              ))}
+            </div>
+
+            <div className="hidden sm:flex items-center gap-7 mr-6 w-full max-w-full justify-end relative" ref={guestNavRef}>
+              {visibleMenuItems.map((item, idx) => (
+                <div
+                  key={`${item.path || 'no-path'}-${idx}`}
+                  className="relative shrink-0"
+                  onMouseEnter={() => setActiveSubmenu(item.label)}
+                  onMouseLeave={() => setActiveSubmenu(null)}
+                >
+                  {item.path ? (
+                    <Link
+                      to={item.path}
+                      className="text-[13px] md:text-[14px] font-bold tracking-wide text-foreground/50 hover:text-accent transition-all cursor-pointer flex items-center gap-1.5"
+                    >
+                      {item.label}
+                      {item.submenu && <ChevronDown className="w-3 h-3" />}
+                    </Link>
+                  ) : (
+                    <button
+                      onClick={item.action}
+                      className="text-[13px] md:text-[14px] font-bold tracking-wide text-foreground/50 hover:text-accent transition-all flex items-center gap-1.5"
+                    >
+                      {item.label}
+                      {item.submenu && <ChevronDown className="w-3 h-3" />}
+                    </button>
+                  )}
+
+                  {item.submenu && activeSubmenu === item.label && (
+                    <div className="absolute top-[100%] left-0 pt-2 z-50">
+                      <motion.div
+                        initial={{ opacity: 0, y: 5 }} animate={{ opacity: 1, y: 0 }}
+                        className="min-w-[180px] max-h-[300px] overflow-y-auto styled-scrollbars bg-background/95 backdrop-blur-xl border border-[var(--panel-border)] rounded-2xl shadow-xl flex flex-col py-2"
+                      >
+                        {item.submenu.map((sub, sIdx) => (
+                          sub.path ? (
+                            <Link key={sIdx} to={sub.path} className="px-5 py-3 text-[13px] font-medium text-foreground/70 hover:text-foreground hover:bg-foreground/5 transition-colors">
+                              {sub.label}
+                            </Link>
+                          ) : (
+                            <button key={sIdx} onClick={sub.action} className="px-5 py-3 text-left w-full text-[13px] font-medium text-foreground/70 hover:text-foreground hover:bg-foreground/5 transition-colors">
+                              {sub.label}
+                            </button>
+                          )
+                        ))}
+                      </motion.div>
+                    </div>
+                  )}
+                </div>
+              ))}
+
+              {hiddenMenuItems.length > 0 && (
+                <div 
+                  className="relative flex items-center shrink-0"
+                  onMouseEnter={() => setDropdownOpen('overflow')}
+                >
+                  <button 
+                    onClick={() => setDropdownOpen(dropdownOpen === 'overflow' ? false : 'overflow')}
+                    className={`p-1 rounded-lg transition-colors flex items-center ${dropdownOpen === 'overflow' ? 'bg-foreground/5 text-accent' : 'text-foreground/50 hover:bg-foreground/5 hover:text-accent'}`}
+                  >
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="w-5 h-5"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
+                  </button>
+
+                  <AnimatePresence>
+                    {dropdownOpen === 'overflow' && (
+                      <>
+                        <div className="fixed inset-0 z-40" onClick={() => setDropdownOpen(false)} />
+                        <motion.div
+                          initial={{ opacity: 0, y: 5, scale: 0.98 }} animate={{ opacity: 1, y: 0, scale: 1 }} exit={{ opacity: 0, y: 5, scale: 0.98 }}
+                          className="absolute top-[100%] pt-1 right-0 min-w-[200px] max-h-[350px] overflow-y-auto styled-scrollbars bg-background border border-[var(--panel-border)] rounded-2xl shadow-xl flex flex-col py-2 z-50 origin-top-right"
+                        >
+                          {hiddenMenuItems.map((sub, sIdx) => (
+                            sub.path ? (
+                              <Link key={sIdx} to={sub.path} onClick={() => setDropdownOpen(false)} className="px-5 py-3 text-[13px] font-bold tracking-wide text-foreground/70 hover:text-foreground hover:bg-foreground/5 transition-colors">
+                                {sub.label}
+                              </Link>
+                            ) : (
+                              <button key={sIdx} onClick={() => { if(sub.action) sub.action(); setDropdownOpen(false); }} className="px-5 py-3 text-left w-full text-[13px] font-bold tracking-wide text-foreground/70 hover:text-foreground hover:bg-foreground/5 transition-colors">
+                                {sub.label}
+                              </button>
+                            )
+                          ))}
+                        </motion.div>
+                      </>
+                    )}
+                  </AnimatePresence>
+                </div>
+              )}
+            </div>
+
+            {activeConfig?.showThemeToggle && (
+              <button
+                onClick={toggleTheme}
+                className="p-2 mr-2 rounded-xl glass-panel hover:bg-foreground/5 transition-all text-accent border border-[var(--panel-border)] hover:border-accent/40 shrink-0"
+                aria-label="Toggle Theme"
+              >
+                {theme === 'dark' ? <Sun className="w-4 h-4 md:w-5 md:h-5" /> : <Moon className="w-4 h-4 md:w-5 md:h-5" />}
+              </button>
+            )}
+
+            <div className="flex items-center gap-2 shrink-0">
+              <Link to="/login" className="hidden sm:flex text-[14px] font-bold tracking-wide text-foreground/80 hover:text-accent transition-colors px-3 py-1.5 shrink-0">
+                Sign In
+              </Link>
+              <Link to="/register" className="hidden sm:flex text-[13px] md:text-[14px] font-bold tracking-wide px-4 py-1.5 md:px-5 md:py-2 rounded-xl btn-primary transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5 active:scale-95 items-center justify-center ml-2">
+                Get Started
+              </Link>
+
+              {/* Mobile Guest Hamburger */}
+              <div className="relative sm:hidden ml-1">
+                <button
+                  onClick={() => setDropdownOpen(dropdownOpen === 'guest' ? false : 'guest')}
+                  className={`p-2 rounded-xl glass-panel glow-hover border transition-all ${dropdownOpen === 'guest' ? 'border-accent bg-foreground/5' : 'border-[var(--panel-border)] hover:bg-foreground/5'}`}
+                >
+                  <Menu className="w-5 h-5 text-accent/80" />
+                </button>
+
+                <AnimatePresence>
+                  {dropdownOpen === 'guest' && (
+                    <>
+                      <div className="fixed inset-0 z-40" onClick={() => setDropdownOpen(false)} />
+                      <motion.div
+                        initial={{ opacity: 0, y: -10, scale: 0.95 }} animate={{ opacity: 1, y: 0, scale: 1 }} exit={{ opacity: 0, scale: 0.95 }}
+                        className="absolute top-full right-0 mt-3 w-[220px] p-2 glass-panel border border-[var(--panel-border)] rounded-2xl shadow-2xl z-50 flex flex-col gap-1 origin-top-right"
+                      >
+                        <Link to="/templates" onClick={() => setDropdownOpen(false)} className="flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-foreground/5 text-foreground/80 hover:text-foreground transition-all">
+                          <LayoutTemplate className="w-4 h-4 text-accent/70" /> <span className="text-[14px] font-semibold">Templates</span>
+                        </Link>
+                        <Link to="/setup" onClick={() => setDropdownOpen(false)} className="flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-foreground/5 text-foreground/80 hover:text-foreground transition-all">
+                          <Settings className="w-4 h-4 text-accent/70" /> <span className="text-[14px] font-semibold">Setup</span>
+                        </Link>
+                        <Link to="/contact" onClick={() => setDropdownOpen(false)} className="flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-foreground/5 text-foreground/80 hover:text-foreground transition-all w-full text-left">
+                          <Mail className="w-4 h-4 text-accent/70" /> <span className="text-[14px] font-semibold">Contact</span>
+                        </Link>
+                        <div className="pt-2 mt-1 border-t border-[var(--panel-border)]/50 flex flex-col gap-1">
+                          <Link to="/login" onClick={() => setDropdownOpen(false)} className="flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-foreground/5 text-foreground/80 hover:text-foreground transition-all w-full">
+                            <LogIn className="w-4 h-4 text-accent/70" /> <span className="text-[14px] font-semibold">Sign In</span>
+                          </Link>
+                          <Link to="/register" onClick={() => setDropdownOpen(false)} className="flex items-center gap-3 px-3 py-2.5 rounded-xl btn-primary w-full shadow-lg hover:-translate-y-0.5 transition-transform text-white">
+                            <span className="text-[14px] font-bold mx-auto">Get Started</span>
+                          </Link>
+                        </div>
+                      </motion.div>
+                    </>
+                  )}
+                </AnimatePresence>
+              </div>
+            </div>
+          </>
+        )}
+
+        {!standalone && user && (
+          <div className="flex items-center gap-3">
+            <div className="flex items-center gap-1 sm:gap-2 mr-1">
+              {userRole === 'admin' && <AdminNotifications />}
+
+              {activeConfig?.showThemeToggle && (
+                <button
+                  onClick={toggleTheme}
+                  className="p-2 ml-1 rounded-xl glass-panel hover:bg-foreground/5 transition-all text-accent border border-[var(--panel-border)] hover:border-accent/40"
+                  aria-label="Toggle Theme"
+                >
+                  {theme === 'dark' ? <Sun className="w-4 h-4 md:w-5 md:h-5" /> : <Moon className="w-4 h-4 md:w-5 md:h-5" />}
+                </button>
+              )}
+            </div>
+
+            <div className="relative z-50 flex items-center gap-3">
+              <div className="relative flex-shrink-0">
+                <button
+                  onClick={() => setDropdownOpen(dropdownOpen === 'user' ? false : 'user')}
+                  className={`flex items-center gap-2 group p-1 sm:pr-2.5 rounded-full glass-panel hover:bg-foreground/5 transition-all duration-300 border ${dropdownOpen === 'user' ? 'border-accent/40 bg-foreground/5' : 'border-transparent hover:border-[var(--panel-border)]'}`}
+                >
+                  <div className="w-8 h-8 md:w-9 md:h-9 rounded-full bg-accent/10 flex items-center justify-center overflow-hidden border border-[var(--panel-border)] group-hover:border-accent/30 transition-colors shrink-0 text-accent">
+                    {user.photoURL && !photoError ? (
+                      <img src={user.photoURL} alt="Profile" className="w-full h-full object-cover" onError={() => setPhotoError(true)} />
+                    ) : (
+                      <UserIcon className="w-4 h-4 md:w-5 md:h-5 text-accent" />
+                    )}
+                  </div>
+                  <div className="hidden sm:flex flex-col text-left mr-1 justify-center min-w-[70px] max-w-[160px]">
+                    <span className="text-[12px] font-extrabold leading-tight text-foreground truncate w-full">
+                      {capitalizedName}
+                    </span>
+                    <span className="text-[10px] font-mono tracking-wider leading-tight text-accent truncate w-full mt-0.5 uppercase font-bold">
+                      {userRole === 'admin' ? 'Admin' : 'Free User'}
+                    </span>
+                  </div>
+                </button>
+
+                <AnimatePresence>
+                  {dropdownOpen === 'user' && (
+                    <>
+                      <div className="fixed inset-0 z-40" onClick={() => setDropdownOpen(false)} />
+                      <motion.div
+                        initial={{ opacity: 0, y: -5, scale: 0.98 }} animate={{ opacity: 1, y: 0, scale: 1 }} exit={{ opacity: 0, scale: 0.98, y: -5 }}
+                        className="absolute top-full mt-2 right-0 w-[280px] md:w-[320px] glass-panel border border-[var(--panel-border)] rounded-2xl p-2 shadow-2xl z-50 flex flex-col origin-top-right"
+                      >
+                        <div className="p-3 border-b border-[var(--panel-border)]/50 mb-1 flex flex-col gap-1.5">
+                          <span className="font-bold text-[15px] text-foreground truncate">{capitalizedName}</span>
+                          <span className="text-[12px] text-foreground/50 truncate font-mono">{user.email}</span>
+                        </div>
+
+                        <div className="py-1">
+                          <Link to="/profile" onClick={() => setDropdownOpen(false)} className="flex items-center w-full px-3 py-2.5 rounded-xl text-[13px] font-semibold tracking-wide hover:bg-foreground/5 text-foreground/80 hover:text-foreground transition-all gap-3">
+                            <span className="w-5 h-5 rounded-md bg-foreground/5 border border-[var(--panel-border)] flex items-center justify-center shrink-0">
+                              <UserIcon className="w-3 h-3 text-accent" />
+                            </span>
+                            Profile Settings
+                          </Link>
+                          <Link to="/drive" onClick={() => setDropdownOpen(false)} className="flex items-center w-full px-3 py-2.5 rounded-xl text-[13px] font-semibold tracking-wide hover:bg-foreground/5 text-foreground/80 hover:text-foreground transition-all gap-3">
+                            <span className="w-5 h-5 rounded-md bg-foreground/5 border border-[var(--panel-border)] flex items-center justify-center shrink-0">
+                              <HardDrive className="w-3 h-3 text-accent" />
+                            </span>
+                            Drive
+                          </Link>
+
+                          {userRole === 'admin' && (
+                            <>
+                              <Link to="/users" onClick={() => setDropdownOpen(false)} className="flex items-center w-full px-3 py-2.5 rounded-xl text-[13px] font-semibold tracking-wide hover:bg-foreground/5 text-foreground/80 hover:text-foreground transition-all gap-3">
+                                <span className="w-5 h-5 rounded-md bg-foreground/5 border border-[var(--panel-border)] flex items-center justify-center shrink-0">
+                                  <Users className="w-3 h-3 text-accent" />
+                                </span>
+                                Users
+                              </Link>
+                              <Link to="/submissions" onClick={() => setDropdownOpen(false)} className="flex items-center w-full px-3 py-2.5 rounded-xl text-[13px] font-semibold tracking-wide hover:bg-foreground/5 text-foreground/80 hover:text-foreground transition-all gap-3">
+                                <span className="w-5 h-5 rounded-md bg-foreground/5 border border-[var(--panel-border)] flex items-center justify-center shrink-0">
+                                  <Mail className="w-3 h-3 text-accent" />
+                                </span>
+                                Submissions
+                              </Link>
+                              <Link to="/requests" onClick={() => setDropdownOpen(false)} className="flex items-center w-full px-3 py-2.5 rounded-xl text-[13px] font-semibold tracking-wide hover:bg-foreground/5 text-foreground/80 hover:text-foreground transition-all gap-3">
+                                <span className="w-5 h-5 rounded-md bg-foreground/5 border border-[var(--panel-border)] flex items-center justify-center shrink-0">
+                                  <HelpCircle className="w-3 h-3 text-accent" />
+                                </span>
+                                Requests
+                              </Link>
+                              <Link to="/settings" onClick={() => setDropdownOpen(false)} className="flex items-center w-full px-3 py-2.5 rounded-xl text-[13px] font-semibold tracking-wide hover:bg-foreground/5 text-foreground/80 hover:text-foreground transition-all gap-3">
+                                <span className="w-5 h-5 rounded-md bg-foreground/5 border border-[var(--panel-border)] flex items-center justify-center shrink-0">
+                                  <Settings className="w-3 h-3 text-accent" />
+                                </span>
+                                Settings
+                              </Link>
+                              <Link to="/pages" onClick={() => setDropdownOpen(false)} className="flex items-center w-full px-3 py-2.5 rounded-xl text-[13px] font-semibold tracking-wide hover:bg-foreground/5 text-foreground/80 hover:text-foreground transition-all gap-3">
+                                <span className="w-5 h-5 rounded-md bg-foreground/5 border border-[var(--panel-border)] flex items-center justify-center shrink-0">
+                                  <Layers className="w-3 h-3 text-accent" />
+                                </span>
+                                Pages
+                              </Link>
+                            </>
+                          )}
+
+                          {userRole !== 'admin' && (
+                            <Link to="/support" onClick={() => setDropdownOpen(false)} className="flex items-center w-full px-3 py-2.5 rounded-xl text-[13px] font-semibold tracking-wide hover:bg-foreground/5 text-foreground/80 hover:text-foreground transition-all gap-3 text-left">
+                              <span className="w-5 h-5 rounded-md bg-foreground/5 border border-[var(--panel-border)] flex items-center justify-center shrink-0">
+                                <HelpCircle className="w-3 h-3 text-accent" />
+                              </span>
+                              {supportConfig}
+                            </Link>
+                          )}
+                        </div>
+
+                        <div className="pt-1 mt-1 border-t border-[var(--panel-border)]/50">
+                          <button onClick={handleSignOut} className="flex items-center w-full px-3 py-2.5 rounded-xl text-[13px] font-bold tracking-wide hover:bg-red-500/10 hover:text-red-500 text-foreground/70 transition-all gap-3">
+                            <span className="w-5 h-5 rounded-md bg-red-500/5 flex items-center justify-center shrink-0 text-red-500">
+                              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="w-3 h-3"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                            </span>
+                            Sign Out
+                          </button>
+                        </div>
+                      </motion.div>
+                    </>
+                  )}
+                </AnimatePresence>
+              </div>
+
+              {/* Mobile hamburger for users (only shown if needed, e.g., missing top nav links) */}
+              <div className="relative sm:hidden">
+                <button
+                  onClick={() => setDropdownOpen(dropdownOpen === 'nav' ? false : 'nav')}
+                  className={`p-2 rounded-xl glass-panel glow-hover border transition-all ${dropdownOpen === 'nav' ? 'border-accent bg-foreground/5' : 'border-[var(--panel-border)] hover:bg-foreground/5'}`}
+                >
+                  <Menu className="w-5 h-5 text-accent/80" />
+                </button>
+
+                <AnimatePresence>
+                  {dropdownOpen === 'nav' && (
+                    <>
+                      <div className="fixed inset-0 z-40" onClick={() => setDropdownOpen(false)} />
+                      <motion.div
+                        initial={{ opacity: 0, y: -10, scale: 0.95 }} animate={{ opacity: 1, y: 0, scale: 1 }} exit={{ opacity: 0, scale: 0.95 }}
+                        className="absolute top-full right-0 mt-3 w-[220px] p-2 glass-panel border border-[var(--panel-border)] rounded-2xl shadow-2xl z-50 flex flex-col gap-1 origin-top-right"
+                      >
+                        <Link to="/profile" onClick={() => setDropdownOpen(false)} className="flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-foreground/5 text-foreground/80 hover:text-foreground transition-all">
+                          <UserIcon className="w-4 h-4 text-accent/70" /> <span className="text-[14px] font-semibold">Profile Settings</span>
+                        </Link>
+                        <Link to="/drive" onClick={() => setDropdownOpen(false)} className="flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-foreground/5 text-foreground/80 hover:text-foreground transition-all">
+                          <HardDrive className="w-4 h-4 text-accent/70" /> <span className="text-[14px] font-semibold">Drive</span>
+                        </Link>
+                        <Link to="/dashboard" onClick={() => setDropdownOpen(false)} className="flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-foreground/5 text-foreground/80 hover:text-foreground transition-all">
+                          <LayoutDashboard className="w-4 h-4 text-accent/70" /> <span className="text-[14px] font-semibold">Dashboard</span>
+                        </Link>
+                        {userRole === 'admin' && (
+                          <>
+                            <Link to="/users" onClick={() => setDropdownOpen(false)} className="flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-foreground/5 text-foreground/80 hover:text-foreground transition-all">
+                              <Users className="w-4 h-4 text-accent/70" /> <span className="text-[14px] font-semibold">Users</span>
+                            </Link>
+                            <Link to="/submissions" onClick={() => setDropdownOpen(false)} className="flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-foreground/5 text-foreground/80 hover:text-foreground transition-all">
+                              <Mail className="w-4 h-4 text-accent/70" /> <span className="text-[14px] font-semibold">Submissions</span>
+                            </Link>
+                            <Link to="/requests" onClick={() => setDropdownOpen(false)} className="flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-foreground/5 text-foreground/80 hover:text-foreground transition-all">
+                              <HelpCircle className="w-4 h-4 text-accent/70" /> <span className="text-[14px] font-semibold">Requests</span>
+                            </Link>
+                            <Link to="/settings" onClick={() => setDropdownOpen(false)} className="flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-foreground/5 text-foreground/80 hover:text-foreground transition-all">
+                              <Settings className="w-4 h-4 text-accent/70" /> <span className="text-[14px] font-semibold">Settings</span>
+                            </Link>
+                          </>
+                        )}
+                        {userRole !== 'admin' && (
+                          <Link to="/support" onClick={() => setDropdownOpen(false)} className="flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-foreground/5 text-foreground/80 hover:text-foreground transition-all w-full text-left">
+                            <HelpCircle className="w-4 h-4 text-accent/70" /> <span className="text-[14px] font-semibold">Support</span>
+                          </Link>
+                        )}
+                        <div className="pt-1 mt-1 border-t border-[var(--panel-border)]/50">
+                          <button onClick={handleSignOut} className="flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-red-500/10 text-red-500/80 hover:text-red-500 transition-all w-full">
+                            <span className="text-[14px] font-semibold">Sign Out</span>
+                          </button>
+                        </div>
+                      </motion.div>
+                    </>
+                  )}
+                </AnimatePresence>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {standalone && (
+          <>
+            {activeConfig?.showThemeToggle && (
+              <button
+                onClick={toggleTheme}
+                className="p-2 ml-1 rounded-xl glass-panel hover:bg-foreground/5 transition-all text-accent border border-[var(--panel-border)] hover:border-accent/40"
+                aria-label="Toggle Theme"
+              >
+                {theme === 'dark' ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
+              </button>
+            )}
+          </>
+        )}
+      </div>
+    </nav>
+  );
+}

package/src/configs/forms/contactForm.config.ts

@@ -0,0 +1,15 @@
+export const contactFormConfig = {
+  systemName: 'contact',
+  formType: 'public',
+  submitPage: 'submissions',
+  redirectTo: '/',
+  title: 'Get in Touch',
+  buttonName: 'Contact Us',
+  submitText: 'Send Message',
+  fields: [
+    { name: 'name', type: 'text', label: 'Full Name', placeholder: 'John Doe', required: true },
+    { name: 'email', type: 'email', label: 'Email Address', placeholder: 'john@example.com', required: true },
+    { name: 'phone', type: 'tel', label: 'Phone Number', placeholder: '+1 (555) 000-0000', required: false },
+    { name: 'questions', type: 'textarea', label: 'Your Questions', placeholder: 'How can we help you?', required: true }
+  ]
+};

package/src/configs/forms/index.ts

@@ -0,0 +1,29 @@
+import { contactFormConfig } from './contactForm.config';
+import { supportFormConfig } from './supportForm.config';
+import { pubFormConfig } from './pubForm.config';
+import { userFormConfig } from './userForm.config';
+
+export interface FormField {
+  name: string;
+  type: string;
+  label: string;
+  placeholder?: string;
+  required: boolean;
+}
+
+export interface FormConfig {
+  title: string;
+  systemName: string;
+  formType: 'public' | 'private';
+  submitPage: string;
+  redirectTo: string;
+  buttonName?: string;
+  submitText: string;
+  enabled?: boolean;
+  fields: FormField[];
+}
+
+export const defaultForms: Record<string, FormConfig> = {
+  contact: contactFormConfig as FormConfig,
+  support: supportFormConfig as FormConfig,
+};

package/src/configs/forms/pubForm.config.ts

@@ -0,0 +1,11 @@
+export const pubFormConfig = {
+  systemName: 'pubForm',
+  formType: 'public',
+  submitPage: 'submissions',
+  redirectTo: '',
+  title: 'Public Form',
+  description: 'Please describe your request',
+  buttonName: 'Open Form',
+  submitText: 'Submit',
+  fields: []
+};

package/src/configs/forms/supportForm.config.ts

@@ -0,0 +1,14 @@
+export const supportFormConfig = {
+  systemName: 'support',
+  formType: 'private',
+  submitPage: 'requests',
+  redirectTo: '/dashboard',
+  title: 'Request Assistance',
+  buttonName: 'Get Assistance',
+  submitText: 'Submit Request',
+  fields: [
+    { name: 'topic', type: 'text', label: 'Topic', placeholder: 'E.g. Password reset issue', required: true },
+    { name: 'contactEmail', type: 'email', label: 'Contact Email', placeholder: 'your@email.com', required: true },
+    { name: 'description', type: 'textarea', label: 'Description', placeholder: 'Please describe your issue in detail...', required: true }
+  ]
+};

package/src/configs/forms/userForm.config.ts

@@ -0,0 +1,11 @@
+export const userFormConfig = {
+  systemName: 'userForm',
+  formType: 'private',
+  submitPage: 'requests',
+  redirectTo: '',
+  title: 'User Form',
+  description: 'How can we help you today?',
+  buttonName: 'Open Form',
+  submitText: 'Submit',
+  fields: []
+};