fix styles

public/index.html

@@ -44,7 +44,8 @@
   <aside id="sidebar">
     <header id="server-name">
       <img id="server-logo" src="/icons/icon.svg" alt="" width="22" height="22" />
-      gibbz voice <span class="poc-tag">POC</span>
+      <span class="server-name-text">gibbz voice <span class="poc-tag">POC</span></span>
+      <button id="btn-sidebar-collapse" class="icon-btn" title="Hide sidebar"><span class="material-symbols-outlined">left_panel_close</span></button>
     </header>
     <div class="channel-group-label">Text channels</div>
     <div class="channel text" data-mx-room="gibbz-general"><span class="material-symbols-outlined channel-icon">tag</span>
@@ -55,6 +56,12 @@
     <div class="channel voice" data-room="lounge"><span class="material-symbols-outlined channel-icon">volume_up</span> Lounge <span class="count" data-room-count="lounge"></span></div>
 
     <footer id="user-panel">
+      <div class="user-buttons">
+        <button id="btn-mic" class="ctl" title="Toggle mic (M)"><span class="material-symbols-outlined">mic</span></button>
+        <button id="btn-deafen" class="ctl" title="Toggle deafen (D)"><span class="material-symbols-outlined">headphones</span></button>
+        <button id="btn-share" class="ctl" title="Share your screen (S)"><span class="material-symbols-outlined">present_to_all</span></button>
+        <button id="btn-settings" class="ctl" title="Voice &amp; ICE settings"><span class="material-symbols-outlined">settings</span></button>
+      </div>
       <div class="me">
         <div class="avatar" id="me-avatar">?</div>
         <div class="me-meta">
@@ -64,19 +71,15 @@
             <span id="voice-status">Disconnected</span>
           </div>
         </div>
-      </div>
-      <div class="user-buttons">
-        <button id="btn-mic" class="ctl" title="Toggle mic (M)"><span class="material-symbols-outlined">mic</span></button>
-        <button id="btn-deafen" class="ctl" title="Toggle deafen (D)"><span class="material-symbols-outlined">headphones</span></button>
-        <button id="btn-share" class="ctl" title="Share your screen (S)"><span class="material-symbols-outlined">present_to_all</span></button>
-        <button id="btn-settings" class="ctl" title="Voice &amp; ICE settings"><span class="material-symbols-outlined">settings</span></button>
-        <button id="btn-help" class="ctl" title="How to use gibbz voice"><span class="material-symbols-outlined">help</span></button>
+        <button id="btn-help" class="ctl help-ctl" title="How to use gibbz voice"><span class="material-symbols-outlined">help</span></button>
       </div>
     </footer>
+    <div id="sidebar-resizer" title="Drag to resize"></div>
   </aside>
 
   <!-- main content area -->
   <main id="main">
+    <button id="btn-sidebar-expand" title="Show sidebar"><span class="material-symbols-outlined">left_panel_open</span></button>
     <!-- voice stage and spatial audio view -->
     <div id="voice-view">
       <div id="stage">
@@ -88,6 +91,7 @@
         </div>
       </div>
 
+      <div id="spatial-resizer" title="Drag to resize"></div>
       <div id="spatial-wrap">
         <div class="spatial-label">
           <span>SPATIAL AUDIO</span>