118 lines
2.6 KiB
TypeScript
118 lines
2.6 KiB
TypeScript
// src/components/sidebar/Sidebar.tsx
|
|
|
|
import { NavLink } from "react-router-dom";
|
|
import {
|
|
LayoutDashboard,
|
|
ClipboardList,
|
|
Settings,
|
|
Menu,
|
|
Globe,
|
|
} from "lucide-react";
|
|
|
|
type SidebarProps = {
|
|
isOpen: boolean;
|
|
setIsOpen: (value: boolean) => void;
|
|
};
|
|
|
|
const menuItems = [
|
|
{
|
|
name: "Dashboard",
|
|
path: "/",
|
|
icon: <LayoutDashboard size={22} />,
|
|
},
|
|
|
|
{
|
|
name: "Master Barang",
|
|
path: "/master-data",
|
|
icon: <ClipboardList size={22} />,
|
|
},
|
|
|
|
{
|
|
name: "Settings",
|
|
path: "/settings",
|
|
icon: <Settings size={22} />,
|
|
},
|
|
|
|
{
|
|
name: "Bahasa",
|
|
path: "/bahasa",
|
|
icon: <Globe size={22} />,
|
|
},
|
|
|
|
{
|
|
name: "transaksiBAST",
|
|
path: "/transaksiBAST",
|
|
icon: <ClipboardList size={22} />,
|
|
},
|
|
];
|
|
|
|
export default function Sidebar({
|
|
isOpen,
|
|
setIsOpen,
|
|
}: SidebarProps) {
|
|
return (
|
|
<aside
|
|
className={`fixed top-0 left-0 h-screen bg-black text-white shadow-2xl transition-all duration-300 z-50
|
|
${isOpen ? "w-64" : "w-20"}`}
|
|
>
|
|
{/* HEADER */}
|
|
<div className="h-24 px-4 border-b border-gray-800 flex items-center justify-between">
|
|
{isOpen && (
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-blue-500 leading-none">
|
|
SCHOOL
|
|
<br />
|
|
LOAN
|
|
</h1>
|
|
|
|
<p className="text-sm text-gray-400 mt-2">
|
|
Sistem Peminjaman
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* TOGGLE */}
|
|
<button
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
className="bg-blue-600 hover:bg-blue-700 transition p-3 rounded-2xl"
|
|
>
|
|
<Menu size={22} />
|
|
</button>
|
|
</div>
|
|
|
|
{/* MENU */}
|
|
<nav className="mt-6 px-4 space-y-3">
|
|
{menuItems.map((item, index) => (
|
|
<NavLink
|
|
key={index}
|
|
to={item.path}
|
|
className={({ isActive }) =>
|
|
`flex items-center ${
|
|
isOpen ? "justify-start" : "justify-center"
|
|
} gap-4 px-5 py-4 rounded-2xl transition-all duration-200 ${
|
|
isActive
|
|
? "bg-blue-600 text-white shadow-lg"
|
|
: "text-gray-300 hover:bg-gray-900 hover:text-white"
|
|
}`
|
|
}
|
|
>
|
|
{item.icon}
|
|
|
|
{isOpen && (
|
|
<span className="text-lg font-medium">
|
|
{item.name}
|
|
</span>
|
|
)}
|
|
</NavLink>
|
|
))}
|
|
</nav>
|
|
|
|
{/* FOOTER */}
|
|
{isOpen && (
|
|
<div className="absolute bottom-5 left-5 text-sm text-gray-500">
|
|
© 2026 School Loan
|
|
</div>
|
|
)}
|
|
</aside>
|
|
);
|
|
} |