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
This commit is contained in:
fullsizemalt
parent
7224157085
commit
d51c5c162b
2 changed files with 290 additions and 108 deletions
|
|
@ -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 />
|
||||
|
|
|
|||
280
frontend/src/components/aura/Navbar.tsx
Normal file
280
frontend/src/components/aura/Navbar.tsx
Normal file
|
|
@ -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;
|
||||
Loading…
Add table
Reference in a new issue