Responsive design

kastnerp · kastnerp · commit 43ae57892762 · 2026-01-25T21:18:25.000-05:00
diff --git a/gui/index.html b/gui/index.html
@@ -15,6 +15,9 @@
 
 <body>
   <div id="app">
+    <button id="menu-toggle" class="menu-toggle" aria-label="Toggle Sidebar">
+      <span class="arrow-icon"></span>
+    </button>
     <div id="ui-container">
       <header>
         <div class="logo-container">
diff --git a/gui/src/main.ts b/gui/src/main.ts
@@ -1094,3 +1094,20 @@ document.getElementById('advanced-toggle')?.addEventListener('click', function (
     }
   }
 });
+
+// Mobile Menu Toggle Logic
+const menuToggle = document.getElementById('menu-toggle');
+const uiContainer = document.getElementById('ui-container');
+
+menuToggle?.addEventListener('click', () => {
+  menuToggle.classList.toggle('open');
+  uiContainer?.classList.toggle('sidebar-open');
+});
+
+// Close sidebar when clicking outside (on canvas) if open
+canvasContainer.addEventListener('click', () => {
+  if (uiContainer?.classList.contains('sidebar-open')) {
+    menuToggle?.classList.remove('open');
+    uiContainer.classList.remove('sidebar-open');
+  }
+});
diff --git a/gui/src/style.css b/gui/src/style.css
@@ -21,6 +21,8 @@ body {
 #app {
   display: flex;
   height: 100vh;
+  height: 100dvh;
+  /* Dynamic viewport height for mobile */
   width: 100vw;
 }
 
@@ -41,6 +43,10 @@ header {
 
 .logo-container {
   margin-bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
 }
 
 .main-logo {
@@ -294,8 +300,95 @@ input:checked+.slider:before {
   transform: rotate(180deg);
 }
 
-.collapsible-content {
-  margin-top: 16px;
-  overflow: hidden;
-  transition: max-height 0.3s ease-out;
+
+/* Menu Toggle Button (Arrow Bar) */
+/* Menu Toggle Button (Arrow Bar) */
+.menu-toggle {
+  display: none;
+  /* Hidden on desktop */
+  position: fixed;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+  width: 20px;
+  /* Slimmer */
+  height: 80px;
+  /* Taller */
+  background-color: var(--primary-bg);
+  border: 1px solid var(--border-color);
+  border-left: none;
+  /* Attached to edge */
+  border-top-right-radius: 12px;
+  border-bottom-right-radius: 12px;
+  cursor: pointer;
+  z-index: 2000;
+  /* Much higher z-index to be safe */
+  padding: 0;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 4px 0 10px rgba(0, 0, 0, 0.1);
+  /* Stronger shadow */
+  transition: left 0.3s ease-in-out;
+}
+
+.arrow-icon {
+  width: 0;
+  height: 0;
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-left: 8px solid var(--text-primary);
+  transition: transform 0.3s ease;
+}
+
+/* Open State (Arrow Points Left) */
+.menu-toggle.open {
+  left: 280px;
+  /* Moves with sidebar width */
+}
+
+.menu-toggle.open .arrow-icon {
+  transform: rotate(180deg);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+
+  /* Sidebar becomes off-canvas */
+  #ui-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    height: 100dvh;
+    /* Mobile viewport fix */
+    width: 280px;
+    /* Slightly narrower on mobile */
+    transform: translateX(-100%);
+    transition: transform 0.3s ease-in-out;
+    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+    /* Ensure sidebar is high */
+  }
+
+  /* Show sidebar when open */
+  #ui-container.sidebar-open {
+    transform: translateX(0);
+  }
+
+  /* IMPORTANT: Explicitly show the toggle on mobile */
+  .menu-toggle {
+    display: flex !important;
+  }
+
+  /* Adjust Header Layout for Mobile */
+  header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  /* Logo scaling */
+  .main-logo {
+    max-width: 140px;
+  }
 }
