Add dropdown menus

Tasks (Ready, Blocked, Intervention, All), Plans (Epics, KB).

Task-Id: t-154.2

1 files changed, 60 insertions, 0 deletions

diff --git a/Omni/Jr/Web/Style.hs b/Omni/Jr/Web/Style.hs
index 73b2c02..6fb793d 100644
--- a/Omni/Jr/Web/Style.hs
+++ b/Omni/Jr/Web/Style.hs
@@ -166,6 +166,7 @@ navigationStyles = do
     display flex
     Stylesheet.key "gap" ("2px" :: Text)
     flexWrap Flexbox.wrap
+    alignItems center
   ".navbar-link" ? do
     display inlineBlock
     padding (px 4) (px 10) (px 4) (px 10)
@@ -178,6 +179,43 @@ navigationStyles = do
   ".navbar-link" # hover ? do
     backgroundColor "#f3f4f6"
     textDecoration none
+  ".navbar-dropdown" ? do
+    position relative
+    display inlineBlock
+  ".navbar-dropdown-btn" ? do
+    display inlineBlock
+    padding (px 4) (px 10) (px 4) (px 10)
+    color "#374151"
+    backgroundColor transparent
+    border (px 0) none transparent
+    borderRadius (px 2) (px 2) (px 2) (px 2)
+    fontSize (px 13)
+    fontWeight (weight 500)
+    cursor pointer
+    transition "background-color" (ms 150) ease (sec 0)
+  ".navbar-dropdown-btn" # hover ? backgroundColor "#f3f4f6"
+  ".navbar-dropdown-content" ? do
+    display none
+    position absolute
+    left (px 0)
+    top (pct 100)
+    backgroundColor white
+    minWidth (px 120)
+    Stylesheet.key "box-shadow" ("0 2px 8px rgba(0,0,0,0.15)" :: Text)
+    borderRadius (px 2) (px 2) (px 2) (px 2)
+    zIndex 100
+    Stylesheet.key "overflow" ("hidden" :: Text)
+  ".navbar-dropdown" # hover |> ".navbar-dropdown-content" ? display block
+  ".navbar-dropdown-item" ? do
+    display block
+    padding (px 8) (px 12) (px 8) (px 12)
+    color "#374151"
+    textDecoration none
+    fontSize (px 13)
+    transition "background-color" (ms 150) ease (sec 0)
+  ".navbar-dropdown-item" # hover ? do
+    backgroundColor "#f3f4f6"
+    textDecoration none
   header ? do
     backgroundColor white
     padding (px 6) (px 12) (px 6) (px 12)
@@ -274,6 +312,15 @@ cardStyles = do
   ".empty-msg" ? do
     color "#6b7280"
     fontStyle italic
+  ".info-msg" ? do
+    color "#6b7280"
+    marginBottom (px 12)
+  ".kb-preview" ? do
+    color "#6b7280"
+    fontSize (px 12)
+    marginTop (px 4)
+    overflow hidden
+    Stylesheet.key "text-overflow" ("ellipsis" :: Text)
   ".ready-link" ? do
     fontSize (px 13)
     color "#0066cc"
@@ -800,6 +847,12 @@ responsiveStyles = do
     ".navbar-link" ? do
       padding (px 4) (px 6) (px 4) (px 6)
       fontSize (px 11)
+    ".navbar-dropdown-btn" ? do
+      padding (px 4) (px 6) (px 4) (px 6)
+      fontSize (px 11)
+    ".navbar-dropdown-item" ? do
+      padding (px 6) (px 10) (px 6) (px 10)
+      fontSize (px 11)
     ".nav-content" ? do
       flexDirection column
       alignItems flexStart
@@ -848,6 +901,13 @@ darkModeStyles =
     ".navbar-brand" ? color "#60a5fa"
     ".navbar-link" ? color "#d1d5db"
     ".navbar-link" # hover ? backgroundColor "#374151"
+    ".navbar-dropdown-btn" ? color "#d1d5db"
+    ".navbar-dropdown-btn" # hover ? backgroundColor "#374151"
+    ".navbar-dropdown-content" ? do
+      backgroundColor "#1f2937"
+      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"
     ".nav-brand" ? color "#f3f4f6"
     "h2" <> "h3" ? color "#d1d5db"
     a ? color "#60a5fa"