86 lines
2.6 KiB
TypeScript
86 lines
2.6 KiB
TypeScript
import {
|
|
Building2,
|
|
Calendar,
|
|
FileText,
|
|
LayoutDashboard,
|
|
LogOut,
|
|
Music,
|
|
Settings,
|
|
Users,
|
|
} from "lucide-react";
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import React from "react";
|
|
|
|
const navItems = [
|
|
{ icon: LayoutDashboard, label: "Overview", path: "/" },
|
|
{ icon: Users, label: "People", path: "#people" },
|
|
{ icon: Calendar, label: "Worship & Events", path: "#events" },
|
|
{ icon: Music, label: "Music & Media", path: "#music" },
|
|
{ icon: FileText, label: "Changes & Logs", path: "#logs" },
|
|
{ icon: Settings, label: "Settings", path: "#settings" },
|
|
];
|
|
|
|
type SidebarProps = {
|
|
open?: boolean;
|
|
close: () => void;
|
|
};
|
|
|
|
const Sidebar: React.FC<SidebarProps> = ({ open, close }) => {
|
|
const pathName = usePathname();
|
|
|
|
return (
|
|
<aside
|
|
data-cmp="Sidebar"
|
|
className={`side-bar border-border fixed top-0 left-0 z-30 h-screen w-64 flex-col border-r md:flex ${open ? "flex" : "hidden"}`}
|
|
>
|
|
<div className="border-border border-b p-6">
|
|
<div className="flex items-center space-x-3">
|
|
<div className="bg-primary flex h-8 w-8 items-center justify-center rounded-lg">
|
|
<Building2 className="text-primary-foreground h-5 w-5" />
|
|
</div>
|
|
<span className="from-primary bg-gradient-to-r to-purple-600 bg-clip-text text-xl font-bold text-transparent">
|
|
CGR Admin
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<nav className="flex-1 space-y-1 overflow-y-auto px-3 py-6">
|
|
{navItems.map((item) => {
|
|
const isActive = pathName === item.path;
|
|
return (
|
|
<Link
|
|
key={item.label}
|
|
href={item.path}
|
|
className={`flex items-center space-x-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors ${
|
|
isActive
|
|
? "bg-primary/10 text-primary"
|
|
: "text-muted-foreground hover:bg-muted hover:text-foreground"
|
|
}`}
|
|
onClick={() => {
|
|
if (open) {
|
|
close();
|
|
}
|
|
}}
|
|
>
|
|
<item.icon
|
|
className={`h-5 w-5 ${isActive ? "text-primary" : ""}`}
|
|
/>
|
|
<span>{item.label}</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
<div className="border-border border-t p-4">
|
|
<button className="text-destructive hover:bg-destructive/10 flex w-full items-center space-x-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors">
|
|
<LogOut className="h-5 w-5" />
|
|
<span>Sign Out</span>
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
);
|
|
};
|
|
|
|
export default Sidebar;
|