EmberClone/apps/web/src/components/Nav.tsx

import React, { useState } from "react"
import { Link, useLocation } from "@tanstack/react-router"
import { 
  Home, 
  Clock, 
  Users, 
  FolderKanban, 
  Calendar,
  ShieldCheck,
  Sun,
  Moon,
  Settings,
  ListTree,
  Menu,
  X,
  Zap,
  CreditCard,
  Languages,
  LogOut,
  FileText
} from "lucide-react"
import { useQuery } from "@tanstack/react-query"
import { api } from "../lib/api"
import { useTheme } from "../lib/theme"
import Avatar from "./Avatar"

export default function Nav() {
  const location = useLocation()
  const { theme, toggleTheme } = useTheme()
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
  const [lang, setLang] = useState<'en' | 'de'>('en')
  
  const { data: user } = useQuery({
    queryKey: ['me'],
    queryFn: api.getMe
  })

  const navItems = [
    { label: "Dashboard", to: "/", icon: Home },
    { label: "Time Entries", to: "/time-entries", icon: Clock },
    { label: "Calendar", to: "/calendar", icon: Calendar },
    { label: "Customers", to: "/customers", icon: Users },
    { label: "Projects", to: "/projects", icon: FolderKanban },
    { label: "Invoices", to: "/invoices", icon: FileText },
    { label: "Integrations", to: "/integrations", icon: Zap },
    { label: "Billing", to: "/billing", icon: CreditCard },
  ]

  const adminItems = [
    { label: "Admin", to: "/admin", icon: ShieldCheck },
    { label: "Audit Log", to: "/admin/audit-log", icon: ListTree },
    { label: "Webhooks", to: "/admin/webhooks", icon: Zap },
  ]

  const allItems = user?.role === 'admin' 
    ? [...navItems, ...adminItems] 
    : navItems

  const NavLink = ({ item }: { item: typeof navItems[0] }) => {
    const isActive = location.pathname === item.to
    const Icon = item.icon
    
    const baseClasses = "flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors"
    const activeClasses = "bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300"
    const inactiveClasses = "text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100"
    
    return (
      <Link
        to={item.to}
        onClick={() => setIsMobileMenuOpen(false)}
        aria-current={isActive ? 'page' : undefined}
        className={`${baseClasses} ${isActive ? activeClasses : inactiveClasses}`}
      >
        <Icon className="w-4 h-4" />
        {item.label}
      </Link>
    )
  }

  return (
    <nav 
      role="navigation" 
      className="bg-white dark:bg-slate-900 border-b border-gray-200 dark:border-slate-800 sticky top-0 z-50"
    >
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between h-16">
          <div className="flex items-center gap-8">
            <div className="flex items-center gap-3">
              <Link 
                to="/" 
                className="text-xl font-bold text-indigo-600 dark:text-indigo-400 flex items-center gap-2"
              >
                EmberClone
              </Link>
              <div 
                role="button"
                tabIndex={0}
                aria-label="Open command palette"
                className="hidden md:flex items-center px-1.5 py-0.5 rounded border border-gray-300 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-[10px] font-medium text-gray-400 dark:text-slate-500 cursor-pointer"
              >
                ⌘K
              </div>
            </div>
            
            <div className="hidden md:flex items-center gap-1">
              {allItems.map((item) => (
                <NavLink key={item.to} item={item} />
              ))}
            </div>
          </div>

          <div className="flex items-center gap-3">
            <button 
              onClick={toggleTheme}
              aria-label={theme === 'dark' ? "Switch to light mode" : "Switch to dark mode"}
              className="p-2 rounded-full text-gray-500 hover:bg-gray-100 dark:text-slate-400 dark:hover:bg-slate-800 transition-colors"
              title="Toggle Theme"
            >
              {theme === 'dark' ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
            </button>

            <div className="flex items-center gap-1 p-1 rounded-full bg-gray-100 dark:bg-slate-800 border border-gray-200 dark:border-slate-700">
              <button 
                onClick={() => setLang(lang === 'en' ? 'de' : 'en')}
                aria-label={`Switch language to ${lang === 'en' ? 'German' : 'English'}`}
                className="p-1.5 rounded-full text-gray-600 hover:bg-white dark:text-slate-400 dark:hover:bg-slate-700 transition-colors"
              >
                <Languages className="w-4 h-4" />
              </button>
              <div className="w-px h-4 bg-gray-300 dark:bg-slate-600 mx-1" />
              <button 
                onClick={() => api.logout()}
                aria-label="Logout"
                className="p-1.5 rounded-full text-gray-600 hover:bg-white dark:text-slate-400 dark:hover:bg-slate-700 transition-colors"
              >
                <LogOut className="w-4 h-4" />
              </button>
            </div>

            <Avatar user={user} />
          </div>
        </div>
      </div>
    </nav>
  )
}