responsive dashboard structure

src/dashboard.rs

@@ -0,0 +1,27 @@
+use dioxus::prelude::*;
+
+const DASHBOARD_CSS: Asset = asset!("/assets/dashboard.css");
+
+#[component]
+pub fn Dashboard() -> Element {
+    rsx! {
+        document::Link { rel: "stylesheet", href: DASHBOARD_CSS }
+
+        div {
+            class: "container",
+
+            div { id: "sidebar" }
+            div {
+                class: "left_container",
+                div { id: "top_container" }
+                div { id: "mid_container" }
+                div { id: "bottom_container" }
+            }
+            div {
+                class: "right_container",
+                div { class: "right_box" }
+                div { class: "right_box" }
+            }
+        }
+    }
+}

src/login.rs

@@ -1,8 +1,14 @@
 use dioxus::prelude::*;
 
+use crate::Route;
+
+const LOGIN_CSS: Asset = asset!("/assets/login.css");
+
 #[component]
 pub fn Login() -> Element {
     rsx! {
+        document::Link { rel: "stylesheet", href: LOGIN_CSS }
+
         div {
             id: "login_wrapper",
 
@@ -24,7 +30,10 @@ pub fn Login() -> Element {
                     input { class: "field" }
                 }
 
-                button { "Login" }
+                Link {
+                    to: Route::Dashboard {  },
+                    button { "Login" }
+                }
             }
         }
     }

src/main.rs

@@ -1,8 +1,10 @@
 mod backend;
+mod dashboard;
 mod login;
 
 use dioxus::prelude::*;
 
+use dashboard::Dashboard;
 use login::Login;
 
 #[derive(Debug, Clone, Routable, PartialEq)]
@@ -10,10 +12,11 @@ use login::Login;
 enum Route {
     #[route("/")]
     Login {},
+    #[route("/dashboard")]
+    Dashboard {},
 }
 
 const FAVICON: Asset = asset!("/assets/favicon.ico");
-const MAIN_CSS: Asset = asset!("/assets/main.css");
 const FONT_CSS: Asset = asset!("/assets/font.css");
 
 fn main() {
@@ -24,7 +27,6 @@ fn main() {
 fn App() -> Element {
     rsx! {
         document::Link { rel: "icon", href: FAVICON }
-        document::Link { rel: "stylesheet", href: MAIN_CSS }
         document::Link { rel: "stylesheet", href: FONT_CSS }
         Router::<Route> {}
     }