internify-fe/src/Pages/internify/intern/components/SidebarIntern.tsx

import { useNavigate, useLocation } from 'react-router-dom';
import { Award, Settings, HelpCircle, X } from 'lucide-react';
import { GrHomeRounded } from "react-icons/gr";
import { MdOutlineAssignment, MdLogout } from "react-icons/md";
import { HiUser } from "react-icons/hi2";

const navItems = [
  { label: "Home", icon: GrHomeRounded, path: "/intern" },
  { label: "List Projects", icon: MdOutlineAssignment, path: "/intern/projects" },
  { label: "Certificates", icon: Award, path: "/intern/certificates" },
];

const prefItems = [
  { label: "Settings", icon: Settings, path: "/intern/settings" },
  { label: "FAQ", icon: HelpCircle, path: "/intern/faq" },
  { label: "Logout", icon: MdLogout, path: "/login-internify", danger: true, isLogout: true },
];

interface SidebarProps {
  isOpen: boolean;
  closeSidebar: () => void;
}

export default function SidebarIntern({ isOpen, closeSidebar }: SidebarProps) {
  const navigate = useNavigate();
  const location = useLocation();

  const handleNav = (path: string) => {
    navigate(path);
    closeSidebar();
  };

  const handleLogout = () => {
    document.cookie = "token=; path=/; max-age=86400; SameSite=Strict";

    closeSidebar();
    navigate("/login-internify", { replace: true });
  };

  return (
    <aside
      className={`
        bg-white border-r border-gray-300 flex flex-col py-5 px-3 gap-1 overflow-y-auto flex-shrink-0 transition-transform duration-300 ease-in-out
        lg:sticky lg:top-[50px] lg:h-[calc(100vh-73px)] lg:w-[250px] lg:translate-x-0 lg:z-8
        fixed top-0 left-0 h-screen w-[270px] z-40 pt-5
        ${isOpen ? "translate-x-0" : "-translate-x-full"}
      `}
    >
      {/* Brand & Tombol Close untuk Mobile */}
      <div className="flex items-center justify-between px-2 pb-6">
        <div className="flex items-center gap-2.5">
          <div className="w-9 h-9 rounded-[10px] bg-red flex items-center justify-center flex-shrink-0">
            <HiUser className="w-[18px] h-[18px] text-white"/>
          </div>
          <div>
            <p className="text-[19px] font-bold text-font-shade leading-tight">Internify</p>
            <p className="text-[14px] text-font">LMS Portal</p>
          </div>
        </div>
        <button
          onClick={closeSidebar}
          className="p-1 text-gray-500 hover:bg-gray-100 rounded-lg lg:hidden"
        >
          <X className="w-5 h-5" />
        </button>
      </div>

      {/* Main nav */}
      <nav className="flex flex-col gap-0.5">
        {navItems.map(({ label, icon: Icon, path }) => {
          const isActive = location.pathname === path || location.pathname.startsWith(path + "/intern");
          return (
            <button
              key={path}
              onClick={() => handleNav(path)}
              className={`flex items-center gap-2.5 w-full px-3 py-2 rounded-lg text-[13.5px] font-medium text-left transition-colors
                ${isActive
                  ? "bg-red-foreground text-red font-semibold border-l-4 border-base"
                  : "text-font hover:bg-red-foreground"
                }`}
            >
              <Icon className="w-[18px] h-[18px] flex-shrink-0" />
              <span>{label}</span>
            </button>
          );
        })}
      </nav>

      <div className="h-px bg-gray-300 my-1" />

      {/* Preferences */}
      <p className="text-[10px] font-semibold tracking-widest text-font px-3 py-1.5">
        PREFERENCES
      </p>
      <nav className="flex flex-col gap-0.5">
        {prefItems.map(({ label, icon: Icon, path, danger, isLogout }) => {
          const isActive = location.pathname === path;
          return (
            <button
              key={path}
              onClick={() => isLogout ? handleLogout() : handleNav(path)}
              className={`flex items-center gap-2.5 w-full px-3 py-2 rounded-lg text-[13.5px] font-medium text-left transition-colors
                ${isActive
                  ? "bg-red-foreground text-red font-semibold border-l-4 border-base"
                  : "text-font hover:bg-red-foreground"
                }`}
            >
              <Icon className="w-[18px] h-[18px] flex-shrink-0" />
              <span>{label}</span>
            </button>
          );
        })}
      </nav>
    </aside>
  );
}