50 lines
No EOL
1.7 KiB
TypeScript
50 lines
No EOL
1.7 KiB
TypeScript
import { NavLink } from 'react-router-dom';
|
|
import { LayoutDashboard, Package, ShoppingCart, Users, Settings, Box } from 'lucide-react';
|
|
import { MadeWithDyad } from './made-with-dyad';
|
|
|
|
const Sidebar = () => {
|
|
const navLinkClasses = ({ isActive }: { isActive: boolean }) =>
|
|
`flex items-center px-4 py-2 rounded-lg transition-colors duration-200 ${
|
|
isActive
|
|
? 'bg-blue-500 text-white'
|
|
: 'text-gray-700 hover:bg-gray-200'
|
|
}`;
|
|
|
|
return (
|
|
<aside className="w-64 flex-shrink-0 bg-white p-4 hidden md:flex flex-col">
|
|
<div>
|
|
<div className="flex items-center mb-8">
|
|
<Box className="h-8 w-8 text-blue-600 mr-2" />
|
|
<h1 className="text-xl font-bold text-gray-800">JEI Stock Take</h1>
|
|
</div>
|
|
<nav className="space-y-2">
|
|
<NavLink to="/" className={navLinkClasses} end>
|
|
<LayoutDashboard className="mr-3 h-5 w-5" />
|
|
Dashboard
|
|
</NavLink>
|
|
<NavLink to="/stock" className={navLinkClasses}>
|
|
<Package className="mr-3 h-5 w-5" />
|
|
Stock List
|
|
</NavLink>
|
|
<NavLink to="/book-out" className={navLinkClasses}>
|
|
<ShoppingCart className="mr-3 h-5 w-5" />
|
|
Book Out Stock
|
|
</NavLink>
|
|
<NavLink to="/customers" className={navLinkClasses}>
|
|
<Users className="mr-3 h-5 w-5" />
|
|
Customers
|
|
</NavLink>
|
|
<NavLink to="/settings" className={navLinkClasses}>
|
|
<Settings className="mr-3 h-5 w-5" />
|
|
Settings
|
|
</NavLink>
|
|
</nav>
|
|
</div>
|
|
<div className="mt-auto">
|
|
<MadeWithDyad />
|
|
</div>
|
|
</aside>
|
|
);
|
|
};
|
|
|
|
export default Sidebar; |