Add sidebar navigation with responsive bottom bar

Three pages: AutoTrader, AutoBuyer, AutoRequester. Fixed left sidebar on desktop (md+), bottom tab bar on mobile. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-10 15:00:41 -05:00
parent b990ba0606
commit 881c210366
4 changed files with 129 additions and 1 deletions
@@ -0,0 +1,100 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+const NAV_ITEMS = [
+    {
+        label: 'AutoTrader',
+        href: '/',
+        icon: (
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
+            </svg>
+        ),
+    },
+    {
+        label: 'AutoBuyer',
+        href: '/autobuyer',
+        icon: (
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <circle cx="9" cy="21" r="1" />
+                <circle cx="20" cy="21" r="1" />
+                <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" />
+            </svg>
+        ),
+    },
+    {
+        label: 'AutoRequester',
+        href: '/autorequester',
+        icon: (
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+                <polyline points="14 2 14 8 20 8" />
+                <line x1="12" y1="18" x2="12" y2="12" />
+                <line x1="9" y1="15" x2="15" y2="15" />
+            </svg>
+        ),
+    },
+];
+
+export default function Sidebar() {
+    const pathname = usePathname();
+
+    return (
+        <>
+            {/* Desktop sidebar */}
+            <aside className="fixed top-0 left-0 h-screen w-56 bg-slate-900 text-white hidden md:flex flex-col z-50">
+                <div className="px-5 py-5 border-b border-slate-700">
+                    <span className="text-lg font-bold tracking-tight">AutoTrader</span>
+                </div>
+                <nav className="flex-1 px-3 py-4 flex flex-col gap-1">
+                    {NAV_ITEMS.map((item) => {
+                        const active = item.href === '/'
+                            ? pathname === '/'
+                            : pathname.startsWith(item.href);
+
+                        return (
+                            <Link
+                                key={item.href}
+                                href={item.href}
+                                className={`flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors ${
+                                    active
+                                        ? 'bg-slate-700 text-white'
+                                        : 'text-slate-400 hover:text-white hover:bg-slate-800'
+                                }`}
+                            >
+                                {item.icon}
+                                {item.label}
+                            </Link>
+                        );
+                    })}
+                </nav>
+            </aside>
+
+            {/* Mobile bottom bar */}
+            <nav className="fixed bottom-0 left-0 right-0 bg-slate-900 text-white flex md:hidden items-center justify-around z-50 border-t border-slate-700 px-2 py-1 safe-bottom">
+                {NAV_ITEMS.map((item) => {
+                    const active = item.href === '/'
+                        ? pathname === '/'
+                        : pathname.startsWith(item.href);
+
+                    return (
+                        <Link
+                            key={item.href}
+                            href={item.href}
+                            className={`flex flex-col items-center gap-1 px-3 py-2 rounded-lg text-[11px] font-medium transition-colors ${
+                                active
+                                    ? 'text-white'
+                                    : 'text-slate-400'
+                            }`}
+                        >
+                            {item.icon}
+                            {item.label}
+                        </Link>
+                    );
+                })}
+            </nav>
+        </>
+    );
+}