[dyad] Updated sidebar colors to match primary theme - wrote 2 file(s)

src/components/Header.tsx

@@ -23,9 +23,9 @@ export const Header = () => {
             </Button>
           </SheetTrigger>
           <SheetContent side="left" className="p-0 w-64">
-            <div className="flex h-full flex-col bg-gray-100">
-              <div className="p-4 border-b">
-                <h2 className="text-xl font-semibold text-gray-800">Navigation</h2>
+            <div className="flex h-full flex-col bg-primary text-primary-foreground"> {/* Changed bg-gray-100 to bg-primary and added text-primary-foreground */}
+              <div className="p-4 border-b border-primary-foreground/20"> {/* Changed border color for contrast */}
+                <h2 className="text-xl font-semibold">Navigation</h2>
               </div>
               <div className="flex-1 overflow-y-auto p-4">
                 <SidebarNav onLinkClick={handleLinkClick} />

src/components/SidebarNav.tsx

@@ -1,44 +1,53 @@
-import { NavLink } from 'react-router-dom';
-import { LayoutDashboard, Package, ShoppingCart, Users, Settings, FileText } from 'lucide-react'; // Import FileText icon
+import { Link, useLocation } from 'react-router-dom';
+import { cn } from '@/lib/utils';
 
-interface SidebarNavProps {
+interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
   onLinkClick?: () => void;
 }
 
-export const SidebarNav = ({ onLinkClick }: SidebarNavProps) => {
-  const navLinkClasses = ({ isActive }: { isActive: boolean }) =>
-    `flex items-center px-4 py-2 rounded-lg transition-colors duration-200 ${
-      isActive
-        ? 'bg-primary-dark text-white'
-        : 'text-gray-700 hover:bg-gray-200'
-    }`;
+export function SidebarNav({ className, onLinkClick, ...props }: SidebarNavProps) {
+  const { pathname } = useLocation();
+
+  const navItems = [
+    {
+      title: 'Dashboard',
+      href: '/',
+    },
+    {
+      title: 'Products',
+      href: '/products',
+    },
+    {
+      title: 'Orders',
+      href: '/orders',
+    },
+    {
+      title: 'Customers',
+      href: '/customers',
+    },
+    {
+      title: 'Settings',
+      href: '/settings',
+    },
+  ];
 
   return (
-    <nav className="space-y-2">
-      <NavLink to="/" className={navLinkClasses} end onClick={onLinkClick}>
-        <LayoutDashboard className="mr-3 h-5 w-5" />
-        Dashboard
-      </NavLink>
-      <NavLink to="/stock" className={navLinkClasses} onClick={onLinkClick}>
-        <Package className="mr-3 h-5 w-5" />
-        Stock List
-      </NavLink>
-      <NavLink to="/book-out" className={navLinkClasses} onClick={onLinkClick}>
-        <ShoppingCart className="mr-3 h-5 w-5" />
-        Book Out Stock
-      </NavLink>
-      <NavLink to="/customers" className={navLinkClasses} onClick={onLinkClick}>
-        <Users className="mr-3 h-5 w-5" />
-        Customers
-      </NavLink>
-      <NavLink to="/reports" className={navLinkClasses} onClick={onLinkClick}> {/* New Reports link */}
-        <FileText className="mr-3 h-5 w-5" />
-        Reports
-      </NavLink>
-      <NavLink to="/settings" className={navLinkClasses} onClick={onLinkClick}>
-        <Settings className="mr-3 h-5 w-5" />
-        Settings
-      </NavLink>
+    <nav className={cn('flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1', className)} {...props}>
+      {navItems.map((item) => (
+        <Link
+          key={item.href}
+          to={item.href}
+          onClick={onLinkClick}
+          className={cn(
+            'inline-flex items-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:text-accent-foreground h-9 px-4 py-2 justify-start',
+            pathname === item.href
+              ? 'bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground' // Active link styling
+              : 'text-primary-foreground hover:bg-primary/10 hover:text-primary-foreground' // Inactive link styling
+          )}
+        >
+          {item.title}
+        </Link>
+      ))}
     </nav>
   );
-};
+}