From 554352e86605965893a6a849d4e3a32973a05581 Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Thu, 10 Jul 2025 13:04:54 +0200
Subject: [PATCH] responsive dashboard structure

---
 assets/dashboard.css           | 62 ++++++++++++++++++++++++++++++++++
 assets/{main.css => login.css} | 11 ++++--
 src/dashboard.rs               | 27 +++++++++++++++
 src/login.rs                   | 11 +++++-
 src/main.rs                    |  6 ++--
 5 files changed, 111 insertions(+), 6 deletions(-)
 create mode 100644 assets/dashboard.css
 rename assets/{main.css => login.css} (85%)
 create mode 100644 src/dashboard.rs

diff --git a/assets/dashboard.css b/assets/dashboard.css
new file mode 100644
index 0000000..5ebd485
--- /dev/null
+++ b/assets/dashboard.css
@@ -0,0 +1,62 @@
+body {
+  background-color: #111526;
+  margin: 0;
+}
+
+.container {
+  display: grid;
+  grid-template-columns: minmax(200px, 1fr) 2fr 1.5fr;
+  gap: 20px;
+}
+
+#sidebar {
+  background-color: #171b2e;
+  height: 100vh;
+  border-top-right-radius: 20px;
+  border-bottom-right-radius: 20px;
+}
+
+.left_container {
+  display: grid;
+  grid-template-rows: 200px 450px 230px;
+  gap: 20px;
+  padding-top: 20px;
+}
+
+#top_container,
+#mid_container,
+#bottom_container {
+  background-color: #bb69f4;
+  border-radius: 20px;
+  width: 100%;
+}
+
+.right_container {
+  display: grid;
+  grid-template-rows: 450px 450px;
+  gap: 20px;
+  padding-top: 20px;
+  padding-right: 20px;
+}
+
+.right_box {
+  background-color: #bb69f4;
+  border-radius: 20px;
+  width: 100%;
+}
+
+@media (max-width: 1000px) {
+  .container {
+    display: flex;
+    flex-direction: column;
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+
+  #sidebar {
+    display: none;
+    height: 150px;
+    border-radius: 20px;
+    width: 100%;
+  }
+}
\ No newline at end of file
diff --git a/assets/main.css b/assets/login.css
similarity index 85%
rename from assets/main.css
rename to assets/login.css
index 8dd39f6..d5cc283 100644
--- a/assets/main.css
+++ b/assets/login.css
@@ -16,6 +16,7 @@
     height: 100%;
     object-fit: cover;
     z-index: -1;
+    user-select: none;
 }
 
 #login_container {
@@ -57,12 +58,16 @@ h1 {
 }
 
 button {
+    border: none;
+    outline: none;
+    background-color: white;
     display: block;
     margin-top: 20px;
     margin-left: auto;
     margin-right: auto;
     width: max-content;
-    padding: 8px;
-    padding-left: 18px;
-    padding-right: 18px;
+    padding: 10px;
+    padding-left: 20px;
+    padding-right: 20px;
+    border-radius: 8px;
 }
\ No newline at end of file
diff --git a/src/dashboard.rs b/src/dashboard.rs
new file mode 100644
index 0000000..5903036
--- /dev/null
+++ b/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" }
+            }
+        }
+    }
+}
diff --git a/src/login.rs b/src/login.rs
index 18790fb..cdfb4c2 100644
--- a/src/login.rs
+++ b/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" }
+                }
             }
         }
     }
diff --git a/src/main.rs b/src/main.rs
index 80ff715..e8121e4 100644
--- a/src/main.rs
+++ b/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> {}
     }