import { useState, useRef, useEffect } from "react"; import { Link, useLocation } from "react-router-dom"; import { useAuth } from "../context/AuthContext"; import { Home, Search, Folder, Bell, PenSquare, User, LogOut, MoreHorizontal, Highlighter, Bookmark, } from "lucide-react"; import { getUnreadNotificationCount } from "../api/client"; import logo from "../assets/logo.svg"; export default function Sidebar() { const { user, isAuthenticated, logout, loading } = useAuth(); const location = useLocation(); const [menuOpen, setMenuOpen] = useState(false); const [unreadCount, setUnreadCount] = useState(0); const menuRef = useRef(null); const isActive = (path) => { if (path === "/") return location.pathname === "/"; return location.pathname.startsWith(path); }; useEffect(() => { if (isAuthenticated) { getUnreadNotificationCount() .then((data) => setUnreadCount(data.count || 0)) .catch(() => {}); const interval = setInterval(() => { getUnreadNotificationCount() .then((data) => setUnreadCount(data.count || 0)) .catch(() => {}); }, 60000); return () => clearInterval(interval); } }, [isAuthenticated]); useEffect(() => { const handleClickOutside = (e) => { if (menuRef.current && !menuRef.current.contains(e.target)) { setMenuOpen(false); } }; document.addEventListener("mousedown", handleClickOutside); return () => document.removeEventListener("mousedown", handleClickOutside); }, []); const getInitials = () => { if (user?.displayName) { return user.displayName.substring(0, 2).toUpperCase(); } if (user?.handle) { return user.handle.substring(0, 2).toUpperCase(); } return "U"; }; return ( ); }