"use client"; import React, { useState, useEffect, useRef } from "react"; import Link from "next/link"; import Image from "next/image"; import { usePathname } from "next/navigation"; import "./Sidebar.css"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faBars, faCogs, faHome, faStar, faTv, faFilm, faBookBookmark, faCodeCommit, faBook, } from "@fortawesome/free-solid-svg-icons"; import config from "@/lib/config"; const Sidebar = () => { const [isOpen, setIsOpen] = useState(false); const pathname = usePathname(); const [hoveredLink, setHoveredLink] = useState(null); const [prevLink, setPrevLink] = useState(null); const sidebarRef = useRef(null); useEffect(() => { const activeLink = document.querySelector( `.sidebar-link[href="${pathname}"]` ); if (activeLink) { setPrevLink(activeLink); } }, [pathname]); const toggleSidebar = () => { setIsOpen(!isOpen); }; const handleMouseEnter = (e) => { setPrevLink(document.querySelector(".sidebar-link.active")); setHoveredLink(e.target); }; const handleMouseLeave = () => { setHoveredLink(null); }; const handleClickOutside = (e) => { if (sidebarRef.current && !sidebarRef.current.contains(e.target)) { setIsOpen(false); } }; useEffect(() => { if (isOpen) { document.addEventListener("mousedown", handleClickOutside); } else { document.removeEventListener("mousedown", handleClickOutside); } return () => { document.removeEventListener("mousedown", handleClickOutside); }; }, [isOpen]); return (
{isOpen && (

Nexora{" "} Nexora Logo

)}
{isOpen && (
)} {isOpen && (
)}
); }; const SidebarItem = ({ icon, text }) => { return (

{text}

); }; export default Sidebar;