[RS-FE] Begin work on sidebar

rs-front/Dioxus.toml

@@ -16,7 +16,7 @@ asset_dir = "public"
 [web.app]
 
 # HTML title tag content
-title = "dioxus | ⛺"
+title = "EEGRust"
 
 [web.watcher]
 
@@ -31,10 +31,10 @@ watch_path = ["src", "public"]
 
 # CSS style file
 
-style = ["tailwind.css"]
+style = ["tailwind.css", "colors.css"]
 
 # Javascript code file
-script = []
+script = ["colors.js"]
 
 [web.resource.dev]
 

rs-front/input.css

@@ -1,3 +1,71 @@
+/*
+ *   BLUE
+ */
+ :root {
+    --c-blue-primary: #adc6ff;
+    --c-blue-on-primary: #002e69;
+    --c-blue-primary-container: #0e448e;
+    --c-blue-on-primary-container: #d8e2ff;
+    --c-blue-background: #1b1b1f;
+    --c-blue-on-background: #e3e2e6;
+    --c-blue-surface: #1b1b1f;
+    --c-blue-on-surface: #e3e2e6;
+    --c-blue-outline: #8e9099;
+    --c-blue-surface-variant: #44474f;
+    --c-blue-on-surface-variant: #c4c6d0;
+
+    --c-blue-success: #7cdc6d;
+    --c-blue-on-success: #003a02;
+}
+@media (prefers-color-scheme: light) {
+    :root {
+        --c-blue-primary: #315da8;
+        --c-blue-on-primary: #ffffff;
+        --c-blue-primary-container: #d8e2ff;
+        --c-blue-on-primary-container: #001a41;
+        --c-blue-background: #fefbff;
+        --c-blue-on-background: #1b1b1f;
+        --c-blue-surface: #fefbff;
+        --c-blue-on-surface: #1b1b1f;
+        --c-blue-outline: #74777f;
+        --c-blue-surface-variant: #e1e2ec;
+        --c-blue-on-surface-variant: #44474f;
+
+        --c-blue-success: #006e08;
+        --c-blue-on-success: #ffffff;
+    }
+}
+
+
+
+:root {
+    --c-error: #ffb4ab;
+    --c-on-error: #690005;
+    --c-error-container: #93000a;
+    --c-on-error-container: #ffdad6;
+    
+    --c-outline-50: rgba(143, 144, 154, 0.5);
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        --c-error: #ba1a1a;
+        --c-on-error: #ffffff;
+        --c-error-container: #ffdad6;
+        --c-on-error-container: #410002;
+
+        --c-outline-50: rgba(118, 118, 128, 0.5);
+    }
+}
+
+
+body {
+    background-color: var(--c-background);
+    color: var(--c-on-background);
+    font-family: Inter, "Inter Nerd Font", sans-serif;
+}
+
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

rs-front/public/colors.css

