From d51c5c162bbe1f5f1ea66a35e263fd84eddf3545 Mon Sep 17 00:00:00 2001
From: fullsizemalt <106900403+fullsizemalt@users.noreply.github.com>
Date: Fri, 19 Dec 2025 18:13:04 -0800
Subject: [PATCH] feat(ui): Replace Sidebar with Global Top Navigation (AuraUI)
 - Implemented new Header 6 style Navbar with dropdowns - Replaced Sidebar in
 Layout with Navbar - Retained Mobile Bottom Nav for floor operations -
 Updated visual theme to light/dark glassmorphism - Implemented self-contained
 UserDropdown in Navbar

---
 frontend/src/components/Layout.tsx      | 118 +---------
 frontend/src/components/aura/Navbar.tsx | 280 ++++++++++++++++++++++++
 2 files changed, 290 insertions(+), 108 deletions(-)
 create mode 100644 frontend/src/components/aura/Navbar.tsx

diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index acdafd1..6106b49 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -1,12 +1,9 @@
 import { useState } from 'react';
-import { Outlet, Link } from 'react-router-dom';
-import { Menu, X, Command } from 'lucide-react';
+import { Outlet } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext';
-import { Sidebar } from './layout/Sidebar';
+import { Navbar } from './aura/Navbar';
 import { MobileNav } from './layout/MobileNav';
 import { MobileNavSheet } from './layout/MobileNavSheet';
-import { UserMenu } from './layout/UserMenu';
-import ThemeToggle from './ThemeToggle';
 import { CommandPalette } from './ui/CommandPalette';
 import { SessionTimeoutWarning } from './ui/SessionTimeoutWarning';
 import { PageTitleUpdater } from '../hooks/usePageTitle';
@@ -16,127 +13,32 @@ import { Breadcrumbs } from './ui/Breadcrumbs';
 
 export default function Layout() {
     const { user } = useAuth();
-    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
     const [mobileSheetOpen, setMobileSheetOpen] = useState(false);
 
     return (
-        <div className="flex flex-col h-screen bg-primary">
+        <div className="flex flex-col min-h-screen bg-slate-50 dark:bg-slate-900 transition-colors duration-300">
             {/* Skip to main content link (accessibility) */}
             <a
                 href="#main-content"
-                className="absolute left-0 top-0 -translate-y-full bg-accent text-white px-4 py-2 rounded-br-lg font-medium focus:translate-y-0 z-50 transition-transform duration-fast"
+                className="absolute left-0 top-0 -translate-y-full bg-cyan-600 text-white px-4 py-2 rounded-br-lg font-medium focus:translate-y-0 z-50 transition-transform duration-fast"
             >
                 Skip to main content
             </a>
 
-            {/* Mobile Top Header */}
-            <header className="md:hidden bg-elevated border-b border-default px-4 py-3 flex items-center justify-between sticky top-0 z-40">
-                <Link to="/" className="flex items-center gap-3">
-                    <img
-                        src="/assets/logo-777-wolfpack.jpg"
-                        alt="777 Wolfpack"
-                        className="w-8 h-8 rounded-lg"
-                    />
-                    <div>
-                        <h1 className="text-sm font-semibold text-primary leading-tight tracking-tight">
-                            777 Wolfpack
-                        </h1>
-                        <p className="text-[10px] text-tertiary">
-                            Operations
-                        </p>
-                    </div>
-                </Link>
-
-                <button
-                    onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
-                    className="p-2 rounded-md hover:bg-tertiary transition-colors duration-fast"
-                    aria-label={mobileMenuOpen ? 'Close menu' : 'Open menu'}
-                >
-                    {mobileMenuOpen ? (
-                        <X size={20} className="text-primary" />
-                    ) : (
-                        <Menu size={20} className="text-primary" />
-                    )}
-                </button>
-            </header>
-
-            {/* Mobile Dropdown Menu */}
-            {mobileMenuOpen && (
-                <div
-                    className="md:hidden fixed inset-0 top-[53px] z-30 bg-black/40 animate-fade-in"
-                    onClick={() => setMobileMenuOpen(false)}
-                >
-                    <div
-                        className="bg-elevated border-b border-default shadow-xl max-h-[60vh] overflow-y-auto animate-slide-up"
-                        onClick={e => e.stopPropagation()}
-                    >
-                        <div className="p-4">
-                            <Sidebar onItemClick={() => setMobileMenuOpen(false)} />
-                        </div>
-                    </div>
-                </div>
-            )}
-
-            <div className="flex flex-1 overflow-hidden">
-                {/* Desktop Sidebar */}
-                <aside
-                    className="hidden md:flex w-60 lg:w-64 bg-secondary border-r border-default flex-col"
-                    role="navigation"
-                    aria-label="Main navigation"
-                >
-                    {/* Logo */}
-                    <div className="p-4 border-b border-default">
-                        <Link to="/" className="flex items-center gap-3 group">
-                            <div className="relative">
-                                <img
-                                    src="/assets/logo-777-wolfpack.jpg"
-                                    alt="777 Wolfpack"
-                                    className="w-9 h-9 rounded-lg transition-transform duration-fast group-hover:scale-105"
-                                />
-                                {/* Status indicator */}
-                                <div className="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 bg-success rounded-full border-2 border-secondary" />
-                            </div>
-                            <div>
-                                <h1 className="text-sm font-semibold text-primary leading-tight tracking-tight">
-                                    777 Wolfpack
-                                </h1>
-                                <p className="text-xs text-tertiary">
-                                    Operations
-                                </p>
-                            </div>
-                        </Link>
-                    </div>
-
-                    {/* Search hint */}
-                    <div className="px-4 py-3 border-b border-subtle">
-                        <button
-                            onClick={() => dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true }))}
-                            className="w-full flex items-center gap-2 px-3 py-2 text-sm text-tertiary bg-tertiary/50 hover:bg-tertiary rounded-md transition-colors duration-fast"
-                        >
-                            <Command size={14} />
-                            <span>Search...</span>
-                            <kbd className="ml-auto text-[10px] font-mono bg-primary px-1.5 py-0.5 rounded">⌘K</kbd>
-                        </button>
-                    </div>
-
-                    {/* Navigation */}
-                    <Sidebar />
-
-                    {/* Footer */}
-                    <div className="mt-auto p-3 border-t border-default">
-                        <UserMenu />
-                    </div>
-                </aside>
+            {/* Top Navigation Bar */}
+            <Navbar onOpenMobileMenu={() => setMobileSheetOpen(true)} />
 
