66 lines
2.5 KiB
TypeScript
66 lines
2.5 KiB
TypeScript
import { NavLink, useLocation } from "react-router-dom";
|
|
import { Coffee, LayoutDashboard, ShoppingCart, UtensilsCrossed, Users, Settings } from "lucide-react";
|
|
|
|
const navItems = [
|
|
{ to: "/", icon: LayoutDashboard, label: "Dashboard" },
|
|
{ to: "/menu", icon: UtensilsCrossed, label: "Menu" },
|
|
{ to: "/orders", icon: ShoppingCart, label: "Orders" },
|
|
{ to: "/customers", icon: Users, label: "Customers" },
|
|
{ to: "/settings", icon: Settings, label: "Settings" },
|
|
];
|
|
|
|
const AppSidebar = () => {
|
|
const location = useLocation();
|
|
|
|
return (
|
|
<aside className="fixed left-0 top-0 z-40 h-screen w-64 bg-sidebar border-r border-sidebar-border flex flex-col">
|
|
{/* Logo */}
|
|
<div className="flex items-center gap-3 px-6 py-6 border-b border-sidebar-border">
|
|
<div className="w-10 h-10 rounded-lg bg-sidebar-primary flex items-center justify-center">
|
|
<Coffee className="w-5 h-5 text-sidebar-primary-foreground" />
|
|
</div>
|
|
<div>
|
|
<h1 className="font-display text-lg font-bold text-sidebar-foreground">Brew & Co</h1>
|
|
<p className="text-xs text-sidebar-foreground/60">Coffee Management</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Navigation */}
|
|
<nav className="flex-1 px-3 py-4 space-y-1">
|
|
{navItems.map((item) => {
|
|
const isActive = location.pathname === item.to;
|
|
return (
|
|
<NavLink
|
|
key={item.to}
|
|
to={item.to}
|
|
className={`flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 ${
|
|
isActive
|
|
? "bg-sidebar-accent text-sidebar-primary"
|
|
: "text-sidebar-foreground/70 hover:text-sidebar-foreground hover:bg-sidebar-accent/50"
|
|
}`}
|
|
>
|
|
<item.icon className="w-5 h-5" />
|
|
{item.label}
|
|
</NavLink>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
{/* Footer */}
|
|
<div className="px-4 py-4 border-t border-sidebar-border">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-8 h-8 rounded-full bg-sidebar-accent flex items-center justify-center text-xs font-semibold text-sidebar-foreground">
|
|
JD
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-medium text-sidebar-foreground">Jane Doe</p>
|
|
<p className="text-xs text-sidebar-foreground/50">Manager</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
);
|
|
};
|
|
|
|
export default AppSidebar;
|