From 59d2f8b4e0bd4553eb19265d8b6b43e90244ac0c Mon Sep 17 00:00:00 2001
From: Caleb Braaten <git@cbraaten.dev>
Date: Tue, 20 Jan 2026 16:09:29 -0800
Subject: [PATCH] AGENT: Move aside into slide in with hamburger on smaller
 viewports

---
 src/frontend/AppShell.tsx |  6 ++++
 src/frontend/styles.css   | 72 ++++++++++++++++++++++++++++++++++++++-
 2 files changed, 77 insertions(+), 1 deletion(-)
diff --git a/src/frontend/AppShell.tsx b/src/frontend/AppShell.tsx
index 9b7dba2..c680cc8 100644
--- a/src/frontend/AppShell.tsx
+++ b/src/frontend/AppShell.tsx
@@ -21,6 +21,12 @@ export function AppShell({ children, searchParams }: { children: ReactNode, sear
                 <style dangerouslySetInnerHTML={{ __html: minifyCSS(styles) }} />
             </head>
             <body>
+                <input type="checkbox" id="menu-toggle" className="menu-toggle" />
+                <label htmlFor="menu-toggle" className="hamburger-button">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </label>
                 {children}
                 <aside>
                     <ThemePicker />
diff --git a/src/frontend/styles.css b/src/frontend/styles.css
index 41c62b5..046368f 100644
--- a/src/frontend/styles.css
+++ b/src/frontend/styles.css
@@ -136,7 +136,6 @@ html[data-theme="dark"] {
 body {
     margin: 0;
     padding: 0;
-    overflow-x: hidden;
     background-color: var(--bg-primary);
     color: var(--text-primary);
     transition: background-color 0.3s ease, color 0.3s ease;
@@ -148,6 +147,38 @@ body {
     width: 100vw;
 }
 
+/* Hamburger Menu Styles */
+.menu-toggle {
+    display: none;
+}
+
+.hamburger-button {
+    display: none;
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 1000;
+    width: 40px;
+    height: 35px;
+    cursor: pointer;
+    padding: 8px;
+    box-sizing: content-box;
+}
+
+.hamburger-button span {
+    display: block;
+    width: 100%;
+    height: 3px;
+    margin: 5px 0;
+    background-color: var(--text-primary);
+    border-radius: 2px;
+    transition: all 0.3s ease;
+}
+
+
+
+
+
 main {
     flex: 1 1 auto;
     max-width: 900px;
@@ -1059,6 +1090,45 @@ h1 {
         max-width: 750px;
         margin: 0 auto;
     }
+
+    /* Show hamburger button and hide aside on mobile/tablet */
+    .hamburger-button {
+        display: block;
+    }
+
+    aside {
+        position: fixed;
+        top: 0;
+        right: -100%;
+        width: 80%;
+        max-width: 340px;
+        height: 100vh;
+        padding-top: 80px;
+        background-color: var(--bg-primary);
+        z-index: 999;
+        border-left: 1px solid var(--border-color);
+        border-top: none;
+        transition: right 0.3s ease;
+        overflow-y: auto;
+    }
+
+    /* Show aside when checkbox is checked */
+    .menu-toggle:checked ~ aside {
+        right: 0;
+    }
+
+    /* Transform hamburger to X when checked */
+    .menu-toggle:checked ~ .hamburger-button span:nth-child(1) {
+        transform: rotate(45deg) translate(8px, 8px);
+    }
+
+    .menu-toggle:checked ~ .hamburger-button span:nth-child(2) {
+        opacity: 0;
+    }
+
+    .menu-toggle:checked ~ .hamburger-button span:nth-child(3) {
+        transform: rotate(-45deg) translate(9px, -9px);
+    }
 }
 
 @media (max-width: 768px) {
