From 99fc4c0fc77c176aebcddefac6bc4b354d0cf803 Mon Sep 17 00:00:00 2001 From: Timothy DeHerrera Date: Sun, 1 Feb 2026 08:32:24 -0700 Subject: [PATCH] feat(docs): add responsive hamburger menu with animations MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Implement pure CSS mobile navigation with the following features: - Collapsible sidebar nav hidden behind hamburger toggle on mobile - Animated hamburger → X icon morph using CSS transforms - Smooth slide-down transition for nav reveal (max-height/opacity) - Hamburger positioned on right side of header via absolute positioning - Uses :has() selector to detect checkbox state without JavaScript - Overflow fixes to prevent horizontal scroll on mobile devices The implementation follows suckless principles with zero JavaScript. --- docs/static/style.css | 100 ++++++++++++++++++++++++++++++++++++++- docs/templates/base.html | 17 +++++-- 2 files changed, 113 insertions(+), 4 deletions(-) diff --git a/docs/static/style.css b/docs/static/style.css index 0abaec3..b7a6ad0 100644 --- a/docs/static/style.css +++ b/docs/static/style.css @@ -373,10 +373,42 @@ th { background: var(--bg-sidebar); } +/* Navigation toggle (hidden by default) */ +.nav-toggle { + display: none; +} + +.hamburger { + display: none; + flex-direction: column; + justify-content: space-between; + width: 24px; + height: 18px; + cursor: pointer; + padding: 0; + user-select: none; +} + +.hamburger span { + display: block; + width: 100%; + height: 2px; + background: var(--fg); + border-radius: 1px; + transition: transform 0.3s ease, opacity 0.3s ease; + transform-origin: center; +} + /* Responsive */ @media (max-width: 768px) { + html { + overflow-x: hidden; + } + body { grid-template-columns: 1fr; + max-width: 100vw; + overflow-x: hidden; } .sidebar { @@ -384,9 +416,75 @@ th { height: auto; border-right: none; border-bottom: 1px solid var(--border); + padding: 1rem 1.5rem; + } + + .sidebar header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 0; + } + + .sidebar .tagline { + display: none; + } + + /* Position hamburger on right side of header */ + .sidebar header { + position: relative; + } + + .hamburger { + display: flex; + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); + } + + .sidebar nav { + flex-direction: column; + padding-top: 0; + margin-top: 0; + border-top: 1px solid var(--border); + max-height: 0; + overflow: hidden; + opacity: 0; + transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease, padding-top 0.3s ease; + } + + /* Show nav when checkbox is checked - checkbox is inside header now */ + .sidebar:has(.nav-toggle:checked) nav { + max-height: 500px; + opacity: 1; + margin-top: 1rem; + padding-top: 1rem; + } + + /* Hamburger → X morph animation */ + .nav-toggle:checked~.hamburger span:nth-child(1) { + transform: translateY(8px) rotate(45deg); + } + + .nav-toggle:checked~.hamburger span:nth-child(2) { + opacity: 0; + } + + .nav-toggle:checked~.hamburger span:nth-child(3) { + transform: translateY(-8px) rotate(-45deg); + } + + .sidebar-footer { + display: none; } main { - padding: 2rem 1.5rem; + padding: 1.5rem 1rem; + max-width: 100%; + } + + pre { + max-width: calc(100vw - 2rem); } } \ No newline at end of file diff --git a/docs/templates/base.html b/docs/templates/base.html index 54a43e8..3bb63be 100644 --- a/docs/templates/base.html +++ b/docs/templates/base.html @@ -4,12 +4,17 @@ - {% if page.description %}{% endif %} + {% if page.description %} + {% endif %} {{ title }} | {{ config.title }} - - + + @@ -21,6 +26,12 @@ sukr suckless static sites + +