40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
|
"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>
|
||
|
|
);
|
||
|
|
}
|