+            <div className="flex flex-1 relative">
                 {/* Main Content */}
                 <main
                     id="main-content"
-                    className="flex-1 overflow-auto pb-20 md:pb-6 custom-scrollbar bg-primary"
+                    className="flex-1 w-full pb-20 lg:pb-8 custom-scrollbar relative"
                     role="main"
                 >
                     <PageTitleUpdater />
                     <AnnouncementBanner />
-                    <div className="p-4 md:p-6 lg:p-8">
+
+                    <div className="max-w-[1920px] mx-auto p-4 sm:p-6 lg:p-8 space-y-6">
                         {/* Global Breadcrumbs - appears on all pages */}
                         <Breadcrumbs />
                         <Outlet />
diff --git a/frontend/src/components/aura/Navbar.tsx b/frontend/src/components/aura/Navbar.tsx
new file mode 100644
index 0000000..c362c96
--- /dev/null
+++ b/frontend/src/components/aura/Navbar.tsx
@@ -0,0 +1,280 @@
+import { useState, useRef, useEffect } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import {
+    Menu,
+    X,
+    Search,
+    ChevronDown,
+    Command,
+    Bell,
+    LogOut,
+    User,
+    Settings
+} from 'lucide-react';
+import { usePermissions } from '../../hooks/usePermissions';
+import { getFilteredNavSections, type NavSection } from '../../lib/navigation';
+import { useAuth } from '../../context/AuthContext';
+import ThemeToggle from '../ThemeToggle';
+
+interface NavbarProps {
+    onOpenMobileMenu?: () => void;
+}
+
+export function Navbar({ onOpenMobileMenu }: NavbarProps) {
+    const { role } = usePermissions();
+    const sections = getFilteredNavSections(role);
+    const location = useLocation();
+    const [scrolled, setScrolled] = useState(false);
+
+    // Handle scroll effect
+    useEffect(() => {
+        const handleScroll = () => {
+            setScrolled(window.scrollY > 20);
+        };
+        window.addEventListener('scroll', handleScroll);
+        return () => window.removeEventListener('scroll', handleScroll);
+    }, []);
+
+    return (
+        <header
+            className={`
+                sticky top-0 z-40 w-full border-b backdrop-blur-xl transition-all duration-300
+                ${scrolled
+                    ? 'bg-white/90 border-slate-200 shadow-sm dark:bg-slate-950/90 dark:border-slate-800'
+                    : 'bg-white/50 border-transparent dark:bg-slate-950/50'
+                }
+            `}
+        >
+            <div className="max-w-[1920px] mx-auto px-4 sm:px-6 lg:px-8">
+                <div className="flex items-center justify-between h-16">
+                    {/* Left: Logo & Desktop Nav */}
+                    <div className="flex items-center gap-8">
+                        {/* Logo */}
+                        <Link to="/" className="flex items-center gap-3 group relative z-50">
+                            <div className="relative">
+                                <img
+                                    src="/assets/logo-777-wolfpack.jpg"
+                                    alt="777 Wolfpack"
+                                    className="w-9 h-9 rounded-lg shadow-md ring-1 ring-slate-900/5 group-hover:scale-105 transition-transform duration-300"
+                                />
+                                <div className="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 bg-emerald-500 rounded-full border-2 border-white dark:border-slate-900 animate-pulse" />
+                            </div>
+                            <div className="hidden sm:block">
+                                <h1 className="text-sm font-bold text-slate-900 dark:text-white leading-tight tracking-tight">
+                                    777 Wolfpack
+                                </h1>
+                                <p className="text-[10px] font-medium text-slate-500 dark:text-slate-400 uppercase tracking-widest">
+                                    Operations
+                                </p>
+                            </div>
+                        </Link>
+
+                        {/* Desktop Navigation - Sections Dropdowns */}
+                        <nav className="hidden lg:flex items-center gap-1">
+                            {sections.map(section => (
+                                <NavDropdown
+                                    key={section.id}
+                                    section={section}
+                                    currentPath={location.pathname}
+                                />
+                            ))}
+                        </nav>
+                    </div>
+
+                    {/* Right: Actions */}
+                    <div className="flex items-center gap-3">
+                        {/* Global Search Trigger */}
+                        <button
+                            onClick={() => dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true }))}
+                            className="hidden md:flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-slate-500 bg-slate-100/50 hover:bg-slate-100 hover:text-slate-700 dark:bg-slate-800/50 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-200 rounded-full border border-transparent hover:border-slate-200 dark:hover:border-slate-700 transition-all group"
+                        >
+                            <Search size={14} className="group-hover:text-cyan-600 transition-colors" />
+                            <span>Search...</span>
+                            <kbd className="hidden lg:inline-flex h-5 items-center gap-1 rounded border border-slate-200 bg-white px-1.5 font-mono text-[10px] font-medium text-slate-900 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-400">
+                                <span className="text-xs">⌘</span>K
+                            </kbd>
+                        </button>
+
+                        <div className="w-px h-6 bg-slate-200 dark:bg-slate-800 mx-1 hidden sm:block" />
+
+                        <button className="relative p-2 text-slate-500 hover:text-cyan-600 dark:text-slate-400 dark:hover:text-cyan-400 transition-colors rounded-full hover:bg-slate-100 dark:hover:bg-slate-800">
+                            <Bell size={20} />
+                            <span className="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full ring-2 ring-white dark:ring-slate-950" />
+                        </button>
+
+                        <ThemeToggle />
+
+                        <div className="pl-1">
+                            <UserDropdown />
+                        </div>
+
+                        {/* Mobile Menu Button */}
+                        <button
+                            onClick={onOpenMobileMenu}
+                            className="lg:hidden p-2 text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white"
+                        >
+                            <Menu size={24} />
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </header>
+    );
+}
+
+function UserDropdown() {
+    const { user, logout } = useAuth();
+    const [isOpen, setIsOpen] = useState(false);
+    const dropdownRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+
+    return (
+        <div className="relative" ref={dropdownRef}>
+            <button
+                onClick={() => setIsOpen(!isOpen)}
+                className="flex items-center gap-2 p-1 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
+            >
+                <div className="w-8 h-8 rounded-full bg-cyan-100 text-cyan-700 dark:bg-cyan-900 dark:text-cyan-300 flex items-center justify-center font-medium text-sm ring-2 ring-transparent hover:ring-cyan-200 dark:hover:ring-cyan-800 transition-all">
+                    {user?.email?.[0]?.toUpperCase() || 'U'}
+                </div>
+            </button>
+
+            <AnimatePresence>
+                {isOpen && (
+                    <motion.div
+                        initial={{ opacity: 0, y: 10, scale: 0.95 }}
+                        animate={{ opacity: 1, y: 0, scale: 1 }}
+                        exit={{ opacity: 0, y: 10, scale: 0.95 }}
+                        transition={{ duration: 0.1 }}
+                        className="absolute top-full right-0 mt-2 w-56 p-2 bg-white/95 dark:bg-slate-900/95 backdrop-blur-xl border border-slate-200 dark:border-slate-800 rounded-2xl shadow-xl z-50"
+                    >
+                        <div className="px-3 py-2 border-b border-slate-100 dark:border-slate-800 mb-1">
+                            <p className="text-sm font-medium text-slate-900 dark:text-white truncate">
+                                {user?.name || 'User'}
+                            </p>
+                            <p className="text-xs text-slate-500 dark:text-slate-400 truncate">
+                                {user?.email}
+                            </p>
+                        </div>
+
+                        <Link
+                            to="/settings"
+                            onClick={() => setIsOpen(false)}
+                            className="flex items-center gap-2 px-3 py-2 text-sm text-slate-600 hover:text-slate-900 hover:bg-slate-50 rounded-lg dark:text-slate-400 dark:hover:text-white dark:hover:bg-slate-800"
+                        >
+                            <Settings size={16} />
+                            Settings
+                        </Link>
+
+                        <button
+                            onClick={() => {
+                                setIsOpen(false);
+                                logout();
+                            }}
+                            className="w-full flex items-center gap-2 px-3 py-2 text-sm text-red-600 hover:bg-red-50 rounded-lg dark:text-red-400 dark:hover:bg-red-900/20"
+                        >
+                            <LogOut size={16} />
+                            Sign Out
+                        </button>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+        </div>
+    );
+}
+
+function NavDropdown({ section, currentPath }: { section: NavSection, currentPath: string }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+    const isActive = section.items.some(item => item.path === currentPath);
+
+    const handleMouseEnter = () => {
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+        setIsOpen(true);
+    };
+
+    const handleMouseLeave = () => {
+        timeoutRef.current = setTimeout(() => setIsOpen(false), 200);
+    };
+
+    return (
+        <div
+            className="relative px-1"
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+        >
+            <button
+                className={`
+                    flex items-center gap-1.5 px-3 py-2 text-sm font-medium rounded-lg transition-all
+                    ${isActive || isOpen
+                        ? 'text-cyan-700 bg-cyan-50/80 dark:text-cyan-400 dark:bg-cyan-900/20'
+                        : 'text-slate-600 hover:text-slate-900 hover:bg-slate-50/80 dark:text-slate-400 dark:hover:text-slate-200 dark:hover:bg-slate-800/50'
+                    }
+                `}
+            >
+                {section.label}
+                <ChevronDown
+                    size={14}
+                    className={`transition-transform duration-200 ${isOpen ? 'rotate-180 text-cyan-500' : 'text-slate-400'}`}
+                />
+            </button>
+
+            <AnimatePresence>
+                {isOpen && (
+                    <motion.div
+                        initial={{ opacity: 0, y: 10, scale: 0.95 }}
+                        animate={{ opacity: 1, y: 0, scale: 1 }}
+                        exit={{ opacity: 0, y: 10, scale: 0.95 }}
+                        transition={{ duration: 0.15, ease: "easeOut" }}
+                        className="absolute top-full left-0 mt-1 w-64 p-2 bg-white/90 dark:bg-slate-900/90 backdrop-blur-xl border border-slate-200/50 dark:border-slate-800/50 rounded-2xl shadow-xl shadow-slate-200/20 dark:shadow-black/40 ring-1 ring-slate-900/5 z-50 overflow-hidden"
+                    >
+                        <div className="grid gap-1">
+                            {section.items.map(item => (
+                                <Link
+                                    key={item.id}
+                                    to={item.path}
+                                    className={`
+                                        group flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all
+                                        ${item.path === currentPath
+                                            ? 'bg-cyan-50 text-cyan-700 dark:bg-cyan-900/20 dark:text-cyan-400'
+                                            : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-200'
+                                        }
+                                    `}
+                                >
+                                    <div className={`
+                                        p-1.5 rounded-lg transition-colors
+                                        ${item.path === currentPath
+                                            ? 'bg-cyan-100 text-cyan-600 dark:bg-cyan-500/20 dark:text-cyan-400'
+                                            : 'bg-slate-100 text-slate-500 group-hover:bg-cyan-50 group-hover:text-cyan-600 dark:bg-slate-800 dark:text-slate-500 dark:group-hover:bg-slate-700 dark:group-hover:text-cyan-400'
+                                        }
+                                    `}>
+                                        <item.icon size={16} />
+                                    </div>
+                                    <div className="flex-1">
+                                        <div className="text-sm font-medium leading-none">{item.label}</div>
+                                        {/* Optional Description if we had it */}
+                                    </div>
+                                    {item.path === currentPath && (
+                                        <div className="w-1.5 h-1.5 rounded-full bg-cyan-500" />
+                                    )}
+                                </Link>
+                            ))}
+                        </div>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+        </div>
+    );
+}
+
+export default Navbar;