update

frontend/static/js/new-main.js

@@ -839,6 +839,91 @@ let huntarrUI = {
         }
     },
     
+    // Sidebar switching functions
+    showMainSidebar: function() {
+        console.log('[huntarrUI] Showing main sidebar');
+        // Hide all sidebars first, then show the target one
+        const sidebars = ['sidebar', 'apps-sidebar', 'settings-sidebar', 'requestarr-sidebar'];
+        
+        sidebars.forEach(sidebarId => {
+            const sidebar = document.getElementById(sidebarId);
+            if (sidebar) {
+                sidebar.classList.remove('visible');
+                sidebar.classList.add('hidden');
+            }
+        });
+        
+        // Show main sidebar
+        const mainSidebar = document.getElementById('sidebar');
+        if (mainSidebar) {
+            mainSidebar.classList.remove('hidden');
+            mainSidebar.classList.add('visible');
+        }
+    },
+    
+    showAppsSidebar: function() {
+        console.log('[huntarrUI] Showing apps sidebar');
+        // Hide all sidebars first, then show the target one
+        const sidebars = ['sidebar', 'apps-sidebar', 'settings-sidebar', 'requestarr-sidebar'];
+        
+        sidebars.forEach(sidebarId => {
+            const sidebar = document.getElementById(sidebarId);
+            if (sidebar) {
+                sidebar.classList.remove('visible');
+                sidebar.classList.add('hidden');
+            }
+        });
+        
+        // Show apps sidebar
+        const appsSidebar = document.getElementById('apps-sidebar');
+        if (appsSidebar) {
+            appsSidebar.classList.remove('hidden');
+            appsSidebar.classList.add('visible');
+        }
+    },
+    
+    showSettingsSidebar: function() {
+        console.log('[huntarrUI] Showing settings sidebar');
+        // Hide all sidebars first, then show the target one
+        const sidebars = ['sidebar', 'apps-sidebar', 'settings-sidebar', 'requestarr-sidebar'];
+        
+        sidebars.forEach(sidebarId => {
+            const sidebar = document.getElementById(sidebarId);
+            if (sidebar) {
+                sidebar.classList.remove('visible');
+                sidebar.classList.add('hidden');
+            }
+        });
+        
+        // Show settings sidebar
+        const settingsSidebar = document.getElementById('settings-sidebar');
+        if (settingsSidebar) {
+            settingsSidebar.classList.remove('hidden');
+            settingsSidebar.classList.add('visible');
+        }
+    },
+    
+    showRequestarrSidebar: function() {
+        console.log('[huntarrUI] Showing requestarr sidebar');
+        // Hide all sidebars first, then show the target one
+        const sidebars = ['sidebar', 'apps-sidebar', 'settings-sidebar', 'requestarr-sidebar'];
+        
+        sidebars.forEach(sidebarId => {
+            const sidebar = document.getElementById(sidebarId);
+            if (sidebar) {
+                sidebar.classList.remove('visible');
+                sidebar.classList.add('hidden');
+            }
+        });
+        
+        // Show requestarr sidebar
+        const requestarrSidebar = document.getElementById('requestarr-sidebar');
+        if (requestarrSidebar) {
+            requestarrSidebar.classList.remove('hidden');
+            requestarrSidebar.classList.add('visible');
+        }
+    },
+    
     // Simple event source disconnection for compatibility
     disconnectAllEventSources: function() {
         // Delegate to LogsModule if it exists

frontend/templates/components/sidebar.html

@@ -1,4 +1,4 @@
-<div class="sidebar" id="sidebar">
+<div class="sidebar visible" id="sidebar">
     <div class="sidebar-top-line"></div>
     <div class="logo-container">
         <a href="https://huntarr.io" target="_blank" rel="noopener noreferrer"
@@ -105,7 +105,7 @@
 </div>
 
 <!-- Requestarr Sidebar -->
-<div class="sidebar requestarr-sidebar" id="requestarr-sidebar" style="display: none;">
+<div class="sidebar requestarr-sidebar hidden" id="requestarr-sidebar">
     <div class="sidebar-top-line"></div>
     <div class="logo-container">
         <a href="https://huntarr.io" target="_blank" rel="noopener noreferrer"
@@ -157,7 +157,7 @@
 </div>
 
 <!-- Apps Sidebar -->
-<div class="sidebar apps-sidebar" id="apps-sidebar" style="display: none;">
+<div class="sidebar apps-sidebar hidden" id="apps-sidebar">
     <div class="sidebar-top-line"></div>
     <div class="logo-container">
         <a href="https://huntarr.io" target="_blank" rel="noopener noreferrer"
@@ -233,7 +233,7 @@
 </div>
 
 <!-- Settings Sidebar -->
-<div class="sidebar settings-sidebar" id="settings-sidebar" style="display: none;">
+<div class="sidebar settings-sidebar hidden" id="settings-sidebar">
     <div class="sidebar-top-line"></div>
     <div class="logo-container">
         <a href="https://huntarr.io" target="_blank" rel="noopener noreferrer"
@@ -620,9 +620,18 @@
         background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
     }
 
+    /* Sidebar visibility control */
+    .sidebar.hidden {
+        display: none !important;
+    }
+
+    .sidebar.visible {
+        display: flex !important;
+    }
+
     /* Mobile view optimization */
     @media (max-width: 768px) {
-        .sidebar {
+        .sidebar.visible {
             width: 70px !important;
             overflow-x: hidden !important;
         }