diff options
| author | Ben Sima <ben@bensima.com> | 2025-11-27 16:37:20 -0500 |
|---|---|---|
| committer | Ben Sima <ben@bensima.com> | 2025-11-27 16:37:20 -0500 |
| commit | 78ad115885c3389680411241e04ee2644a2d0a43 (patch) | |
| tree | 130540a8ddc26a12064db79c90ad2d5a1f970f66 /Omni/Jr/Web.hs | |
| parent | d2f016ecdf4a5cf1eb5d8922a7a00d99f5861091 (diff) | |
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
Diffstat (limited to 'Omni/Jr/Web.hs')
| -rw-r--r-- | Omni/Jr/Web.hs | 13 |
1 files changed, 13 insertions, 0 deletions
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 |