@@ -0,0 +1,232 @@
+/*
+    Material colors
+*/
+
+/*
+ *   GREEN
+ */
+ :root {
+    --c-green-primary: #7cdc6d;
+    --c-green-on-primary: #003a02;
+    --c-green-primary-container: #005304;
+    --c-green-on-primary-container: #97f986;
+    --c-green-background: #1a1c18;
+    --c-green-on-background: #e2e3dd;
+    --c-green-surface: #1a1c18;
+    --c-green-on-surface: #e2e3dd;
+    --c-green-outline: #8d9387;
+    --c-green-surface-variant: #43483f;
+    --c-green-on-surface-variant: #c3c8bc;
+
+    --c-green-success: #adc6ff;
+    --c-green-on-success: #002e69;
+}
+@media (prefers-color-scheme: light) {
+    :root {
+        --c-green-primary: #006e08;
+        --c-green-on-primary: #ffffff;
+        --c-green-primary-container: #97f986;
+        --c-green-on-primary-container: #002201;
+        --c-green-background: #fcfdf6;
+        --c-green-on-background: #1a1c18;
+        --c-green-surface: #fcfdf6;
+        --c-green-on-surface: #1a1c18;
+        --c-green-outline: #73796e;
+        --c-green-surface-variant: #dfe4d8;
+        --c-green-on-surface-variant: #43483f;
+
+        --c-green-success: #315da8;
+        --c-green-on-success: #ffffff;
+    }
+}
+
+/*
+ *   BLUE
+ */
+:root {
+    --c-blue-primary: #adc6ff;
+    --c-blue-on-primary: #002e69;
+    --c-blue-primary-container: #0e448e;
+    --c-blue-on-primary-container: #d8e2ff;
+    --c-blue-background: #1b1b1f;
+    --c-blue-on-background: #e3e2e6;
+    --c-blue-surface: #1b1b1f;
+    --c-blue-on-surface: #e3e2e6;
+    --c-blue-outline: #8e9099;
+    --c-blue-surface-variant: #44474f;
+    --c-blue-on-surface-variant: #c4c6d0;
+
+    --c-blue-success: #7cdc6d;
+    --c-blue-on-success: #003a02;
+}
+@media (prefers-color-scheme: light) {
+    :root {
+        --c-blue-primary: #315da8;
+        --c-blue-on-primary: #ffffff;
+        --c-blue-primary-container: #d8e2ff;
+        --c-blue-on-primary-container: #001a41;
+        --c-blue-background: #fefbff;
+        --c-blue-on-background: #1b1b1f;
+        --c-blue-surface: #fefbff;
+        --c-blue-on-surface: #1b1b1f;
+        --c-blue-outline: #74777f;
+        --c-blue-surface-variant: #e1e2ec;
+        --c-blue-on-surface-variant: #44474f;
+
+        --c-blue-success: #006e08;
+        --c-blue-on-success: #ffffff;
+    }
+}
+
+/*
+ *   YELLOW
+ */
+:root {
+    --c-yellow-primary: #f5bf31;
+    --c-yellow-on-primary: #3f2e00;
+    --c-yellow-primary-container: #5b4300;
+    --c-yellow-on-primary-container: #ffdf9b;
+    --c-yellow-background: #1e1b16;
+    --c-yellow-on-background: #e9e1d9;
+    --c-yellow-surface: #1e1b16;
+    --c-yellow-on-surface: #e9e1d9;
+    --c-yellow-outline: #999080;
+    --c-yellow-surface-variant: #4d4639;
+    --c-yellow-on-surface-variant: #d0c5b4;
+
+    --c-yellow-success: #7cdc6d;
+    --c-yellow-on-success: #003a02;
+}
+@media (prefers-color-scheme: light) {
+    :root {
+        --c-yellow-primary: #785a00;
+        --c-yellow-on-primary: #ffffff;
+        --c-yellow-primary-container: #ffdf9b;
+        --c-yellow-on-primary-container: #251a00;
+        --c-yellow-background: #fffbff;
+        --c-yellow-on-background: #1e1b16;
+        --c-yellow-surface: #fffbff;
+        --c-yellow-on-surface: #1e1b16;
+        --c-yellow-outline: #7f7667;
+        --c-yellow-surface-variant: #ede1cf;
+        --c-yellow-on-surface-variant: #4d4639;
+
+        --c-yellow-success: #006e08;
+        --c-yellow-on-success: #ffffff;
+    }
+}
+
+
+/*
+ *   PINK
+ */
+:root {
+    --c-pink-primary: #ffade5;
+    --c-pink-on-primary: #5e0051;
+    --c-pink-primary-container: #80156e;
+    --c-pink-on-primary-container: #ffd7ef;
+    --c-pink-background: #1f1a1d;
+    --c-pink-on-background: #eae0e3;
+    --c-pink-surface: #1f1a1d;
+    --c-pink-on-surface: #eae0e3;
+    --c-pink-outline: #9b8d94;
+    --c-pink-surface-variant: #4f444a;
+    --c-pink-on-surface-variant: #d2c2ca;
+
+    --c-pink-success: #7cdc6d;
+    --c-pink-on-success: #003a02;
+}
+@media (prefers-color-scheme: light) {
+    :root {
+        --c-pink-primary: #9d3288;
+        --c-pink-on-primary: #ffffff;
+        --c-pink-primary-container: #ffd7ef;
+        --c-pink-on-primary-container: #3a0031;
+        --c-pink-background: #fffbff;
+        --c-pink-on-background: #1f1a1d;
+        --c-pink-surface: #fffbff;
+        --c-pink-on-surface: #1f1a1d;
+        --c-pink-outline: #81737a;
+        --c-pink-surface-variant: #efdee6;
+        --c-pink-on-surface-variant: #4f444a;
+
+        --c-pink-success: #006e08;
+        --c-pink-on-success: #ffffff;
+    }
+}
+
+/*
+ * ORANGE
+ */
+:root {
+    --c-orange-primary: #ffb86d;
+    --c-orange-on-primary: #492900;
+    --c-orange-primary-container: #683c00;
+    --c-orange-on-primary-container: #ffdcbd;
+    --c-orange-background: #201b16;
+    --c-orange-on-background: #ebe1d9;
+    --c-orange-surface: #201b16;
+    --c-orange-on-surface: #ebe1d9;
+    --c-orange-outline: #9d8e81;
+    --c-orange-surface-variant: #50453a;
+    --c-orange-on-surface-variant: #d5c3b5;
+    
+    --c-orange-success: #7cdc6d;
+    --c-orange-on-success: #003a02;
+}
+@media (prefers-color-scheme: light) {
+    :root {
+        --c-orange-primary: #9e4300;
+        --c-orange-on-primary: #ffffff;
+        --c-orange-primary-container: #ffdbcb;
+        --c-orange-on-primary-container: #341100;
+        --c-orange-background: #fffbff;
+        --c-orange-on-background: #201a18;
+        --c-orange-surface: #fffbff;
+        --c-orange-on-surface: #201a18;
+        --c-orange-outline: #85736c;
+        --c-orange-surface-variant: #f4ded4;
+        --c-orange-on-surface-variant: #52443d;
+
+        --c-orange-success: #006e08;
+        --c-orange-on-success: #ffffff;
+    }
+}
+
+/*
+ * RED
+ */
+ :root {
+    --c-red-primary: #ffb4a8;
+    --c-red-on-primary: #690100;
+    --c-red-primary-container: #930100;
+    --c-red-on-primary-container: #ffdad4;
+    --c-red-background: #201a19;
+    --c-red-on-background: #ede0dd;
+    --c-red-surface: #201a19;
+    --c-red-on-surface: #ede0dd;
+    --c-red-outline: #a08c89;
+    --c-red-surface-variant: #534341;
+    --c-red-on-surface-variant: #d8c2be;
+
+    --c-red-success: #7cdc6d;
+    --c-red-on-success: #003a02;
+}
+@media (prefers-color-scheme: light) {
+    :root {
+        --c-red-primary: #c00100;
+        --c-red-on-primary: #ffffff;
+        --c-red-primary-container: #ffdad4;
+        --c-red-on-primary-container: #410000;
+        --c-red-background: #fffbff;
+        --c-red-on-background: #201a19;
+        --c-red-surface: #fffbff;
+        --c-red-on-surface: #201a19;
+        --c-red-outline: #857370;
+        --c-red-surface-variant: #f5ddda;
+        --c-red-on-surface-variant: #534341;
+
+        --c-red-success: #006e08;
+        --c-red-on-success: #ffffff;
+    }
+}

