lib.rs: impl DarkModeTogle(icon-only) and comment TitleToggle

src/lib.rs

@@ -9,7 +9,12 @@ enum Route {
     About {},
 }
 
+// Shared State Props
+struct DarkMode(bool);
+struct Title(bool);
+
 pub fn App(cx: Scope) -> Element {
+    use_shared_state_provider(cx, || DarkMode(false));
     cx.render(rsx! {
       style { include_str!("./style.css") }
       Navbar {},
@@ -66,21 +71,76 @@ pub fn Navbar(cx: Scope) -> Element {
                           height: 30,
                           icon: fi_icons::FiArrowDown,
                        }
-              }
-              h1 { class: "title",
-                   "Typst Desktop" }
-              a { class: "git",
-                  href: "https://github.com/rayslash/typst-webdesktop",
-                  Icon { width: 30,
-                         height: 30,
-                         icon: fi_icons::FiGithub,
-                  }
+              },
+              // TitleToggle {},
+              div { class: "navtool",
+                    DarkModeToggle {},
+                    a { class: "git",
+                        href: "https://github.com/rayslash/typst-webdesktop",
+                        Icon { width: 30,
+                               height: 30,
+                               icon: fi_icons::FiGithub,
+                        }
+                    }
               }
             }
           }
     })
 }
 
+// Breaks entire site -- TitleToggle
+// Suspect that the issue is with labels properly showing up with <p>
+pub fn TitleToggle(cx: Scope) -> Element {
+    let collapsed_state = use_shared_state::<Title>(cx).unwrap();
+    let mut collapsed = collapsed_state.read().0;
+    let title = if collapsed {
+        "p { 'Typst Desktop' }"
+    } else {
+        "
+        p { 'Typst Desktop' }
+        p { 'An application written in Rust (Dioxius)' }
+    "
+    };
+
+    render! {rsx!(
+      label {
+        label {
+          onclick: move |_| {
+            collapsed = !collapsed;
+            collapsed_state.write().0 = collapsed;
+          },
+        },
+        title,
+      }
+    )}
+}
+
+pub fn DarkModeToggle(cx: Scope) -> Element {
+    let dark_mode_state = use_shared_state::<DarkMode>(cx).unwrap();
+    let mut dark_mode = dark_mode_state.read().0;
+    let style = if dark_mode {
+        "color: var(--bg)"
+    } else {
+        "color: var(--text)"
+    };
+
+    render! { rsx!(
+      label {
+        style: "{style}",
+        label { class: "darkmode",
+              onclick: move |_| {
+                dark_mode = !dark_mode;
+                dark_mode_state.write().0 = dark_mode;
+              },
+              Icon { width: 30,
+                 height: 30,
+                 icon: fi_icons::FiMoon,
+              }
+        },
+      })
+    }
+}
+
 pub fn About(cx: Scope) -> Element {
     render!(rsx! {
         p {

src/style.css

@@ -31,6 +31,11 @@ body {
 	justify-content: space-between;
 }
 
+.navtool {
+	display: flex;
+	padding: 0.5rem 0;
+}
+
 .git {
 	color: var(--text);
 }