feat: add MobileTabNav component for mobile navigation

2026-07-03 22:30:31 -04:00
parent c6027b8a80
commit aa79812158
2 changed files with 89 additions and 0 deletions
@@ -0,0 +1,50 @@
+"use client";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+/**
+ * Mobile tab navigation bar.
+ * Replaces the sidebar on screens <768px.
+ * Displays icon + label for each section; active tab highlighted with accent color (#4f8cff).
+ */
+
+interface TabItem {
+  label: string;
+  href: string;
+  icon: string;
+}
+
+const TABS: TabItem[] = [
+  { label: "Overview", href: "/", icon: "📊" },
+  { label: "Filings", href: "/filings", icon: "📄" },
+  { label: "Options", href: "/options-dd", icon: "🔮" },
+  { label: "Execution", href: "/execution", icon: "⚡" },
+  { label: "Trade Plan", href: "/trade-plan", icon: "📋" },
+  { label: "Settings", href: "/settings", icon: "⚙️" },
+];
+
+export function MobileTabNav() {
+  const pathname = usePathname();
+
+  return (
+    <nav className="flex md:hidden border-t border-[#2a2b3a] bg-[#121318]">
+      {TABS.map((tab) => {
+        const isActive = pathname === tab.href;
+        return (
+          <Link
+            key={tab.href}
+            href={tab.href}
+            className={`flex-1 flex flex-col items-center justify-center py-2 transition-colors ${
+              isActive
+                ? "text-[#4f8cff] border-b-2 border-b-[#4f8cff]"
+                : "text-[#8a8b9a] hover:text-[#e6e7ec]"
+            }`}
+          >
+            <span className="text-base">{tab.icon}</span>
+            <span className="text-[10px] mt-0.5">{tab.label}</span>
+          </Link>
+        );
+      })}
+    </nav>
+  );
+}