rs-front/public/colors.js

@@ -0,0 +1,58 @@
+
+export const applyColors = (colorName) => {
+    const styleStr = `
+:root {
+    --c-primary: var(--c-${colorName}-primary);
+    --c-on-primary: var(--c-${colorName}-on-primary);
+    --c-primary-container: var(--c-${colorName}-primary-container);
+    --c-on-primary-container: var(--c-${colorName}-on-primary-container);
+    --c-background: var(--c-${colorName}-background);
+    --c-on-background: var(--c-${colorName}-on-background);
+    --c-surface: var(--c-${colorName}-surface);
+    --c-on-surface: var(--c-${colorName}-on-surface);
+    --c-outline: var(--c-${colorName}-outline);
+    --c-surface-variant: var(--c-${colorName}-surface-variant);
+    --c-on-surface-variant: var(--c-${colorName}-on-surface-variant);
+    --c-success: var(--c-${colorName}-success);
+    --c-on-success: var(--c-${colorName}-on-success);
+}
+@media (prefers-color-scheme: light) {
+    :root {
+        --c-primary: var(--c-${colorName}-primary);
+        --c-on-primary: var(--c-${colorName}-on-primary);
+        --c-primary-container: var(--c-${colorName}-primary-container);
+        --c-on-primary-container: var(--c-${colorName}-on-primary-container);
+        --c-background: var(--c-${colorName}-background);
+        --c-on-background: var(--c-${colorName}-on-background);
+        --c-surface: var(--c-${colorName}-surface);
+        --c-on-surface: var(--c-${colorName}-on-surface);
+        --c-outline: var(--c-${colorName}-outline);
+        --c-surface-variant: var(--c-${colorName}-surface-variant);
+        --c-on-surface-variant: var(--c-${colorName}-on-surface-variant);
+        --c-success: var(--c-${colorName}-success);
+        --c-on-success: var(--c-${colorName}-on-success);
+    }
+}
+`;
+
+    // Check for a previous style element in the head
+    const styleEl = document.getElementById("color-scheme-style");
+
+    if (styleEl === null) {
+        styleEl = document.createElement("style");
+        styleEl.id = "color-scheme-style";
+        document.head.appendChild(styleEl);
+    }
+
+    // Apply the new color
+    styleEl.innerHTML = styleStr;
+
+    // Save
+    localStorage.setItem("color-scheme", colorName);
+};
+
+// Applies colors on load
+(() => {
+    const savedColor = localStorage.getItem("color-scheme") ?? "blue";
+    applyColors(savedColor);
+})();

