import { useState, useEffect } from "react"; import { Link, useLocation, useNavigate } from "react-router-dom"; import { Code2, Home, Info, BookOpen, PenTool, FlaskConical, Briefcase, Mail, LayoutDashboard, LogOut, ChevronLeft, ChevronRight, Sun, Moon, User as UserIcon, Palette, X, Bot, FileText, Linkedin } from "lucide-react"; import { cn } from "@/lib/utils"; import userApi from "@/services/userApi"; import { useSidebar } from "./AppLayout"; import { useTheme, THEMES, ThemeId } from "@/contexts/ThemeContext"; import { User } from "@/types"; const mapPathToIcon: Record = { "/": Home, "/about": Info, "/courses": BookOpen, "/practice": PenTool, "/playground": FlaskConical, "/apply": Briefcase, "/contact": Mail, "/dashboard": LayoutDashboard, "/schedule-interview": Bot, "/templates": FileText, "/job-fetcher": Linkedin }; const navLinks = [ { name: "Home", path: "/" }, { name: "About", path: "/about" }, { name: "Courses", path: "/courses" }, { name: "Practice", path: "/practice" }, { name: "ML Playground", path: "/playground" }, { name: "Job Fetcher", path: "/job-fetcher" }, { name: "AI Interview", path: "/schedule-interview" }, { name: "Resume Builder", path: "/templates" }, { name: "Apply", path: "/apply" }, { name: "Contact", path: "/contact" }, ]; export const Sidebar = () => { const location = useLocation(); const navigate = useNavigate(); const [user, setUser] = useState(null); const { isCollapsed, setIsCollapsed, isMobileOpen, setIsMobileOpen } = useSidebar(); const { themeId, isDark, setTheme, toggleDark } = useTheme(); const [showThemePicker, setShowThemePicker] = useState(false); useEffect(() => { const handleStorageChange = () => { const storedUser = localStorage.getItem("user"); if (storedUser) { try { setUser(JSON.parse(storedUser)); } catch { setUser(null); } } else { setUser(null); } }; handleStorageChange(); window.addEventListener("auth-change", handleStorageChange); window.addEventListener("storage", handleStorageChange); return () => { window.removeEventListener("auth-change", handleStorageChange); window.removeEventListener("storage", handleStorageChange); }; }, []); const handleLogout = async () => { try { await userApi.logout(); } catch { /* ignore */ } finally { localStorage.removeItem("user"); setUser(null); window.dispatchEvent(new Event("auth-change")); navigate("/login"); } }; const visibleLinks = [...navLinks]; if (user) visibleLinks.push({ name: "Dashboard", path: "/dashboard" }); return ( <> {/* ── Sidebar panel ───────────────────────────────── */} {/* ── Theme Picker Panel (slides out above sidebar) ── */} {showThemePicker && ( <> {/* Backdrop */}
setShowThemePicker(false)} />

Pick a Theme

{THEMES.map((t) => ( ))}

Pairs with ☀️ / 🌙 toggle above

)} ); };