There seems to be box with something in it on the far tight, but I can't see it or do anything with it because it is not in the center and I can't close it

index.html

@@ -25,17 +25,23 @@
             padding: 20px;
         }
         #sidebar {
-            width: 0;
+            width: 300px;
             position: fixed;
-            right: 0;
+            right: -300px;
             top: 0;
             height: 100%;
-            overflow-x: hidden;
-            transition: 0.5s;
+            overflow-y: auto;
+            transition: right 0.5s ease;
             background-color: #f8f9fa;
             z-index: 1000;
+            padding: 20px;
+            box-shadow: -2px 0 5px rgba(0,0,0,0.1);
+        }
+
+        #sidebar.open {
+            right: 0;
         }
-        #main {
+#main {
             transition: margin-left .5s;
         }
         .tooltip {
@@ -200,9 +206,16 @@
             // Event listeners
             document.getElementById('addPairsBtn').addEventListener('click', addSelectedPairs);
             document.getElementById('clearPairsBtn').addEventListener('click', clearAllPairs);
-settingsBtn.addEventListener('click', openSidebar);
+            settingsBtn.addEventListener('click', openSidebar);
             closeSidebar.addEventListener('click', closeSidebar);
-            darkModeToggle.addEventListener('click', function() {
+            
+            // Close sidebar when clicking outside
+            document.addEventListener('click', function(event) {
+                if (!sidebar.contains(event.target) && event.target !== settingsBtn) {
+                    closeSidebar();
+                }
+            });
+darkModeToggle.addEventListener('click', function() {
                 document.body.classList.toggle('dark-mode');
                 const isDarkMode = document.body.classList.contains('dark-mode');
                 
@@ -494,15 +507,12 @@ function subscribeToPair(pair) {
                 }
             });
         }
-
         function openSidebar() {
-            sidebar.style.width = '300px';
-            document.getElementById('main').style.marginRight = '300px';
+            sidebar.classList.add('open');
         }
 
         function closeSidebar() {
-            sidebar.style.width = '0';
-            document.getElementById('main').style.marginRight = '0';
+            sidebar.classList.remove('open');
         }
 function updateChartTheme(pair, isDarkMode) {
             charts[pair].chart.applyOptions({