rs-front/src/components/mod.rs

@@ -0,0 +1,3 @@
+pub mod navrail;
+
+

rs-front/src/components/navrail.rs

@@ -0,0 +1,59 @@
+use dioxus::prelude::*;
+
+use crate::icons::{
+    HomeIcon,
+    DocxIcon,
+    KeyIcon,
+};
+
+
+pub fn NavRail(cx: Scope) -> Element {
+    render! {
+        div {
+            div {
+                class: "flex flex-col justify-center items-center h-screen overflow-x-hidden",
+
+                // Home button
+                NavRailButton {
+                    path: "/",
+                    name: "Home",
+                    icon: render! {HomeIcon {}}
+                }
+
+                NavRailButton {
+                    path: "/certs",
+                    name: "Certs",
+                    icon: render! {DocxIcon {}}
+                }
+
+                NavRailButton {
+                    path: "/accesos",
+                    name: "Accesos",
+                    icon: render! {KeyIcon {}}
+                }
+            }
+        }
+    }
+}
+
+#[component]
+fn NavRailButton<'a>(cx: Scope, path: &'a str, name: &'a str, icon: Element<'a>) -> Element {
+    render! {
+        a {
+            class: "my-3 text-center group hover:bg-c-surface-variant rounded-xl transition-colors
+            max-w-[4rem] inline-block select-none",
+            href: *path,
+            "end": true,
+            div {
+                class: "p-1 inline-block group-[.active]:bg-c-surface-variant min-w-[4rem] rounded-full transition-colors",
+                icon
+            }
+            span {
+                class: "text-sm",
+                "{name}"
+            }
+        }
+    }
+}
+
+

