fix: mobile

static/app.js

@@ -74,6 +74,12 @@ const el = {
   channelForm: document.getElementById("channel-form"),
   channelName: document.getElementById("channel-name"),
   channelModalCancel: document.getElementById("channel-modal-cancel"),
+
+  // Mobile
+  mobileMenuBtn: document.getElementById("mobile-menu-btn"),
+  mobileMembersBtn: document.getElementById("mobile-members-btn"),
+  overlay: document.getElementById("overlay"),
+  utilitySidebar: document.getElementById("utility-sidebar"),
 };
 
 // --- API Helpers ---
@@ -176,8 +182,7 @@ function renderChannels() {
 
   for (const channel of state.channels) {
     const row = document.createElement("button");
-    row.className = `channel-row ${
-      (channel.kind === 'text' && state.selectedTextChannelId === channel.id) || 
+    row.className = `channel-row ${(channel.kind === 'text' && state.selectedTextChannelId === channel.id) ||
         (channel.kind === 'voice' && state.selectedVoiceChannelId === channel.id) ? "active" : ""
       }`;
 
@@ -202,6 +207,7 @@ function renderChannels() {
         renderDMs();
         joinVoice();
       }
+      if (window.innerWidth <= 768) closeMobileMenus();
     };
 
     if (channel.kind === 'text') {
@@ -665,6 +671,38 @@ function toggleMute() {
   lucide.createIcons();
 }
 
+// --- Mobile Logic ---
+
+function toggleMobileMenu() {
+  const isOpen = el.main.classList.contains("menu-open");
+  if (isOpen) {
+    el.main.classList.remove("menu-open");
+    el.overlay.classList.add("hidden");
+  } else {
+    el.main.classList.add("menu-open");
+    el.utilitySidebar.classList.remove("active"); // close members if open
+    el.overlay.classList.remove("hidden");
+  }
+}
+
+function toggleMobileMembers() {
+  const isOpen = el.utilitySidebar.classList.contains("active");
+  if (isOpen) {
+    el.utilitySidebar.classList.remove("active");
+    el.overlay.classList.add("hidden");
+  } else {
+    el.utilitySidebar.classList.add("active");
+    el.main.classList.remove("menu-open"); // close menu if open
+    el.overlay.classList.remove("hidden");
+  }
+}
+
+function closeMobileMenus() {
+  el.main.classList.remove("menu-open");
+  el.utilitySidebar.classList.remove("active");
+  el.overlay.classList.add("hidden");
+}
+
 // --- Initialization ---
 
 async function init() {
@@ -700,6 +738,11 @@ async function init() {
   };
   el.channelModalCancel.onclick = () => { el.channelModal.classList.add("hidden"); };
 
+  // Mobile Listeners
+  if (el.mobileMenuBtn) el.mobileMenuBtn.onclick = toggleMobileMenu;
+  if (el.mobileMembersBtn) el.mobileMembersBtn.onclick = toggleMobileMembers;
+  if (el.overlay) el.overlay.onclick = closeMobileMenus;
+
   el.guildForm.onsubmit = async (e) => {
     e.preventDefault();
     try {

static/index.html

@@ -108,8 +108,15 @@
 
     <main class="chat-pane">
       <header class="chat-header">
+        <button id="mobile-menu-btn" class="mobile-toggle-btn hidden" title="Menu">
+          <i data-lucide="menu"></i>
+        </button>
         <i data-lucide="hash" class="header-icon"></i>
         <h3 id="channel-title">Select a channel</h3>
+        <div style="flex:1"></div>
+        <button id="mobile-members-btn" class="mobile-toggle-btn hidden" title="Members">
+          <i data-lucide="users"></i>
+        </button>
       </header>
 
       <div id="message-list" class="message-list"></div>
@@ -122,7 +129,7 @@
       </div>
     </main>
 
-    <aside class="utility-sidebar">
+    <aside class="utility-sidebar" id="utility-sidebar">
       <header class="sidebar-header">
         <h2>Members</h2>
       </header>
@@ -132,6 +139,8 @@
     </aside>
   </div>
 
+  <div id="overlay" class="overlay hidden"></div>
+
   <!-- Modals -->
   <div id="modal-container" class="modal-container hidden">
     <div class="modal">

static/styles.css

@@ -515,12 +515,93 @@ input, select { border: 0; outline: none; background: var(--bg-input); color: va
 .radio-text strong { font-size: 16px; }
 .radio-text span { font-size: 12px; color: var(--text-muted); }
 
+/* Mobile Overlay */
+.overlay {
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  z-index: 90;
+  opacity: 1;
+  transition: opacity 0.2s ease;
+}
+.overlay.hidden {
+  opacity: 0;
+  pointer-events: none;
+  visibility: hidden;
+}
+
+/* Mobile Toggle Buttons */
+.mobile-toggle-btn {
+  display: none;
+  width: 32px;
+  height: 32px;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-normal);
+  background: transparent;
+  margin-right: 8px;
+}
+.mobile-toggle-btn:hover {
+  background: var(--bg-modifier-hover);
+  border-radius: 4px;
+}
+
 @media (max-width: 1100px) {
   .shell { grid-template-columns: 72px 240px 1fr; }
-  .utility-sidebar { display: none; }
+  .utility-sidebar {
+    position: fixed;
+    top: 0; bottom: 0; right: 0;
+    width: 240px;
+    z-index: 100;
+    box-shadow: -2px 0 10px rgba(0,0,0,0.5);
+    transform: translateX(100%);
+    transition: transform 0.2s ease;
+  }
+  .utility-sidebar.active {
+    transform: translateX(0);
+    display: flex;
+  }
+  
+  .chat-header .mobile-toggle-btn { display: flex; }
 }
 
 @media (max-width: 768px) {
-  .shell { grid-template-columns: 72px 1fr; }
-  .channel-sidebar { display: none; }
+  .shell {
+    grid-template-columns: 1fr;
+  }
+  
+  /* Hide sidebars by default on mobile */
+  .server-rail, .channel-sidebar {
+    position: fixed;
+    top: 0; bottom: 0;
+    z-index: 100;
+    transition: transform 0.2s ease;
+  }
+
+  .server-rail {
+    left: 0;
+    width: 72px;
+    transform: translateX(-100%);
+  }
+  
+  .channel-sidebar {
+    left: 72px;
+    width: 240px;
+    transform: translateX(-312px); /* 72 + 240 */
+    box-shadow: 2px 0 10px rgba(0,0,0,0.5);
+  }
+
+  /* When menu is active */
+  .shell.menu-open .server-rail {
+    transform: translateX(0);
+  }
+  .shell.menu-open .channel-sidebar {
+    transform: translateX(0);
+    display: flex; /* Override display: none from previous rule */
+  }
+
+  /* Adjust chat header for mobile */
+  .chat-header {
+    padding: 0 8px;
+  }
 }