104 lines
4.1 KiB
TypeScript
104 lines
4.1 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { LayoutDashboard, BookOpen, PlusCircle, Calendar, MonitorPlay } from "lucide-react"; // Icon
|
|
|
|
export default function Sidebar() {
|
|
const pathname = usePathname();
|
|
|
|
// Helper untuk mengecek apakah menu sedang aktif
|
|
const isActive = (path: string) => pathname === path;
|
|
|
|
return (
|
|
<aside className="hidden lg:flex flex-col w-72 h-screen overflow-y-hidden bg-slate-900 text-white duration-300 ease-linear dark:bg-slate-900 border-r border-slate-800">
|
|
{/* --- LOGO AREA --- */}
|
|
<div className="flex items-center justify-center gap-2 px-6 py-5.5 lg:py-6.5 border-b border-slate-800">
|
|
<div className="text-2xl font-bold text-yellow-500">S-CLASS</div>
|
|
<div className="text-xs text-gray-400 font-medium">Admin Panel</div>
|
|
</div>
|
|
|
|
{/* --- MENU LIST --- */}
|
|
<div className="no-scrollbar flex flex-col overflow-y-auto duration-300 ease-linear">
|
|
<nav className="mt-5 px-4 py-4 lg:mt-9 lg:px-6">
|
|
|
|
{/* GROUP: MENU UTAMA */}
|
|
<div>
|
|
<h3 className="mb-4 ml-4 text-sm font-semibold text-gray-400">MENU</h3>
|
|
|
|
<ul className="mb-6 flex flex-col gap-1.5">
|
|
|
|
{/* Dashboard */}
|
|
<li>
|
|
<Link
|
|
href="/dashboard"
|
|
className={`group relative flex items-center gap-2.5 rounded-sm px-4 py-2 font-medium duration-300 ease-in-out hover:bg-slate-700 ${
|
|
isActive("/dashboard") ? "bg-slate-700 text-white" : "text-gray-300"
|
|
}`}
|
|
>
|
|
<LayoutDashboard size={18} />
|
|
Dashboard
|
|
</Link>
|
|
</li>
|
|
|
|
{/* GROUP: ROOMS */}
|
|
<li className="mt-4 mb-2 ml-4 text-xs font-medium text-gray-500 uppercase">ROOMS</li>
|
|
|
|
<li>
|
|
<Link
|
|
href="/dashboard/rooms"
|
|
className={`group relative flex items-center gap-2.5 rounded-sm px-4 py-2 font-medium duration-300 ease-in-out hover:bg-slate-700 ${
|
|
isActive("/dashboard/rooms") ? "bg-slate-700 text-white" : "text-gray-300"
|
|
}`}
|
|
>
|
|
<MonitorPlay size={18} />
|
|
View Rooms
|
|
</Link>
|
|
</li>
|
|
|
|
{/* GROUP: BOOKING */}
|
|
<li className="mt-4 mb-2 ml-4 text-xs font-medium text-gray-500 uppercase">BOOKINGS</li>
|
|
|
|
<li>
|
|
<Link
|
|
href="/dashboard/bookings"
|
|
className={`group relative flex items-center gap-2.5 rounded-sm px-4 py-2 font-medium duration-300 ease-in-out hover:bg-slate-700 ${
|
|
isActive("/dashboard/bookings") ? "bg-slate-700 text-white" : "text-gray-300"
|
|
}`}
|
|
>
|
|
<BookOpen size={18} />
|
|
View Booking
|
|
</Link>
|
|
</li>
|
|
|
|
<li>
|
|
<Link
|
|
href="/dashboard/bookings/add"
|
|
className={`group relative flex items-center gap-2.5 rounded-sm px-4 py-2 font-medium duration-300 ease-in-out hover:bg-slate-700 ${
|
|
isActive("/dashboard/bookings/add") ? "bg-slate-700 text-white" : "text-gray-300"
|
|
}`}
|
|
>
|
|
<PlusCircle size={18} />
|
|
Add Booking
|
|
</Link>
|
|
</li>
|
|
|
|
<li>
|
|
<Link
|
|
href="/dashboard/bookings/calendar"
|
|
className={`group relative flex items-center gap-2.5 rounded-sm px-4 py-2 font-medium duration-300 ease-in-out hover:bg-slate-700 ${
|
|
isActive("/dashboard/bookings/calendar") ? "bg-slate-700 text-white" : "text-gray-300"
|
|
}`}
|
|
>
|
|
<Calendar size={18} />
|
|
Calendar View
|
|
</Link>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</aside>
|
|
);
|
|
} |