rs-front/src/icons/docx_icon.rs

@@ -0,0 +1,16 @@
+use dioxus::prelude::*;
+
+pub fn DocxIcon(cx: Scope) -> Element {
+    render! {
+        svg {
+            xmlns: "http://www.w3.org/2000/svg",
+            class: "inline-block w-6",
+            fill: "var(--c-on-surface-variant)",
+            "viewBox": "0 0 256 256",
+            path {
+                d: "M52,144H36a8,8,0,0,0-8,8v56a8,8,0,0,0,8,8H52a36,36,0,0,0,0-72Zm0,56H44V160h8a20,20,0,0,1,0,40Zm169.53-4.91a8,8,0,0,1,.25,11.31A30.06,30.06,0,0,1,200,216c-17.65,0-32-16.15-32-36s14.35-36,32-36a30.06,30.06,0,0,1,21.78,9.6,8,8,0,0,1-11.56,11.06A14.24,14.24,0,0,0,200,160c-8.82,0-16,9-16,20s7.18,20,16,20a14.24,14.24,0,0,0,10.22-4.66A8,8,0,0,1,221.53,195.09ZM128,144c-17.65,0-32,16.15-32,36s14.35,36,32,36,32-16.15,32-36S145.65,144,128,144Zm0,56c-8.82,0-16-9-16-20s7.18-20,16-20,16,9,16,20S136.82,200,128,200ZM48,120a8,8,0,0,0,8-8V40h88V88a8,8,0,0,0,8,8h48v16a8,8,0,0,0,16,0V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v72A8,8,0,0,0,48,120ZM160,51.31,188.69,80H160Z"
+            }
+        }
+    }
+}
+

rs-front/src/icons/home_icon.rs

@@ -0,0 +1,16 @@
+use dioxus::prelude::*;
+
+pub fn HomeIcon(cx: Scope) -> Element {
+    render! {
+        svg {
+            xmlns: "http://www.w3.org/2000/svg",
+            class: "inline-block w-6",
+            fill: "var(--c-on-surface-variant)",
+            "viewBox": "0 0 256 256",
+            path {
+                d: "M218.83,103.77l-80-75.48a1.14,1.14,0,0,1-.11-.11,16,16,0,0,0-21.53,0l-.11.11L37.17,103.77A16,16,0,0,0,32,115.55V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V115.55A16,16,0,0,0,218.83,103.77ZM208,208H48V115.55l.11-.1L128,40l79.9,75.43.11.1Z"
+            }
+        }
+    }
+}
+

rs-front/src/icons/key_icon.rs

@@ -0,0 +1,16 @@
+use dioxus::prelude::*;
+
+pub fn KeyIcon(cx: Scope) -> Element {
+    render! {
+        svg {
+            xmlns: "http://www.w3.org/2000/svg",
+            class: "inline-block w-6",
+            fill: "var(--c-on-surface-variant)",
+            "viewBox": "0 0 256 256",
+            path {
+                d: "M48,56V200a8,8,0,0,1-16,0V56a8,8,0,0,1,16,0Zm84,54.5L112,117V96a8,8,0,0,0-16,0v21L76,110.5a8,8,0,0,0-5,15.22l20,6.49-12.34,17a8,8,0,1,0,12.94,9.4l12.34-17,12.34,17a8,8,0,1,0,12.94-9.4l-12.34-17,20-6.49A8,8,0,0,0,132,110.5ZM238,115.64A8,8,0,0,0,228,110.5L208,117V96a8,8,0,0,0-16,0v21l-20-6.49a8,8,0,0,0-4.95,15.22l20,6.49-12.34,17a8,8,0,1,0,12.94,9.4l12.34-17,12.34,17a8,8,0,1,0,12.94-9.4l-12.34-17,20-6.49A8,8,0,0,0,238,115.64Z"
+            }
+        }
+    }
+}
+

