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 { useState } from 'react';
|
||||||
import { Outlet, Link } from 'react-router-dom';
|
import { Outlet } from 'react-router-dom';
|
||||||
import { Menu, X, Command } from 'lucide-react';
|
|
||||||
import { useAuth } from '../context/AuthContext';
|
import { useAuth } from '../context/AuthContext';
|
||||||
import { Sidebar } from './layout/Sidebar';
|
import { Navbar } from './aura/Navbar';
|
||||||
import { MobileNav } from './layout/MobileNav';
|
import { MobileNav } from './layout/MobileNav';
|
||||||
import { MobileNavSheet } from './layout/MobileNavSheet';
|
import { MobileNavSheet } from './layout/MobileNavSheet';
|
||||||
import { UserMenu } from './layout/UserMenu';
|
|
||||||
import ThemeToggle from './ThemeToggle';
|
|
||||||
import { CommandPalette } from './ui/CommandPalette';
|
import { CommandPalette } from './ui/CommandPalette';
|
||||||
import { SessionTimeoutWarning } from './ui/SessionTimeoutWarning';
|
import { SessionTimeoutWarning } from './ui/SessionTimeoutWarning';
|
||||||
import { PageTitleUpdater } from '../hooks/usePageTitle';
|
import { PageTitleUpdater } from '../hooks/usePageTitle';
|
||||||
|
|
@ -16,127 +13,32 @@ import { Breadcrumbs } from './ui/Breadcrumbs';
|
||||||
|
|
||||||
export default function Layout() {
|
export default function Layout() {
|
||||||
const { user } = useAuth();
|
const { user } = useAuth();
|
||||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
|
||||||
const [mobileSheetOpen, setMobileSheetOpen] = useState(false);
|
const [mobileSheetOpen, setMobileSheetOpen] = useState(false);
|
||||||
|
|
||||||
return (
|
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) */}
|
{/* Skip to main content link (accessibility) */}
|
||||||
<a
|
<a
|
||||||
href="#main-content"
|
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
|
Skip to main content
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
{/* Mobile Top Header */}
|
{/* Top Navigation Bar */}
|
||||||
<header className="md:hidden bg-elevated border-b border-default px-4 py-3 flex items-center justify-between sticky top-0 z-40">
|
<Navbar onOpenMobileMenu={() => setMobileSheetOpen(true)} />
|
||||||
<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>
|
|
||||||
|
|
||||||
|
<div className="flex flex-1 relative">
|
||||||
{/* Main Content */}
|
{/* Main Content */}
|
||||||
<main
|
<main
|
||||||
id="main-content"
|
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"
|
role="main"
|
||||||
>
|
>
|
||||||
<PageTitleUpdater />
|
<PageTitleUpdater />
|
||||||
<AnnouncementBanner />
|
<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 */}
|
{/* Global Breadcrumbs - appears on all pages */}
|
||||||
<Breadcrumbs />
|
<Breadcrumbs />
|
||||||
<Outlet />
|
<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