Kemas M. Aryadary Rasyad
118 lines
4.2 KiB
TypeScript
118 lines
4.2 KiB
TypeScript
import { useNavigate, useLocation } from 'react-router-dom';
|
|
import { Home, FolderKanban, UsersRound, FileBadge , Settings, HelpCircle, LogOut, X } from 'lucide-react';
|
|
import { FaUserTie } from "react-icons/fa";
|
|
|
|
const navItems = [
|
|
{ label: "Home", icon: Home, path: "/mentor" },
|
|
{ label: "List Projects", icon: FolderKanban, path: "/mentor/projects" },
|
|
{ label: "Interns", icon: UsersRound, path: "/mentor/intern" },
|
|
{ label: "Certificates", icon: FileBadge, path: "/mentor/certificates" },
|
|
];
|
|
|
|
const prefItems = [
|
|
{ label: "Settings", icon: Settings, path: "/mentor/settings" },
|
|
{ label: "FAQ", icon: HelpCircle, path: "/mentor/faq" },
|
|
{ label: "Logout", icon: LogOut, path: "/login-internify", danger: true, isLogout: true },
|
|
];
|
|
|
|
interface SidebarProps {
|
|
isOpen: boolean;
|
|
closeSidebar: () => void;
|
|
}
|
|
|
|
export default function SidebarMentor({ 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">
|
|
<FaUserTie 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 + "/mentor");
|
|
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, 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>
|
|
);
|
|
}
|