Update index.html

index.html

@@ -87,6 +87,7 @@
       <span id="topbar-channel-name"># allgemein</span>
     </div>
     <div class="topbar-actions">
+      <button id="mobile-menu-btn" onclick="toggleMobileSidebar()" title="Menü" style="display:none">☰</button>
       <button class="icon-btn" onclick="openSettings()" title="Einstellungen">⚙️</button>
       <div class="topbar-sep"></div>
       <div class="topbar-user">
@@ -98,8 +99,11 @@
     </div>
   </div>
 
+  <!-- MOBILE SIDEBAR BACKDROP -->
+  <div id="sidebar-backdrop" onclick="closeMobileSidebar()"></div>
+
   <!-- SIDEBAR -->
-  <div class="sidebar">
+  <div class="sidebar" id="sidebar">
     <div class="sidebar-scroll">
 
       <!-- Channels -->
@@ -255,5 +259,55 @@ async function openPinsModal() {
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/peerjs/1.5.4/peerjs.min.js"></script>
 <script src="app.js"></script>
+<script>
+// ─── MOBILE SIDEBAR TOGGLE ─────────────────────────────────────
+function isMobile() { return window.innerWidth <= 768; }
+
+function toggleMobileSidebar() {
+  const sidebar = document.getElementById('sidebar');
+  const backdrop = document.getElementById('sidebar-backdrop');
+  const open = sidebar.classList.toggle('open');
+  backdrop.classList.toggle('visible', open);
+}
+
+function closeMobileSidebar() {
+  document.getElementById('sidebar').classList.remove('open');
+  document.getElementById('sidebar-backdrop').classList.remove('visible');
+}
+
+// Show/hide hamburger based on screen size
+function updateMobileUI() {
+  const btn = document.getElementById('mobile-menu-btn');
+  if (btn) btn.style.display = isMobile() ? 'flex' : 'none';
+}
+window.addEventListener('resize', updateMobileUI);
+document.addEventListener('DOMContentLoaded', updateMobileUI);
+updateMobileUI();
+
+// Close sidebar when a channel is selected on mobile
+document.addEventListener('click', function(e) {
+  if (!isMobile()) return;
+  const item = e.target.closest('.channel-item, .user-item');
+  if (item) closeMobileSidebar();
+});
+
+// Fix iOS viewport resize when keyboard opens
+function fixViewportOnKeyboard() {
+  if (!isMobile()) return;
+  const chatArea = document.querySelector('.chat-area');
+  if (!chatArea) return;
+  // Scroll to bottom when keyboard opens
+  const input = document.getElementById('msg-input');
+  if (input) {
+    input.addEventListener('focus', () => {
+      setTimeout(() => {
+        const msgs = document.getElementById('messages');
+        if (msgs) msgs.scrollTop = msgs.scrollHeight;
+      }, 350);
+    });
+  }
+}
+document.addEventListener('DOMContentLoaded', fixViewportOnKeyboard);
+</script>
 </body>
 </html>