feat: add multi-asset sidebar (BTC, USD, XAU) with asset switching

- Added sidebar navigation with 3 tabs: Bitcoin, Dólar, Ouro - Added switchAsset() function to switch between assets - Updated CSS with sidebar layout (fixed 200px sidebar) - Updated script.js with asset state management - Sync sidebar clock and status with main header - BTC remains default active tab
2026-06-15 16:31:17 +00:00
parent e39c5586d7
commit 1e3f2e7199
3 changed files with 153 additions and 7 deletions
@@ -8,7 +8,40 @@
    <link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@400;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
 </head>
 <body>
-    <div class="dashboard">
+    <!-- Sidebar -->
+    <nav class="sidebar" id="sidebar">
+        <div class="sidebar-logo">
+            <span class="sidebar-logo-icon">🏢</span>
+            <div class="sidebar-logo-text">BrainSteel<br><strong>Fin</strong></div>
+        </div>
+        <div class="sidebar-nav">
+            <button class="sidebar-btn active" onclick="switchAsset('btc', this)" data-asset="btc">
+                <span class="sidebar-icon">₿</span>
+                <span class="sidebar-label">Bitcoin</span>
+                <span class="sidebar-pair">BTC/USD</span>
+            </button>
+            <button class="sidebar-btn" onclick="switchAsset('usd', this)" data-asset="usd">
+                <span class="sidebar-icon">💵</span>
+                <span class="sidebar-label">Dólar</span>
+                <span class="sidebar-pair">USD/BRL</span>
+            </button>
+            <button class="sidebar-btn" onclick="switchAsset('xau', this)" data-asset="xau">
+                <span class="sidebar-icon">🪙</span>
+                <span class="sidebar-label">Ouro</span>
+                <span class="sidebar-pair">XAU/USD</span>
+            </button>
+        </div>
+        <div class="sidebar-footer">
+            <div class="sidebar-clock" id="sidebarClock"></div>
+            <div class="sidebar-status">
+                <span class="status-dot" id="sidebarStatusDot"></span>
+                <span id="sidebarStatusText">Online</span>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Main Content -->
+    <div class="main-content" id="mainContent">
        <!-- Header -->
        <header class="header">
            <div class="logo">