feat(frontend): add drawer

frontend/src/components/drawer/mod.rs

@@ -0,0 +1,75 @@
+use dioxus::prelude::*;
+
+use crate::Route;
+
+#[component]
+pub fn Drawer() -> Element {
+    rsx! {
+      div { class: "drawer lg:drawer-open",
+        input {
+          r#type: "checkbox",
+          class: "drawer-toggle",
+          id: "main-drawer-toggle"
+        }
+        div { class: "drawer-content flex flex-col",
+          div { class: "w-full navbar bg-base-300",
+            div { class: "navbar-start",
+              div { class: "flex-none lg:hidden",
+                label {
+                  "aria-label": "open sidebar",
+                  r#for: "main-drawer-toggle",
+                  class: "btn btn-square btn-ghost",
+                  svg {
+                    "viewBox": "0 0 24 24",
+                    "xmlns": "http://www.w3.org/2000/svg",
+                    "fill": "none",
+                    class: "inline-block w-6 h-6 stroke-current",
+                    path {
+                      "stroke-linecap": "round",
+                      "stroke-width": "2",
+                      "stroke-linejoin": "round",
+                      "d": "M4 6h16M4 12h16M4 18h16"
+                    }
+                  }
+                }
+              }
+            }
+            div { class: "navbar-center",
+              a { class: "text-base-content btn btn-ghost text-xl",
+                "nghe"
+              }
+            }
+            div { class: "navbar-end",
+              button { class: "btn btn-ghost btn-circle",
+                svg {
+                  "xmlns": "http://www.w3.org/2000/svg",
+                  "fill": "none",
+                  "stroke": "currentColor",
+                  "viewBox": "0 0 24 24",
+                  class: "h-5 w-5",
+                  path {
+                    "stroke-linecap": "round",
+                    "d": "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z",
+                    "stroke-linejoin": "round",
+                    "stroke-width": "2"
+                  }
+                }
+              }
+            }
+          }
+          Outlet::<Route> {}
+        }
+        div { class: "drawer-side",
+          label {
+            r#for: "main-drawer-toggle",
+            "aria-label": "close sidebar",
+            class: "drawer-overlay"
+          }
+          ul { class: "menu p-4 w-80 min-h-full bg-base-200 text-base-content",
+            li { a { "Sidebar Item 1" } }
+            li { a { "Sidebar Item 2" } }
+          }
+        }
+      }
+    }
+}

frontend/src/components/login/mod.rs

@@ -77,32 +77,32 @@ pub fn Login() -> Element {
     }
 
     rsx! {
-      div { class: "min-h-screen flex flex-col justify-center py-12 px-4 lg:px-8",
+      div { class: "bg-base-100 min-h-screen flex flex-col justify-center py-12 px-4 lg:px-8",
         div { class: "sm:mx-auto sm:w-full sm:max-w-md",
-          h2 { class: "mt-6 text-center text-3xl leading-9 font-extrabold text-gray-900",
+          h2 { class: "text-base-content mt-6 text-center text-3xl leading-9 font-extrabold",
             "Login"
           }
         }
         div { class: "mt-8 sm:mx-auto sm:w-full sm:max-w-md",
-          div { class: "rounded-box bg-white py-8 px-6 shadow",
+          div { class: "bg-primary rounded-box py-8 px-6 shadow",
             div { class: "form-control sm:mx-auto sm:w-full sm:max-w-md",
-              div { class: "label", span { "Username" } }
+              div { class: "label", span { class: "text-primary-content", "Username" } }
               input {
                 class: "input input-bordered sm:mx-auto sm:w-full sm:max-w-md",
                 r#type: "text",
                 value: "{username}",
                 autocomplete: "username",
                 oninput: move |e| username.set(e.value())
               }
-              div { class: "label", span { "Password" } }
+              div { class: "label", span { class: "text-primary-content", "Password" } }
               input {
                 class: "input input-bordered sm:mx-auto sm:w-full sm:max-w-md",
                 r#type: "password",
                 value: "{password}",
                 autocomplete: "password",
                 oninput: move |e| password.set(e.value())
               }
-              div { class: "label", span { "Server URL" } }
+              div { class: "label", span { class: "text-primary-content", "Server URL" } }
               input {
                 class: "input input-bordered sm:mx-auto sm:w-full sm:max-w-md",
                 r#type: "text",

frontend/src/components/mod.rs

@@ -1,7 +1,9 @@
+mod drawer;
 mod home;
 mod login;
 mod setup;
 
+pub use drawer::Drawer;
 pub use home::Home;
 pub use login::Login;
 pub use setup::Setup;

frontend/src/components/setup/mod.rs

@@ -65,40 +65,40 @@ pub fn Setup() -> Element {
     };
 
     rsx! {
-      div { class: "min-h-screen flex flex-col justify-center py-12 px-4 lg:px-8",
+      div { class: "bg-base-100 min-h-screen flex flex-col justify-center py-12 px-4 lg:px-8",
         div { class: "sm:mx-auto sm:w-full sm:max-w-md",
-          h2 { class: "mt-6 text-center text-3xl leading-9 font-extrabold text-gray-900",
+          h2 { class: "text-base-content mt-6 text-center text-3xl leading-9 font-extrabold",
             "Setup an admin account"
           }
         }
         div { class: "mt-8 sm:mx-auto sm:w-full sm:max-w-md",
-          div { class: "rounded-box bg-white py-8 px-6 shadow",
+          div { class: "bg-primary rounded-box py-8 px-6 shadow",
             div { class: "form-control sm:mx-auto sm:w-full sm:max-w-md",
-              div { class: "label", span { "Username" } }
+              div { class: "label", span { class: "text-primary-content", "Username" } }
               input {
                 class: "input input-bordered sm:mx-auto sm:w-full sm:max-w-md",
                 r#type: "text",
                 value: "{username}",
                 autocomplete: "username",
                 oninput: move |e| username.set(e.value())
               }
-              div { class: "label", span { "Email" } }
+              div { class: "label", span { class: "text-primary-content", "Email" } }
               input {
                 class: "input input-bordered sm:mx-auto sm:w-full sm:max-w-md",
                 r#type: "email",
                 value: "{email}",
                 autocomplete: "email",
                 oninput: move |e| email.set(e.value())
               }
-              div { class: "label", span { "Password" } }
+              div { class: "label", span { class: "text-primary-content", "Password" } }
               input {
                 class: "input input-bordered sm:mx-auto sm:w-full sm:max-w-md",
                 r#type: "password",
                 value: "{password}",
                 autocomplete: "password",
                 oninput: move |e| password.set(e.value())
               }
-              div { class: "label", span { "Server URL" } }
+              div { class: "label", span { class: "text-primary-content", "Server URL" } }
               input {
                 class: "input input-bordered sm:mx-auto sm:w-full sm:max-w-md",
                 r#type: "text",

frontend/src/main.rs

@@ -14,5 +14,7 @@ fn main() {
 }
 
 fn App() -> Element {
-    rsx! { Router::<nghe_frontend::Route> {} }
+    rsx! {
+        Router::<nghe_frontend::Route> {}
+    }
 }

frontend/src/route.rs

@@ -3,9 +3,12 @@ use dioxus::prelude::*;
 use crate::components::*;
 
 #[derive(Clone, Routable, Debug, PartialEq)]
+#[rustfmt::skip]
 pub enum Route {
-    #[route("/")]
-    Home {},
+    #[layout(Drawer)]
+        #[route("/")]
+        Home {},
+    #[end_layout]
     #[route("/setup")]
     Setup {},
     #[route("/login")]