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>
+  );
+}