Kemas M. Aryadary Rasyad
111 lines
4.1 KiB
TypeScript
111 lines
4.1 KiB
TypeScript
import { useNavigate, useLocation } from 'react-router-dom';
|
|
import { Home, FolderKanban, Award, Settings, HelpCircle, LogOut, ChevronRight, X } from 'lucide-react';
|
|
|
|
const navItems = [
|
|
{ label: "Home", icon: Home, path: "/intern" },
|
|
{ label: "List Projects", icon: FolderKanban, 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: LogOut, path: "/login-internify", danger: 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(); // Otomatis tutup sidebar setelah klik menu di HP
|
|
};
|
|
|
|
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
|
|
md:sticky md:top-[50px] md:h-[calc(100vh-73px)] md:w-[250px] md:translate-x-0 md:z-8
|
|
fixed top-0 left-0 h-[calc(100vh-50px)] 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-4">
|
|
<div className="flex items-center gap-2.5">
|
|
<div className="w-9 h-9 rounded-[10px] bg-red-600 flex items-center justify-center flex-shrink-0"></div>
|
|
<div>
|
|
<p className="text-sm font-bold text-gray-900 leading-tight">Internify</p>
|
|
<p className="text-[11px] text-gray-400">LMS Portal</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tombol Close silang (X): Hanya muncul di HP saat sidebar terbuka */}
|
|
<button
|
|
onClick={closeSidebar}
|
|
className="p-1 text-gray-500 hover:bg-gray-100 rounded-md md:hidden"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="h-px bg-gray-300 my-1" />
|
|
|
|
{/* Main nav */}
|
|
<nav className="flex flex-col gap-0.5">
|
|
{navItems.map(({ label, icon: Icon, path }) => {
|
|
const isActive = location.pathname === path;
|
|
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-50 text-red-600 font-semibold border-l-4 border-red-600"
|
|
: "text-gray-500 hover:bg-red-50 hover:text-red-600"
|
|
}`}
|
|
>
|
|
<Icon className="w-[18px] h-[18px] flex-shrink-0" />
|
|
<span>{label}</span>
|
|
{isActive && <ChevronRight className="w-3.5 h-3.5 ml-auto opacity-60" />}
|
|
</button>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
<div className="h-px bg-gray-200 my-1" />
|
|
|
|
{/* Preferences */}
|
|
<p className="text-[10px] font-semibold tracking-widest text-gray-400 px-3 py-1.5">
|
|
PREFERENCES
|
|
</p>
|
|
<nav className="flex flex-col gap-0.5">
|
|
{prefItems.map(({ label, icon: Icon, path, danger }) => {
|
|
const isActive = location.pathname === path;
|
|
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-50 text-red-600 font-semibold"
|
|
: danger
|
|
? "text-gray-400 hover:bg-red-50 hover:text-red-600"
|
|
: "text-gray-500 hover:bg-red-50 hover:text-red-600"
|
|
}`}
|
|
>
|
|
<Icon className="w-[18px] h-[18px] flex-shrink-0" />
|
|
<span>{label}</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</nav>
|
|
</aside>
|
|
);
|
|
} |