From ee58df616923c5945d471bd50e27774acfc18f68 Mon Sep 17 00:00:00 2001
From: DiTus <ditus@o2.pl>
Date: Sat, 21 Mar 2026 08:18:57 +0100
Subject: [PATCH] add: Mobile menu button in top-left corner

---
 index.html | 29 +++++++++++++++++++++++------
 js/app.js  | 14 +++++++++++++-
 2 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index eb64d79..1931222 100644
--- a/index.html
+++ b/index.html
@@ -47,10 +47,25 @@
 
     <!-- Top Navigation Bar -->
     <header class="bg-[#0f131e] fixed top-0 w-full z-[60] h-16 px-6 flex items-center justify-between border-b border-[#1b1f2b]">
-        <div class="flex items-center space-x-3 bg-[#1a2333] px-3 py-1.5 rounded-md cursor-pointer border border-[#2d3a4f]">
-            <span class="material-symbols-outlined text-sm text-[#8fa2b3]">search</span>
-            <span class="font-bold text-sm text-[#dfe2f2]">BTC/USD</span>
-            <span class="material-symbols-outlined text-sm text-[#8fa2b3]">chevron_right</span>
+        <div class="flex items-center gap-3">
+            <!-- Mobile Menu Button -->
+            <button id="mobileMenuBtn" class="md:hidden w-10 h-10 flex items-center justify-center text-[#8fa2b3] hover:text-white hover:bg-[#2d3a4f] rounded-md transition-colors z-50">
+                <span class="material-symbols-outlined text-lg">menu</span>
+            </button>
+            
+            <!-- Search/Symbol Button -->
+            <div class="hidden md:flex items-center space-x-3 bg-[#1a2333] px-3 py-1.5 rounded-md cursor-pointer border border-[#2d3a4f]">
+                <span class="material-symbols-outlined text-sm text-[#8fa2b3]">search</span>
+                <span class="font-bold text-sm text-[#dfe2f2]">BTC/USD</span>
+                <span class="material-symbols-outlined text-sm text-[#8fa2b3]">chevron_right</span>
+            </div>
+            
+            <!-- Mobile Search -->
+            <div class="md:hidden flex items-center bg-[#1a2333] px-3 py-1.5 rounded-md cursor-pointer border border-[#2d3a4f]">
+                <span class="material-symbols-outlined text-sm text-[#8fa2b3]">search</span>
+                <span class="font-bold text-sm text-[#dfe2f2] ml-2">BTC/USD</span>
+                <span class="material-symbols-outlined text-sm text-[#8fa2b3] ml-2">chevron_right</span>
+            </div>
         </div>
         
         <div class="hidden md:flex items-center gap-2 mr-4">
@@ -243,8 +258,10 @@
              </button>
         </div>
         
-        <!-- We need to preserve the ID 'sidebarToggleBtn' if JS binds to it -->
-        <button id="sidebarToggleBtn" class="hidden"></button>
+        <!-- Desktop Sidebar Toggle -->
+        <button id="sidebarToggleBtn" class="md:flex hidden w-8 h-8 bg-[#1a2333] border border-[#2d3a4f] text-gray-300 flex items-center justify-center rounded hover:bg-[#2d3a4f] transition-colors" title="Toggle Sidebar">
+            <span class="material-symbols-outlined text-sm">menu</span>
+        </button>
 
         <div class="flex-1 overflow-y-auto p-0 sidebar-content bg-[#0d1421]">
              <div class="sidebar-tab-panel active h-full" id="tab-indicators">
diff --git a/js/app.js b/js/app.js
index 839bb38..a164d98 100644
--- a/js/app.js
+++ b/js/app.js
@@ -32,11 +32,23 @@ window.updateIndicatorCandles = drawIndicatorsOnChart;
 window.IndicatorRegistry = IndicatorRegistry;
 
 document.addEventListener('DOMContentLoaded', async () => {
-    // Attach toggle sidebar event listener
+    // Attach toggle sidebar event listeners
     const toggleBtn = document.getElementById('sidebarToggleBtn');
     if (toggleBtn) {
         toggleBtn.addEventListener('click', toggleSidebar);
     }
+    
+    // Mobile menu button
+    const mobileMenuBtn = document.getElementById('mobileMenuBtn');
+    if (mobileMenuBtn) {
+        mobileMenuBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const sidebar = document.getElementById('rightSidebar');
+            if (sidebar) {
+                sidebar.classList.toggle('collapsed');
+            }
+        });
+    }
 
     // Initialize timezone selector
     const timezoneSelect = document.getElementById('timezoneSelect');