Added simple topbar

assets/tailwind.css

@@ -526,7 +526,7 @@ html {
   --er: 71.76% 0.221 22.18;
   --bc: 19.5836% 0.002127 291.956898;
   --pc: 13.2724% 0.036042 39.606669;
-  --sc: 17.6992% 0.028367 95.291946;
+  --sc: 88.8207% 0.022093 260.526312;
   --ac: 15.3748% 0.024689 184.972959;
   --nc: 87.7082% 0.004808 262.829219;
   --inc: 0% 0 0;
@@ -542,7 +542,7 @@ html {
   --border-btn: 1px;
   --tab-border: 1px;
   --tab-radius: 0.5rem;
-  --s: 88.4962% 0.141836 95.291946;
+  --s: 44.1033% 0.110463 260.526312;
   --a: 76.8742% 0.123447 184.972959;
   --n: 38.5412% 0.024038 262.829219;
   --b1: 97.9179% 0.010634 291.956898;
@@ -551,15 +551,15 @@ html {
 @media (prefers-color-scheme: dark) {
   :root {
     --p: 66.362% 0.180208 39.606669;
-    --b2: 19.635% 0.009739 39.286176;
+    --b2: 19.4472% 0.013641 266.87143;
-    --b3: 18.1571% 0.009006 39.286176;
+    --b3: 17.9835% 0.012614 266.87143;
     --in: 72.06% 0.191 231.6;
     --su: 64.8% 0.150 160;
     --wa: 84.71% 0.199 83.87;
     --er: 71.76% 0.221 22.18;
-    --bc: 84.2226% 0.002094 39.286176;
+    --bc: 84.1822% 0.002934 266.87143;
     --pc: 13.2724% 0.036042 39.606669;
-    --sc: 17.6992% 0.028367 95.291946;
+    --sc: 88.8207% 0.022093 260.526312;
     --ac: 15.3748% 0.024689 184.972959;
     --nc: 87.7082% 0.004808 262.829219;
     --inc: 0% 0 0;
@@ -575,10 +575,10 @@ html {
     --border-btn: 1px;
     --tab-border: 1px;
     --tab-radius: 0.5rem;
-    --s: 88.4962% 0.141836 95.291946;
+    --s: 44.1033% 0.110463 260.526312;
     --a: 76.8742% 0.123447 184.972959;
     --n: 38.5412% 0.024038 262.829219;
-    --b1: 21.113% 0.010472 39.286176;
+    --b1: 20.911% 0.014668 266.87143;
   }
 }
 
@@ -592,7 +592,7 @@ html {
   --er: 71.76% 0.221 22.18;
   --bc: 19.5836% 0.002127 291.956898;
   --pc: 13.2724% 0.036042 39.606669;
-  --sc: 17.6992% 0.028367 95.291946;
+  --sc: 88.8207% 0.022093 260.526312;
   --ac: 15.3748% 0.024689 184.972959;
   --nc: 87.7082% 0.004808 262.829219;
   --inc: 0% 0 0;
@@ -608,7 +608,7 @@ html {
   --border-btn: 1px;
   --tab-border: 1px;
   --tab-radius: 0.5rem;
-  --s: 88.4962% 0.141836 95.291946;
+  --s: 44.1033% 0.110463 260.526312;
   --a: 76.8742% 0.123447 184.972959;
   --n: 38.5412% 0.024038 262.829219;
   --b1: 97.9179% 0.010634 291.956898;
@@ -616,15 +616,15 @@ html {
 
 [data-theme=wrb_dark] {
   --p: 66.362% 0.180208 39.606669;
-  --b2: 19.635% 0.009739 39.286176;
+  --b2: 19.4472% 0.013641 266.87143;
-  --b3: 18.1571% 0.009006 39.286176;
+  --b3: 17.9835% 0.012614 266.87143;
   --in: 72.06% 0.191 231.6;
   --su: 64.8% 0.150 160;
   --wa: 84.71% 0.199 83.87;
   --er: 71.76% 0.221 22.18;
-  --bc: 84.2226% 0.002094 39.286176;
+  --bc: 84.1822% 0.002934 266.87143;
   --pc: 13.2724% 0.036042 39.606669;
-  --sc: 17.6992% 0.028367 95.291946;
+  --sc: 88.8207% 0.022093 260.526312;
   --ac: 15.3748% 0.024689 184.972959;
   --nc: 87.7082% 0.004808 262.829219;
   --inc: 0% 0 0;
@@ -640,10 +640,10 @@ html {
   --border-btn: 1px;
   --tab-border: 1px;
   --tab-radius: 0.5rem;
-  --s: 88.4962% 0.141836 95.291946;
+  --s: 44.1033% 0.110463 260.526312;
   --a: 76.8742% 0.123447 184.972959;
   --n: 38.5412% 0.024038 262.829219;
-  --b1: 21.113% 0.010472 39.286176;
+  --b1: 20.911% 0.014668 266.87143;
 }
 
 *, ::before, ::after {
@@ -754,176 +754,17 @@ html {
   --tw-contain-style:  ;
 }
 
-.btn {
+.navbar {
-  display: inline-flex;
+  display: flex;
-  height: 3rem;
-  min-height: 3rem;
-  flex-shrink: 0;
-  cursor: pointer;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  flex-wrap: wrap;
   align-items: center;
-  justify-content: center;
+  padding: var(--navbar-padding, 0.5rem);
-  border-radius: var(--rounded-btn, 0.5rem);
+  min-height: 4rem;
-  border-color: transparent;
+  width: 100%;
-  border-color: oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity));
-  padding-left: 1rem;
-  padding-right: 1rem;
-  text-align: center;
-  font-size: 0.875rem;
-  line-height: 1em;
-  gap: 0.5rem;
-  font-weight: 600;
-  text-decoration-line: none;
-  transition-duration: 200ms;
-  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-  border-width: var(--border-btn, 1px);
-  transition-property: color, background-color, border-color, opacity, box-shadow, transform;
-  --tw-text-opacity: 1;
-  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
-  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  outline-color: var(--fallback-bc,oklch(var(--bc)/1));
-  background-color: oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity));
-  --tw-bg-opacity: 1;
-  --tw-border-opacity: 1;
 }
 
-.btn-disabled,
+:where(.navbar > *:not(script, style)) {
-  .btn[disabled],
+  display: inline-flex;
-  .btn:disabled {
+  align-items: center;
-  pointer-events: none;
-}
-
-:where(.btn:is(input[type="checkbox"])),
-:where(.btn:is(input[type="radio"])) {
-  width: auto;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-}
-
-.btn:is(input[type="checkbox"]):after,
-.btn:is(input[type="radio"]):after {
-  --tw-content: attr(aria-label);
-  content: var(--tw-content);
-}
-
-@media (hover: hover) {
-  .btn:hover {
-    --tw-border-opacity: 1;
-    border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
-    --tw-bg-opacity: 1;
-    background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
-  }
-
-  @supports (color: color-mix(in oklab, black, black)) {
-    .btn:hover {
-      background-color: color-mix(
-            in oklab,
-            oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%,
-            black
-          );
-      border-color: color-mix(
-            in oklab,
-            oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%,
-            black
-          );
-    }
-  }
-
-  @supports not (color: oklch(0% 0 0)) {
-    .btn:hover {
-      background-color: var(--btn-color, var(--fallback-b2));
-      border-color: var(--btn-color, var(--fallback-b2));
-    }
-  }
-
-  .btn.glass:hover {
-    --glass-opacity: 25%;
-    --glass-border-opacity: 15%;
-  }
-
-  .btn-disabled:hover,
-    .btn[disabled]:hover,
-    .btn:disabled:hover {
-    --tw-border-opacity: 0;
-    background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
-    --tw-bg-opacity: 0.2;
-    color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
-    --tw-text-opacity: 0.2;
-  }
-
-  @supports (color: color-mix(in oklab, black, black)) {
-    .btn:is(input[type="checkbox"]:checked):hover, .btn:is(input[type="radio"]:checked):hover {
-      background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
-      border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
-    }
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .btn {
-    animation: button-pop var(--animation-btn, 0.25s) ease-out;
-  }
-}
-
-.btn:active:hover,
-  .btn:active:focus {
-  animation: button-pop 0s ease-out;
-  transform: scale(var(--btn-focus-scale, 0.97));
-}
-
-@supports not (color: oklch(0% 0 0)) {
-  .btn {
-    background-color: var(--btn-color, var(--fallback-b2));
-    border-color: var(--btn-color, var(--fallback-b2));
-  }
-}
-
-.btn:focus-visible {
-  outline-style: solid;
-  outline-width: 2px;
-  outline-offset: 2px;
-}
-
-.btn.glass {
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  outline-color: currentColor;
-}
-
-.btn.glass.btn-active {
-  --glass-opacity: 25%;
-  --glass-border-opacity: 15%;
-}
-
-.btn.btn-disabled,
-  .btn[disabled],
-  .btn:disabled {
-  --tw-border-opacity: 0;
-  background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
-  --tw-bg-opacity: 0.2;
-  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
-  --tw-text-opacity: 0.2;
-}
-
-.btn:is(input[type="checkbox"]:checked),
-.btn:is(input[type="radio"]:checked) {
-  --tw-border-opacity: 1;
-  border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity)));
-  --tw-bg-opacity: 1;
-  background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
-  --tw-text-opacity: 1;
-  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
-}
-
-.btn:is(input[type="checkbox"]:checked):focus-visible, .btn:is(input[type="radio"]:checked):focus-visible {
-  outline-color: var(--fallback-p,oklch(var(--p)/1));
 }
 
 @keyframes button-pop {
@@ -954,10 +795,6 @@ html {
   }
 }
 
-.join > :where(*:not(:first-child)):is(.btn) {
-  margin-inline-start: calc(var(--border-btn) * -1);
-}
-
 @keyframes modal-pop {
   0% {
     opacity: 0;
@@ -1023,25 +860,16 @@ html {
   }
 }
 
-.join.join-vertical > :where(*:not(:first-child)):is(.btn) {
+.flex-1 {
-  margin-top: calc(var(--border-btn) * -1);
+  flex: 1 1 0%;
 }
 
-.join.join-horizontal > :where(*:not(:first-child)):is(.btn) {
+.flex-none {
-  margin-inline-start: calc(var(--border-btn) * -1);
+  flex: none;
 }
 
-.h-32 {
+.gap-2 {
-  height: 8rem;
+  gap: 0.5rem;
-}
-
-.w-32 {
-  width: 8rem;
-}
-
-.bg-base-100 {
-  --tw-bg-opacity: 1;
-  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
 }
 
 .bg-base-200 {
@@ -1049,6 +877,11 @@ html {
   background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
 }
 
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
 .text-xl {
   font-size: 1.25rem;
   line-height: 1.75rem;

src/components.rs

@@ -0,0 +1,2 @@
+pub mod home;
+pub mod layout;

src/components/home.rs

@@ -0,0 +1,10 @@
+use dioxus::prelude::*;
+
+#[component]
+pub fn Home() -> Element {
+    rsx! {
+        div {
+            h1 { class: "text-xl font-bold text-primary", "WRB App" }
+        }
+    }
+}

src/components/layout.rs

@@ -0,0 +1,2 @@
+pub mod navbar;
+pub mod topbar;

src/components/layout/navbar.rs

@@ -0,0 +1 @@
+

src/components/layout/topbar.rs

@@ -0,0 +1,19 @@
+use dioxus::prelude::*;
+
+#[component]
+pub fn Topbar() -> Element {
+    rsx! {
+        div {
+            class: "navbar bg-base-200 px-3",
+            div {
+                class: "flex-1",
+                span { class: "text-xl font-bold", "WRB" }
+            }
+            div {
+                class: "flex-none gap-2",
+                span { "Admin" }
+                span { "Settings" }
+            }
+        }
+    }
+}

src/main.rs

@@ -1,14 +1,17 @@
 #![allow(non_snake_case)]
 
+mod components;
+
 use dioxus::prelude::*;
 use tracing::{info, Level};
 
+// Include routes
+use components::home::Home;
+
 #[derive(Clone, Routable, Debug, PartialEq, serde::Serialize, serde::Deserialize)]
 enum Route {
     #[route("/")]
     Home {},
-    #[route("/blog/:id")]
-    Blog { id: i32 },
 }
 
 const _TAILWIND_URL: &str = manganis::mg!(file("assets/tailwind.css"));
@@ -21,58 +24,7 @@ fn main() {
 
 fn App() -> Element {
     rsx! {
+        components::layout::topbar::Topbar {}
         Router::<Route> {}
     }
 }
-
-#[component]
-fn Blog(id: i32) -> Element {
-    rsx! {
-        Link { to: Route::Home {}, "Go to counter" }
-        "Blog post {id}"
-    }
-}
-
-#[component]
-fn Home() -> Element {
-    let mut count = use_signal(|| 0);
-    let mut text = use_signal(|| String::from("..."));
-
-    rsx! {
-        Link {
-            to: Route::Blog {
-                id: count()
-            },
-            "Go to blog"
-        }
-        div {
-            class: "bg-base-100",
-            h1 { class: "text-xl font-bold text-primary", "High-Five counter: {count}" }
-            button { class: "btn", onclick: move |_| count += 1, "Up high!" }
-            button { onclick: move |_| count -= 1, "Down low!" }
-            button {
-                onclick: move |_| async move {
-                    if let Ok(data) = get_server_data().await {
-                        tracing::info!("Client received: {}", data);
-                        text.set(data.clone());
-                        post_server_data(data).await.unwrap();
-                    }
-                },
-                "Get Server Data"
-            }
-            p { "Server data: {text}"}
-            div { class: "w-32 h-32 bg-base-200", "test" }
-        }
-    }
-}
-
-#[server(PostServerData)]
-async fn post_server_data(data: String) -> Result<(), ServerFnError> {
-    info!("Server received: {}", data);
-    Ok(())
-}
-
-#[server(GetServerData)]
-async fn get_server_data() -> Result<String, ServerFnError> {
-    Ok("Hello from the server!".to_string())
-}

tailwind.config.js

@@ -17,7 +17,7 @@ module.exports = {
           {
               wrb: {
                   "primary": "#eb6330",
-                  "secondary": "#f6d860",
+                  "secondary": "#2d518f",
                   "accent": "#37cdbe",
                   "neutral": "#3d4451",
                   "base-100": "#f8f7ff",
@@ -26,10 +26,10 @@ module.exports = {
           {
               wrb_dark: {
                   "primary": "#eb6330",
-                  "secondary": "#f6d860",
+                  "secondary": "#2d518f",
                   "accent": "#37cdbe",
                   "neutral": "#3d4451",
-                  "base-100": "#1d1715",
+                  "base-100": "#15181f",
               },
               
           },