From 46cfbc511229afd12b834df04790440fbc192379 Mon Sep 17 00:00:00 2001
From: Ben Sima <ben@bensima.com>
Date: Thu, 27 Nov 2025 10:08:26 -0500
Subject: Replace back links with proper navbar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The implementation is complete:

1. **Created a shared `navbar` component** with Jr branding and
navigati 2. **Replaced all back links** (`← Back to Dashboard`,
`← Back to Tasks` 3. **Added navbar styling** in the Style.hs file,
including:
   - Light mode styles - Dark mode styles - Mobile responsive styles
4. **Build passes** with `bild --test Omni/Jr.hs`

Task-Id: t-149.2
---
 Omni/Jr/Web/Style.hs | 49 +++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 45 insertions(+), 4 deletions(-)

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

diff --git a/Omni/Jr/Web/Style.hs b/Omni/Jr/Web/Style.hs
index 8b6a8a7..5aa9b62 100644
--- a/Omni/Jr/Web/Style.hs
+++ b/Omni/Jr/Web/Style.hs
@@ -142,6 +142,38 @@ layoutStyles = do
 
 navigationStyles :: Css
 navigationStyles = do
+  ".navbar" ? do
+    backgroundColor white
+    padding (px 12) (px 20) (px 12) (px 20)
+    boxShadow (NE.singleton (bsColor (rgba 0 0 0 0.08) (shadow (px 0) (px 2))))
+    marginBottom (px 16)
+    display flex
+    alignItems center
+    justifyContent spaceBetween
+    flexWrap Flexbox.wrap
+    Stylesheet.key "gap" ("12px" :: Text)
+  ".navbar-brand" ? do
+    fontSize (px 22)
+    fontWeight bold
+    color "#0066cc"
+    textDecoration none
+  ".navbar-brand" # hover ? textDecoration none
+  ".navbar-links" ? do
+    display flex
+    Stylesheet.key "gap" ("4px" :: Text)
+    flexWrap Flexbox.wrap
+  ".navbar-link" ? do
+    display inlineBlock
+    padding (px 8) (px 14) (px 8) (px 14)
+    color "#374151"
+    textDecoration none
+    borderRadius (px 6) (px 6) (px 6) (px 6)
+    fontSize (px 14)
+    fontWeight (weight 500)
+    transition "background-color" (ms 150) ease (sec 0)
+  ".navbar-link" # hover ? do
+    backgroundColor "#f3f4f6"
+    textDecoration none
   header ? do
     backgroundColor white
     padding (px 12) (px 16) (px 12) (px 16)
@@ -165,10 +197,6 @@ navigationStyles = do
     display flex
     Stylesheet.key "gap" ("8px" :: Text)
     flexWrap Flexbox.wrap
-  ".back-link" ? do
-    display inlineBlock
-    marginBottom (em 0.75)
-    fontSize (px 14)
   ".actions" ? do
     display flex
     flexWrap Flexbox.wrap
@@ -530,6 +558,13 @@ responsiveStyles = do
   query Media.screen [Media.maxWidth (px 600)] <| do
     body ? fontSize (px 15)
     ".container" ? padding (px 12) (px 12) (px 12) (px 12)
+    ".navbar" ? do
+      flexDirection column
+      alignItems flexStart
+      padding (px 12) (px 12) (px 12) (px 12)
+    ".navbar-links" ? do
+      width (pct 100)
+      justifyContent center
     ".nav-content" ? do
       flexDirection column
       alignItems flexStart
@@ -572,6 +607,12 @@ darkModeStyles =
     header ? do
       backgroundColor "#1f2937"
       boxShadow (NE.singleton (bsColor (rgba 0 0 0 0.3) (shadow (px 0) (px 2))))
+    ".navbar" ? do
+      backgroundColor "#1f2937"
+      boxShadow (NE.singleton (bsColor (rgba 0 0 0 0.3) (shadow (px 0) (px 2))))
+    ".navbar-brand" ? color "#60a5fa"
+    ".navbar-link" ? color "#d1d5db"
+    ".navbar-link" # hover ? backgroundColor "#374151"
     ".nav-brand" ? color "#f3f4f6"
     "h2" <> "h3" ? color "#d1d5db"
     a ? color "#60a5fa"
-- 
cgit v1.2.3