Merge pull request steam-bell-92#1307 from anujsharma8d/fix/sidebar-collapse

fix: sidebar collapse not working

Author: steam-bell-92

web-app/css/styles.css

@@ -428,12 +428,19 @@ body.sidebar-active .sidebar-dock {
   padding-top: 16px;
   border-top: 1px solid var(--border);
 }
+.sidebar-main-controls{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+}
 
 .sidebar-controls {
   display: flex;
   align-items: center;
   gap: 8px;
   width: 100%;
+  justify-content: space-around;
 }
 
 .sidebar-controls .sound-toggle,
@@ -5380,6 +5387,8 @@ button:focus-visible,
     padding: 4rem 0;
     text-align: center;
     background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
+}
+
 .btn-explore,
 .btn-secondary-hero,
 .btn-random-project,
@@ -6361,6 +6370,15 @@ body.sidebar-collapsed .sidebar-dock .sidebar-footer span {
 
 body.sidebar-collapsed .sidebar-dock .sidebar-footer button {
   justify-content: center !important;
+  padding-top:8px ;
+  padding-bottom:8px ;
+}
+
+body.sidebar-collapsed .sidebar-dock .sidebar-footer .sidebar-main-controls {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
 /* Main content shift for expanded sidebar */

web-app/index.html

@@ -192,8 +192,8 @@
             tabindex="-1"
           >
             <span class="sidebar-icon"
-              ><svg data-lucide="gamepad-2"></svg
-            ></span>
+              ><svg data-lucide="gamepad-2"></svg>
+            </span>
             <span class="sidebar-label">Games Arcade</span>
           </button>
           <button
@@ -241,22 +241,24 @@
 
       <div class="sidebar-footer">
         <div class="sidebar-controls">
-          <button
+          <div class="sidebar-main-controls">
+            <button
             aria-label="Mute sound"
             class="sound-toggle"
             id="sidebarSoundToggle"
             type="button"
-          >
+            >
             <i class="fas fa-volume-up" aria-hidden="true"></i>
           </button>
           <button
-            aria-label="Switch to light mode"
-            class="theme-toggle"
-            id="sidebarThemeToggle"
-            type="button"
+          aria-label="Switch to light mode"
+          class="theme-toggle"
+          id="sidebarThemeToggle"
+          type="button"
           >
-            <i class="fas fa-sun" aria-hidden="true"></i>
-          </button>
+          <i class="fas fa-sun" aria-hidden="true"></i>
+        </button>
+      </div>
           <button
             aria-label="Toggle Sidebar"
             class="collapse-sidebar-btn"