99 lines
3.0 KiB
TypeScript
99 lines
3.0 KiB
TypeScript
/**
|
|
* @license
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
|
|
import React from 'react';
|
|
import {
|
|
LayoutDashboard,
|
|
Store,
|
|
Layers,
|
|
Settings,
|
|
TrendingUp,
|
|
ShieldAlert,
|
|
Users,
|
|
Truck,
|
|
Box,
|
|
Monitor
|
|
} from 'lucide-react';
|
|
import { NavLink, useLocation } from 'react-router-dom';
|
|
import { MainSection } from '../types';
|
|
|
|
interface SidebarProps {
|
|
isCoimbatoreView: boolean;
|
|
setIsCoimbatoreView: (val: boolean) => void;
|
|
isOpen: boolean;
|
|
isAdmin?: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export default function Sidebar({
|
|
isCoimbatoreView,
|
|
setIsCoimbatoreView,
|
|
isOpen,
|
|
isAdmin,
|
|
onClose
|
|
}: SidebarProps) {
|
|
const location = useLocation();
|
|
// Navigation elements
|
|
const navItems = [
|
|
{ id: 'dashboard' as MainSection, label: 'Dashboard', icon: LayoutDashboard },
|
|
{ id: 'inventory' as MainSection, label: 'Products', icon: Layers },
|
|
{ id: 'reports' as MainSection, label: 'Reports', icon: TrendingUp },
|
|
{ id: 'dispatch' as MainSection, label: 'Console', icon: Truck },
|
|
{ id: 'pos' as MainSection, label: 'POS', icon: Monitor },
|
|
{ id: 'settings' as MainSection, label: 'Settings', icon: Settings }
|
|
];
|
|
|
|
return (
|
|
<>
|
|
{/* Mobile Overlay */}
|
|
{isOpen && (
|
|
<div
|
|
className="md:hidden fixed inset-0 bg-black/50 z-40 backdrop-blur-sm"
|
|
onClick={onClose}
|
|
/>
|
|
)}
|
|
|
|
<aside
|
|
className={`fixed left-0 top-0 h-screen bg-[#662582] text-white flex flex-col py-xl pt-16 z-40 transition-all duration-300 ${
|
|
isOpen ? 'translate-x-0 w-64' : '-translate-x-full md:translate-x-0 md:w-16'
|
|
}`}
|
|
>
|
|
{/* Main Navigation Sidebar Links */}
|
|
<nav className="flex-1 space-y-1 overflow-y-auto px-xs">
|
|
{navItems.map((item) => {
|
|
const IconComponent = item.icon;
|
|
return (
|
|
<NavLink
|
|
key={item.id}
|
|
to={`/admin/${item.id}`}
|
|
title={item.label}
|
|
onClick={() => {
|
|
if (window.innerWidth < 768) {
|
|
onClose();
|
|
}
|
|
}}
|
|
className={({ isActive }) => `w-full flex items-center py-3 rounded-lg text-left transition-all duration-200 cursor-pointer ${
|
|
isOpen ? 'gap-md px-md border-l-4' : 'justify-center px-0'
|
|
} ${
|
|
isActive
|
|
? 'bg-black/20 text-white font-semibold' + (isOpen ? ' border-white' : '')
|
|
: 'text-purple-200 hover:bg-white/10 hover:text-white' + (isOpen ? ' border-transparent' : '')
|
|
}`}
|
|
>
|
|
{({ isActive }) => (
|
|
<>
|
|
<IconComponent size={18} className={isActive ? 'text-white' : 'text-purple-300'} />
|
|
{isOpen && <span className="font-sans text-sm font-medium">{item.label}</span>}
|
|
</>
|
|
)}
|
|
</NavLink>
|
|
);
|
|
})}
|
|
</nav>
|
|
</aside>
|
|
</>
|
|
);
|
|
}
|