[dyad] Fixing sidebar layout on smaller screens - wrote 2 file(s)

src/components/SidebarNav.tsx

@@ -1,66 +1,57 @@
-import { Link, useLocation } from 'react-router-dom';
-import { cn } from '@/lib/utils';
+import { Link, useLocation } from "react-router-dom";
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+import { Home, Book, Users, ArrowLeftRight } from "lucide-react";
 
-interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
-  onLinkClick?: () => void;
+const sidebarNavItems = [
+    {
+        title: "Dashboard",
+        href: "/",
+        icon: Home,
+    },
+    {
+        title: "Books",
+        href: "/books",
+        icon: Book,
+    },
+    {
+        title: "Members",
+        href: "/members",
+        icon: Users,
+    },
+    {
+        title: "Transactions",
+        href: "/transactions",
+        icon: ArrowLeftRight,
+    },
+];
+
+interface SidebarNavProps {
+    onLinkClick?: () => void;
 }
 
-export function SidebarNav({ className, onLinkClick, ...props }: SidebarNavProps) {
-  const { pathname } = useLocation();
+export function SidebarNav({ onLinkClick }: SidebarNavProps) {
+    const { pathname } = useLocation();
 
-  const navItems = [
-    {
-      title: 'Dashboard',
-      href: '/',
-    },
-    {
-      title: 'Stock',
-      href: '/stock',
-    },
-    {
-      title: 'Book Out Stock',
-      href: '/book-out',
-    },
-    {
-      title: 'Customers',
-      href: '/customers',
-    },
-    {
-      title: 'Suppliers', // New nav item
-      href: '/suppliers',
-    },
-    {
-      title: 'Reports',
-      href: '/reports',
-    },
-    {
-      title: 'Purchase Orders',
-      href: '/purchase-orders',
-    },
-    // Removed Products and Orders
-    {
-      title: 'Settings',
-      href: '/settings',
-    },
-  ];
-
-  return (
-    <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'
-              : 'text-primary-foreground hover:bg-primary/10 hover:text-primary-foreground'
-          )}
-        >
-          {item.title}
-        </Link>
-      ))}
-    </nav>
-  );
+    return (
+        <nav className="flex flex-col gap-1 px-2 text-sm font-medium lg:px-4">
+            {sidebarNavItems.map((item, index) => (
+                <Link
+                    key={index}
+                    to={item.href}
+                    onClick={onLinkClick}
+                    className={cn(
+                        buttonVariants({ variant: "ghost" }),
+                        pathname === item.href
+                            ? "bg-muted hover:bg-muted"
+                            : "hover:bg-transparent hover:underline",
+                        "justify-start"
+                    )}
+                >
+                    <item.icon className="mr-2 h-4 w-4" />
+                    {item.title}
+                </Link>
+            ))}
+        </nav>
+    );
 }