frontend/src/components/Sidebar.js

"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 (
    <div ref={sidebarRef} className={`sidebar ${isOpen ? "open" : "closed"}`}>
      <div className="sidebar-header">
        <button className="sidebar-toggle" onClick={toggleSidebar}>
          <FontAwesomeIcon icon={faBars} size="sm" />
        </button>
        {isOpen && (
          <h1 className="sidebar-title">
            Nexora{" "}
            <Image
              className="sidebar-logo"
              src="/favicon-32x32.png"
              width={32}
              height={32}
              alt="Nexora Logo"
            />
          </h1>
        )}
      </div>
      <div className="sidebar-content">
        {isOpen && (
          <div className="sidebar-menu">
            <Link
              href="/"
              className={`sidebar-link ${pathname === "/" ? "active" : ""}`}
              onMouseEnter={handleMouseEnter}
              onMouseLeave={handleMouseLeave}
            >
              <SidebarItem icon={faHome} text="Home" />
            </Link>
            <Link
              href="/movies"
              className={`sidebar-link ${
                pathname === "/movies" ? "active" : ""
              }`}
              onMouseEnter={handleMouseEnter}
              onMouseLeave={handleMouseLeave}
            >
              <SidebarItem icon={faFilm} text="Movies" />
            </Link>
            <Link
              href="/tvshows"
              className={`sidebar-link ${
                pathname === "/tvshows" ? "active" : ""
              }`}
              onMouseEnter={handleMouseEnter}
              onMouseLeave={handleMouseLeave}
            >
              <SidebarItem icon={faTv} text="TV Shows" />
            </Link>
            <Link
              href="/new"
              className={`sidebar-link ${pathname === "/new" ? "active" : ""}`}
              onMouseEnter={handleMouseEnter}
              onMouseLeave={handleMouseLeave}
            >
              <SidebarItem icon={faStar} text="New" />
            </Link>
            <Link
              href="/mylist"
              className={`sidebar-link ${
                pathname === "/mylist" ? "active" : ""
              }`}
              onMouseEnter={handleMouseEnter}
              onMouseLeave={handleMouseLeave}
            >
              <SidebarItem icon={faBookBookmark} text="My List" />
            </Link>
          </div>
        )}
        {isOpen && (
          <div className="sidebar-footer">
            <Link
              href="/dashboard"
              className={`sidebar-link ${
                pathname === "/dashboard" ? "active" : ""
              }`}
              onMouseEnter={handleMouseEnter}
              onMouseLeave={handleMouseLeave}
            >
              <SidebarItem icon={faBook} text="Dashboard" />
            </Link>
            <Link
              href="/settings"
              className={`sidebar-link ${
                pathname === "/settings" ? "active" : ""
              }`}
              onMouseEnter={handleMouseEnter}
              onMouseLeave={handleMouseLeave}
            >
              <SidebarItem icon={faCogs} text="Settings" />
            </Link>

            <SidebarItem icon={faCodeCommit} text={config.version} />
          </div>
        )}
      </div>
    </div>
  );
};

const SidebarItem = ({ icon, text }) => {
  return (
    <div className="sidebar-item">
      <FontAwesomeIcon icon={icon} size="lg" />
      <p className="sidebar-item-text">{text}</p>
    </div>
  );
};

export default Sidebar;