"use client"; import { useState, useEffect } from "react"; import Link from "next/link"; import { usePathname, useRouter } from "next/navigation"; import { FileText, Moon, Sun } from "lucide-react"; import { FaLock, FaChevronDown, FaChevronUp } from "react-icons/fa"; import { useTheme } from "../context/ThemeContext"; const Sidebar = ({ sidebarOpen, setSidebarOpen, isCollapsed }) => { const pathname = usePathname(); const router = useRouter(); const { darkMode, toggleDarkMode } = useTheme(); const [openMenus, setOpenMenus] = useState({ authentication: false }); const isActive = (href) => pathname === href; const toggleMenu = (menu) => { setOpenMenus(prev => ({ ...prev, [menu]: !prev[menu] })); }; const closeSidebarOnMobile = () => { if (window.innerWidth < 1024) { setSidebarOpen(false); } }; const handleLogout = () => { localStorage.removeItem("token"); // or account.deleteSession("current") if using Appwrite router.push("/signup"); }; // ---------------logo handling in dark mode----------------------- // Create a separate LogoImage component for better error handling function LogoImage({ darkSrc, lightSrc, darkMode, className, alt }) { const [imgSrc, setImgSrc] = useState(darkMode ? darkSrc : lightSrc); const [errored, setErrored] = useState(false); useEffect(() => { setImgSrc(darkMode ? darkSrc : lightSrc); setErrored(false); // Reset error state when mode changes }, [darkMode, darkSrc, lightSrc]); const handleError = () => { if (!errored) { // Try falling back to opposite mode's image setImgSrc(darkMode ? lightSrc : darkSrc); setErrored(true); } else { // Ultimate fallback to placeholder setImgSrc('/images/logo/placeholder.svg'); } }; return ( {alt} ); } // ---------------------------------------- return ( ); }; export default Sidebar;