wip

crates/ascend/src/components/header.rs

@@ -1,11 +1,13 @@
 use leptos::prelude::*;
 
+#[derive(Debug, Clone)]
 pub struct HeaderItems {
     pub left: Vec<HeaderItem>,
     pub middle: Vec<HeaderItem>,
     pub right: Vec<HeaderItem>,
 }
 
+#[derive(Debug, Clone)]
 pub struct HeaderItem {
     pub text: String,
     pub link: Option<String>,
@@ -13,7 +15,7 @@ pub struct HeaderItem {
 
 /// Header with background color etc.
 #[component]
-pub fn StyledHeader(items: HeaderItems) -> impl IntoView {
+pub fn StyledHeader(#[prop(into)] items: Signal<HeaderItems>) -> impl IntoView {
     view! {
         <div class="bg-orange-300 text-black border-b-2 border-b-orange-400">
             // <div class="container mx-auto" >
@@ -25,32 +27,34 @@ pub fn StyledHeader(items: HeaderItems) -> impl IntoView {
 
 /// Function header without styling
 #[component]
-pub fn Header(items: HeaderItems) -> impl IntoView {
+pub fn Header(#[prop(into)] items: Signal<HeaderItems>) -> impl IntoView {
-    let HeaderItems { left, middle, right } = items;
+    let left = move || items.read().left.clone();
+    let middle = move || items.read().middle.clone();
+    let right = move || items.read().right.clone();
 
     view! {
         <div class="grid grid-cols-[1fr_3fr_1fr] text-xl font-semibold p-4">
             // Left side of header
             <div class="justify-self-start">
-                <Items items=left />
+                <Items items=Signal::derive(left) />
             </div>
 
             // Expanding space in the middle
             <div class="justify-self-center font-semibold">
-                <Items items=middle />
+                <Items items=Signal::derive(middle) />
             </div>
 
             // Right side of header
             <div class="justify-self-end">
-                <Items items=right />
+                <Items items=Signal::derive(right) />
             </div>
         </div>
     }
 }
 
 #[component]
-fn Items(items: Vec<HeaderItem>) -> impl IntoView {
+fn Items(#[prop(into)] items: Signal<Vec<HeaderItem>>) -> impl IntoView {
-    let items = items.into_iter().map(|item| view! { <Item item /> }).collect_view();
+    let items = move || items.get().into_iter().map(|item| view! { <Item item /> }).collect_view();
     view! { <div class="flex gap-4">{items}</div> }
 }
 

crates/ascend/src/pages/wall.rs

@@ -58,7 +58,7 @@ pub fn Wall() -> impl leptos::IntoView {
 
     leptos::view! {
         <div class="min-w-screen min-h-screen bg-slate-900">
-            <StyledHeader items=header_items() />
+            <StyledHeader items=Signal::derive(header_items) />
 
             <div class="m-2">
                 <Suspense fallback=move || {