diff --git a/frontend/src/components/sidebar.tsx b/frontend/src/components/sidebar.tsx index f7c59fd..4fc4f66 100644 --- a/frontend/src/components/sidebar.tsx +++ b/frontend/src/components/sidebar.tsx @@ -2,19 +2,18 @@ import Link from "next/link"; import { usePathname } from "next/navigation"; -import { useState, useEffect } from "react"; +import { useState, useEffect, useCallback, memo } from "react"; import { cn } from "@/lib/utils"; import { Settings, Cloud, BookText, Upload, - Shield, - CreditCard, LayoutDashboard, LogIn, Crown, LogOut, + Server, } from "lucide-react"; import { Tooltip, @@ -38,12 +37,6 @@ const navigation = [ icon: Upload, description: "Translate documents", }, - { - name: "General Settings", - href: "/settings", - icon: Settings, - description: "Configure general settings", - }, { name: "Translation Services", href: "/settings/services", @@ -56,23 +49,61 @@ const navigation = [ icon: BookText, description: "System prompts and glossary", }, -]; - -const adminNavigation = [ { - name: "Admin Dashboard", - href: "/admin", - icon: Shield, - description: "System monitoring (login required)", + name: "General Settings", + href: "/settings", + icon: Settings, + description: "Configure general settings", }, ]; +const planColors: Record = { + free: "bg-zinc-600", + starter: "bg-blue-500", + pro: "bg-teal-500", + business: "bg-purple-500", + enterprise: "bg-amber-500", +}; + +// Memoized NavItem for performance +const NavItem = memo(function NavItem({ + item, + isActive +}: { + item: typeof navigation[0]; + isActive: boolean; +}) { + const Icon = item.icon; + return ( + + + + + {item.name} + + + +

{item.description}

+
+
+ ); +}); + export function Sidebar() { const pathname = usePathname(); const [user, setUser] = useState(null); + const [mounted, setMounted] = useState(false); useEffect(() => { - // Check for user in localStorage + setMounted(true); const storedUser = localStorage.getItem("user"); if (storedUser) { try { @@ -81,26 +112,38 @@ export function Sidebar() { setUser(null); } } + // Listen for storage changes + const handleStorage = (e: StorageEvent) => { + if (e.key === "user") { + setUser(e.newValue ? JSON.parse(e.newValue) : null); + } + }; + window.addEventListener("storage", handleStorage); + return () => window.removeEventListener("storage", handleStorage); }, []); - const handleLogout = () => { + const handleLogout = useCallback(() => { localStorage.removeItem("token"); localStorage.removeItem("refresh_token"); localStorage.removeItem("user"); setUser(null); window.location.href = "/"; - }; + }, []); - const planColors: Record = { - free: "bg-zinc-600", - starter: "bg-blue-500", - pro: "bg-teal-500", - business: "bg-purple-500", - enterprise: "bg-amber-500", - }; + // Prevent hydration mismatch + if (!mounted) { + return ( + + ); + } return ( - +