feat: relocate orders and deliveries to store console & polish store cover images

src/components/Sidebar.tsx

@@ -0,0 +1,73 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import {
+  LayoutDashboard,
+  Store,
+  Layers,
+  ShoppingBag,
+  Users,
+  Settings
+} from 'lucide-react';
+import { MainSection } from '../types';
+
+interface SidebarProps {
+  currentSection: MainSection;
+  setCurrentSection: (section: MainSection) => void;
+  isCoimbatoreView: boolean;
+  setIsCoimbatoreView: (val: boolean) => void;
+  isOpen: boolean;
+}
+
+export default function Sidebar({
+  currentSection,
+  setCurrentSection,
+  isCoimbatoreView,
+  setIsCoimbatoreView,
+  isOpen
+}: SidebarProps) {
+  // Navigation elements
+  const navItems = [
+    { id: 'dashboard' as MainSection, label: 'Dashboard', icon: LayoutDashboard },
+    { id: 'stores' as MainSection, label: 'Stores', icon: Store },
+    { id: 'inventory' as MainSection, label: 'Inventory Catalog', icon: Layers },
+    { id: 'users' as MainSection, label: 'Users', icon: Users },
+    { id: 'settings' as MainSection, label: 'Settings', icon: Settings }
+  ];
+
+  return (
+    <aside
+      className={`fixed left-0 top-0 h-screen bg-[#581c87] border-r border-[#4c1d95] text-white flex-col py-xl pt-24 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-purple-800 text-white font-semibold' + (isOpen ? ' border-l-4 border-white' : '')
+                  : 'text-purple-200 hover:bg-purple-800/60 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>
+  );
+}