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,39 @@
+"use client";
+import { SidebarNav } from "./SidebarNav";
+import { WatchlistSidebar } from "./WatchlistSidebar";
+import { SymbolHeader } from "./SymbolHeader";
+import { MobileTabNav } from "./MobileTabNav";
+
+/**
+ * Main layout shell for the redesigned terminal.
+ * - Desktop (>1024px): Sidebar + Watchlist + Header + Content (3-column)
+ * - Tablet (768-1024px): Watchlist + Header + Content (2-column, sidebar hidden)
+ * - Mobile (<768px): Header + Content + TabBar (single column)
+ */
+export function LayoutShell({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="min-h-screen bg-[#0a0b0f] text-[#e6e7ec] flex flex-col">
+      {/* Symbol Header — always visible */}
+      <SymbolHeader />
+
+      {/* Main Content Area */}
+      <div className="flex flex-1 overflow-hidden">
+        {/* Left Sidebar Navigation — hidden on tablet/mobile */}
+        <SidebarNav />
+
+        {/* Watchlist Sidebar — hidden on mobile */}
+        <WatchlistSidebar />
+
+        {/* Content */}
+        <main className="flex-1 overflow-y-auto p-4 sm:p-6 pb-20 md:pb-6">
+          <div className="max-w-7xl mx-auto space-y-6">
+            {children}
+          </div>
+        </main>
+      </div>
+
+      {/* Mobile Tab Navigation — shown on mobile only */}
+      <MobileTabNav />
+    </div>
+  );
+}
@@ -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>
+  );
+}