rs-front/src/icons/mod.rs

@@ -0,0 +1,7 @@
+mod home_icon;
+mod docx_icon;
+mod key_icon;
+
+pub use home_icon::HomeIcon;
+pub use docx_icon::DocxIcon;
+pub use key_icon::KeyIcon;

rs-front/src/main.rs

@@ -5,6 +5,9 @@ use dioxus_router::prelude::*;
 use dioxus::prelude::*;
 use log::LevelFilter;
 
+mod components;
+mod icons;
+
 fn main() {
     // Init debug
     dioxus_logger::init(LevelFilter::Info).expect("failed to init logger");
@@ -16,7 +19,11 @@ fn main() {
 
 fn app(cx: Scope) -> Element {
     render! {
-        Router::<Route> {}
+        div {
+            class: "grid grid-cols-[5rem_auto]",
+            components::navrail::NavRail {}
+            Router::<Route> {}
+        }
     }
 }
 
@@ -41,25 +48,27 @@ fn Home(cx: Scope) -> Element {
     let mut count = use_state(cx, || 0);
 
     cx.render(rsx! {
-        Link {
-            to: Route::Blog {
-                id: *count.get()
-            },
-            "Go to blog"
-        }
         div {
-            h1 { 
+            Link {
-                class: "text-red-400 text-2xl py-2 px-4 border border-red-400 rounded-md",
+                to: Route::Blog {
-                "High-Five counter: {count} :D (Are classes slow?)"
+                    id: *count.get()
+                },
+                "Go to blog"
             }
-            button { onclick: move |_| count += 1, "Up high!" }
+            div {
-            button { onclick: move |_| count -= 1, "Down low!" }
+                h1 { 
-            br {}
+                    class: "text-red-400 text-2xl py-2 px-4 border border-red-400 rounded-md",
-            p {
+                    "High-Five counter: {count} :D (Are classes slow?)"
-                "Huh, it looks like using a project using dx makes it slower. We'll have to see how it goes..."
+                }
-            }
+                button { onclick: move |_| count += 1, "Up high!" }
-            p {
+                button { onclick: move |_| count -= 1, "Down low!" }
-                "Or maybe not?"
+                br {}
+                p {
+                    "Huh, it looks like using a project using dx makes it slower. We'll have to see how it goes..."
+                }
+                p {
+                    "Or maybe not?"
+                }
             }
         }
     })

rs-front/tailwind.config.js

@@ -3,7 +3,34 @@ module.exports = {
     mode: "all",
     content: ["./src/**/*.{rs,html,css}", "./dist/**/*.html"],
     theme: {
-        extend: {},
+        extend: {
+            fontFamily: {
+                "mono": ["Inconsolata", "monospace"],
+            },
+        },
+        colors: {
+            "c-primary": "var(--c-primary)",
+            "c-on-primary": "var(--c-on-primary)",
+            "c-primary-container": "var(--c-primary-container)",
+            "c-on-primary-container": "var(--c-on-primary-container)",
+            "c-error": "var(--c-error)",
+            "c-on-error": "var(--c-on-error)",
+            "c-error-container": "var(--c-error-container)",
+            "c-on-error-container": "var(--c-on-error-container)",
+            "c-background": "var(--c-background)",
+            "c-on-background": "var(--c-on-background)",
+            "c-surface": "var(--c-surface)",
+            "c-on-surface": "var(--c-on-surface)",
+            "c-outline": "var(--c-outline)",
+            "c-outline-50": "var(--c-outline-50)",
+            "c-surface-variant": "var(--c-surface-variant)",
+            "c-on-surface-variant": "var(--c-on-surface-variant)",
+            "c-green": "#006b54",
+            "c-success": "var(--c-success)",
+            "c-on-success": "var(--c-on-success)",
+            "c-transparent": "rgba(0,0,0,0)",
+        },
     },
+
     plugins: [],
 };