stock request

src/components/Sidebar.tsx

@@ -10,27 +10,28 @@ import {
   Layers,
   Settings,
   TrendingUp,
-  ShieldAlert
+  ShieldAlert,
+  Users
 } from 'lucide-react';
+import { NavLink, useLocation } from 'react-router-dom';
 import { MainSection } from '../types';
 
 interface SidebarProps {
-  currentSection: MainSection;
-  setCurrentSection: (section: MainSection) => void;
   isCoimbatoreView: boolean;
   setIsCoimbatoreView: (val: boolean) => void;
   isOpen: boolean;
   isAdmin?: boolean;
+  onClose: () => void;
 }
 
 export default function Sidebar({
-  currentSection,
-  setCurrentSection,
   isCoimbatoreView,
   setIsCoimbatoreView,
   isOpen,
-  isAdmin
+  isAdmin,
+  onClose
 }: SidebarProps) {
+  const location = useLocation();
   // Navigation elements
   const navItems = [
     { id: 'dashboard' as MainSection, label: 'Dashboard', icon: LayoutDashboard },
@@ -40,36 +41,48 @@ export default function Sidebar({
   ];
 
   return (
-    <aside
-      className={`fixed left-0 top-0 h-screen bg-[#662582] border-r border-[#662582] text-white flex-col py-xl pt-16 z-40 hidden md:flex transition-all duration-300 ${
-        isOpen ? 'w-64' : 'w-20'
-      }`}
-    >
-      {/* Main Navigation Sidebar Links */}
-      <nav className="flex-1 space-y-1 overflow-y-auto px-xs">
-        {navItems.map((item) => {
-          const IconComponent = item.icon;
-          const isActive = currentSection === item.id;
-          return (
-            <button
-              key={item.id}
-              onClick={() => setCurrentSection(item.id)}
-              title={item.label}
-              className={`w-full flex items-center py-3 rounded-lg text-left transition-all duration-200 cursor-pointer ${
-                isOpen ? 'gap-md px-md' : 'justify-center px-0'
-              } ${
-                isActive
-                  ? 'bg-black/20 text-white font-semibold' + (isOpen ? ' border-l-4 border-white' : '')
-                  : 'text-purple-200 hover:bg-white/10 hover:text-white'
-              }`}
-            >
-              <IconComponent size={18} className={isActive ? 'text-white' : 'text-purple-300'} />
-              {isOpen && <span className="font-sans text-sm font-medium">{item.label}</span>}
-            </button>
-          );
-        })}
-      </nav>
-    </aside>
+    <>
+      {/* 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] border-r border-[#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-20'
+        }`}
+      >
+        {/* 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}
+                className={({ isActive }) => `w-full flex items-center py-3 rounded-lg text-left transition-all duration-200 cursor-pointer ${
+                  isOpen ? 'gap-md px-md' : 'justify-center px-0'
+                } ${
+                  isActive
+                    ? 'bg-black/20 text-white font-semibold' + (isOpen ? ' border-l-4 border-white' : '')
+                    : 'text-purple-200 hover:bg-white/10 hover:text-white'
+                }`}
+              >
+                {({ 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>
+    </>
   );
 }
-