2 files changed, 59 insertions, 6 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
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"