Caleb/Blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

AGENT: Move aside into slide in with hamburger on smaller viewports

Browse Source
This commit is contained in:
Caleb Braaten 2026-01-20 16:09:29 -08:00
parent 54d5a77329
commit 59d2f8b4e0
2 changed files with 77 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/frontend/AppShell.tsx
View File

@ -21,6 +21,12 @@ export function AppShell({ children, searchParams }: { children: ReactNode, sear
<style dangerouslySetInnerHTML={{ __html: minifyCSS(styles) }} /> <style dangerouslySetInnerHTML={{ __html: minifyCSS(styles) }} />
</head> </head>
<body> <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} {children}
<aside> <aside>
<ThemePicker /> <ThemePicker />

72
src/frontend/styles.css
View File

@ -136,7 +136,6 @@ html[data-theme="dark"] {
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow-x: hidden;
background-color: var(--bg-primary); background-color: var(--bg-primary);
color: var(--text-primary); color: var(--text-primary);
transition: background-color 0.3s ease, color 0.3s ease; transition: background-color 0.3s ease, color 0.3s ease;
@ -148,6 +147,38 @@ body {
width: 100vw; 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 { main {
flex: 1 1 auto; flex: 1 1 auto;
max-width: 900px; max-width: 900px;
@ -1059,6 +1090,45 @@ h1 {
max-width: 750px; max-width: 750px;
margin: 0 auto; 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) { @media (max-width: 768px) {