From 78ad115885c3389680411241e04ee2644a2d0a43 Mon Sep 17 00:00:00 2001
From: Ben Sima <ben@bensima.com>
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/Style.hs | 52 ++++++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 46 insertions(+), 6 deletions(-)

(limited to 'Omni/Jr/Web/Style.hs')

diff --git a/Omni/Jr/Web/Style.hs b/Omni/Jr/Web/Style.hs
index 6fb793d..86fe5d0 100644
--- a/Omni/Jr/Web/Style.hs
+++ b/Omni/Jr/Web/Style.hs
@@ -162,6 +162,23 @@ navigationStyles = do
     color "#0066cc"
     textDecoration none
   ".navbar-brand" # hover ? textDecoration none
+  ".navbar-toggle-checkbox" ? display none
+  ".navbar-hamburger" ? do
+    display none
+    flexDirection column
+    justifyContent center
+    alignItems center
+    width (px 32)
+    height (px 32)
+    cursor pointer
+    Stylesheet.key "gap" ("4px" :: Text)
+  ".hamburger-line" ? do
+    display block
+    width (px 20)
+    height (px 2)
+    backgroundColor "#374151"
+    borderRadius (px 1) (px 1) (px 1) (px 1)
+    transition "all" (ms 200) ease (sec 0)
   ".navbar-links" ? do
     display flex
     Stylesheet.key "gap" ("2px" :: Text)
@@ -842,17 +859,39 @@ responsiveStyles = do
     ".container" ? padding (px 6) (px 8) (px 6) (px 8)
     ".navbar" ? do
       padding (px 6) (px 8) (px 6) (px 8)
+      flexWrap Flexbox.wrap
+    ".navbar-hamburger" ? do
+      display flex
+      Stylesheet.key "order" ("2" :: Text)
     ".navbar-links" ? do
-      Stylesheet.key "gap" ("1px" :: Text)
+      display none
+      width (pct 100)
+      Stylesheet.key "order" ("3" :: Text)
+      flexDirection column
+      alignItems flexStart
+      paddingTop (px 8)
+      Stylesheet.key "gap" ("0" :: Text)
+    ".navbar-toggle-checkbox" # checked |+ ".navbar-hamburger" |+ ".navbar-links" ? do
+      display flex
     ".navbar-link" ? do
-      padding (px 4) (px 6) (px 4) (px 6)
-      fontSize (px 11)
+      padding (px 8) (px 6) (px 8) (px 6)
+      fontSize (px 13)
+      width (pct 100)
+    ".navbar-dropdown" ? do
+      width (pct 100)
     ".navbar-dropdown-btn" ? do
-      padding (px 4) (px 6) (px 4) (px 6)
-      fontSize (px 11)
+      padding (px 8) (px 6) (px 8) (px 6)
+      fontSize (px 13)
+      width (pct 100)
+      textAlign (alignSide sideLeft)
+    ".navbar-dropdown-content" ? do
+      position static
+      Stylesheet.key "box-shadow" ("none" :: Text)
+      paddingLeft (px 12)
+      backgroundColor transparent
     ".navbar-dropdown-item" ? do
       padding (px 6) (px 10) (px 6) (px 10)
-      fontSize (px 11)
+      fontSize (px 12)
     ".nav-content" ? do
       flexDirection column
       alignItems flexStart
@@ -908,6 +947,7 @@ darkModeStyles =
       Stylesheet.key "box-shadow" ("0 2px 8px rgba(0,0,0,0.3)" :: Text)
     ".navbar-dropdown-item" ? color "#d1d5db"
     ".navbar-dropdown-item" # hover ? backgroundColor "#374151"
+    ".hamburger-line" ? backgroundColor "#d1d5db"
     ".nav-brand" ? color "#f3f4f6"
     "h2" <> "h3" ? color "#d1d5db"
     a ? color "#60a5fa"
-- 
cgit v1.2.3