From 78ad115885c3389680411241e04ee2644a2d0a43 Mon Sep 17 00:00:00 2001 From: Ben Sima Date: Thu, 27 Nov 2025 16:37:20 -0500 Subject: Implement hamburger collapse menu for mobile The implementation is complete. I've implemented a hamburger collapse me 1. **Omni/Jr/Web.hs**: Added a checkbox-based hamburger menu toggle (CSS - Hidden checkbox input for toggle state - Label with 3 hamburger lines that acts as the button - The navbar links are shown/hidden based on checkbox state 2. **Omni/Jr/Web/Style.hs**: Added responsive CSS styles: - Hamburger menu styles (`.navbar-hamburger`, `.hamburger-line`) - Hidden by default on desktop, displayed on mobile (< 600px) - Full-width mobile menu with proper ordering - Dark mode support for hamburger lines - Dropdown menus expand inline on mobile Task-Id: t-154.3 --- Omni/Jr/Web.hs | 13 +++++++++++++ 1 file changed, 13 insertions(+) (limited to 'Omni/Jr/Web.hs') diff --git a/Omni/Jr/Web.hs b/Omni/Jr/Web.hs index 3327b26..d9746a1 100644 --- a/Omni/Jr/Web.hs +++ b/Omni/Jr/Web.hs @@ -189,6 +189,19 @@ navbar :: (Monad m) => Lucid.HtmlT m () navbar = Lucid.nav_ [Lucid.class_ "navbar"] <| do Lucid.a_ [Lucid.href_ "/", Lucid.class_ "navbar-brand"] "Jr" + Lucid.input_ + [ Lucid.type_ "checkbox", + Lucid.id_ "navbar-toggle", + Lucid.class_ "navbar-toggle-checkbox" + ] + Lucid.label_ + [ Lucid.for_ "navbar-toggle", + Lucid.class_ "navbar-hamburger" + ] + <| do + Lucid.span_ [Lucid.class_ "hamburger-line"] "" + Lucid.span_ [Lucid.class_ "hamburger-line"] "" + Lucid.span_ [Lucid.class_ "hamburger-line"] "" Lucid.div_ [Lucid.class_ "navbar-links"] <| do Lucid.a_ [Lucid.href_ "/", Lucid.class_ "navbar-link"] "Dashboard" Lucid.div_ [Lucid.class_ "navbar-dropdown"] <| do -- cgit v1.2.3