Refactor JavaScript imports and fix theme switching (#3)

AngelMunoz · Nov 24, 2023 · bb7e663 · bb7e663
1 parent feec017
commit bb7e663
Show file tree

Hide file tree

Showing 8 changed files with 489 additions and 272 deletions.
diff --git a/src/Mandadin.Client/Components/Navbar.fs b/src/Mandadin.Client/Components/Navbar.fs
@@ -6,81 +6,60 @@ open Mandadin.Client
 open Microsoft.AspNetCore.Components.Routing
 
 module Navbar =
+  let collapsibleMenu =
+    concat {
+      input {
+        attr.``class`` "toggle"
+        attr.id "collapsible1"
+        attr.name "collapsible1"
+        attr.``type`` "checkbox"
+      }
 
-  let View
-    (theme: Theme)
-    (onThemeChangeRequest: Theme -> unit)
-    (getHref: View -> Attr)
-    =
-    let collapsible =
-      [ input {
-          attr.``class`` "toggle"
-          attr.id "collapsible1"
-          attr.name "collapsible1"
-          attr.``type`` "checkbox"
-        }
-
-        label {
-          attr.``for`` "collapsible1"
-
-          for i in 1..3 do
-            div { attr.``class`` (sprintf "bar%i" i) }
-        } ]
+      label {
+        attr.``for`` "collapsible1"
 
-    let listLinks =
-      let getThemeText =
-        textf
-          "Tema %s"
-          (if theme = Theme.Dark then
-             "Claro"
-           else
-             "Oscuro")
+        for i in 1..3 do
+          div { attr.``class`` $"bar%i{i}" }
+      }
+    }
 
-      let onThemeItemClick _ =
-        match theme with
-        | Theme.Light -> onThemeChangeRequest Theme.Dark
-        | _ -> onThemeChangeRequest Theme.Light
+  type Navbar =
+    static member View
+      (
+        theme: Theme,
+        ?onThemeChangeRequest: _ -> unit,
+        ?menuItems: Node
+      ) =
+      let onThemeChangeRequest =
+        defaultArg onThemeChangeRequest ignore
 
-      [ li {
-          navLink NavLinkMatch.All {
-            getHref View.Notes
-            text "Notas"
-          }
-        }
-        li {
-          navLink NavLinkMatch.All {
-            getHref View.Lists
-            text "Listas"
-          }
-        }
-        li {
-          attr.``class`` "cursor pointer"
-          on.click onThemeItemClick
-          getThemeText
-        } ]
+      let menuItems =
+        defaultArg menuItems (empty ())
 
-    nav {
-      attr.``class`` "split-nav mandadin-navbar"
+      nav {
+        attr.``class`` "split-nav mandadin-navbar"
 
-      section {
-        attr.``class`` "collapsible"
+        section {
+          attr.``class`` "collapsible"
 
-        for el in collapsible do
-          el
+          collapsibleMenu
 
-        div {
-          attr.``class`` "collapsible-body"
+          div {
+            attr.``class`` "collapsible-body"
 
-          ul {
-            attr.``class`` "inline"
+            ul {
+              attr.``class`` "inline"
+              menuItems
 
-            for el in listLinks do
-              el
+              li {
+                attr.``class`` "cursor pointer"
+                on.click onThemeChangeRequest
+                textf "Tema %s" theme.AsDisplay
+              }
+            }
           }
         }
       }
-    }
-
 
 module TitleBar =
   let View (title: string option) =
@@ -92,6 +71,6 @@ module TitleBar =
       navLink NavLinkMatch.All {
         attr.href "/"
         attr.``class`` "no-drag"
-        textf $"{title} | Mandadin"
+        text $"{title} | Mandadin"
       }
     }