Refactor title to nav

src/app/components/mod.rs

@@ -27,8 +27,8 @@ mod loading;
 
 pub use loading::Loading;
 
-mod title;
+mod nav;
 
-pub use title::Title;
+pub use nav::Nav;
 
 pub use mon_parcours::MonParcours;

src/app/components/nav.rs

@@ -0,0 +1,21 @@
+use leptos::*;
+use leptos_router::*;
+use leptos_icons::FiIcon::FiMenu;
+use leptos_icons::*;
+
+#[component]
+pub fn Nav() -> impl IntoView {
+    let (mobile_menu, set_mobile_menu) = create_signal(false);
+
+    view! {
+        <nav>
+            <A href="/" class="nav-home">Florian RICHER</A>
+
+            <span class="nav-mobile" on:click=move |_| set_mobile_menu(!mobile_menu())><Icon icon=Icon::from(FiMenu)/></span>
+            <div class="nav-links" class:open=move || mobile_menu()>
+                <A href="/experience" class="nav-link">Mon parcours</A>
+                <A href="/posts" class="nav-link">Blog</A>
+            </div>
+        </nav>
+    }
+}

src/app/components/title.rs

@@ -1,17 +0,0 @@
-use leptos::*;
-use leptos_router::A;
-
-#[component]
-pub fn Title(
-    href: String,
-    #[prop[optional]]
-    title: Option<String>
-) -> impl IntoView {
-    view! {
-        <header>
-            <A href=href>r"< Retour"</A>
-            <h1>{title}</h1>
-            <span></span>
-        </header>
-    }
-}

src/app/pages/experience.rs

@@ -1,10 +1,10 @@
 use leptos::*;
-use super::super::components::{Title, MonParcours};
+use super::super::components::{Nav, MonParcours};
 #[component]
 pub fn Experience() -> impl IntoView {
     view! {
+        <Nav/>
         <main class="m-0 p-0 bg-surface dark:bg-dark_surface text-on_surface dark:text-dark_on_surface">
-            <Title href="/".to_string() title="Mon parcours".to_string()/>
             <MonParcours/>
         </main>
     }

src/app/pages/home.rs

@@ -3,7 +3,7 @@ use super::super::components::{TopComponent};
 #[component]
 pub fn Home() -> impl IntoView {
     view! {
-        <main class="m-0 p-0 bg-surface dark:bg-dark_surface text-on_surface dark:text-dark_on_surface">
+        <main>
             <TopComponent/>
         </main>
     }

src/app/pages/posts.rs

@@ -4,7 +4,7 @@ use leptos_router::*;
 use crate::app::{
     models::Post,
     components::{
-        Title, Loading
+        Loading, Nav
     }
 };
 
@@ -107,16 +107,10 @@ pub fn PostList() -> impl IntoView {
         })
     };
 
-    let title = move || match tag() {
-        Some(tag) => view! { <Title href="/posts".to_string() title=format!("Posts for {}", tag)/> },
-        None => view! { <Title href="/".to_string() title="Posts".to_string()/> }
-    };
-
     view! {
         <Suspense fallback=move || view! { <Loading title="Chargement des posts...".to_string() /> }>
+            <Nav/>
             <main class="posts">
-                { title }
-
                 <div class="posts__cards">{posts_view}</div>
             </main>
         </Suspense>
@@ -134,7 +128,6 @@ pub fn PostElement() -> impl IntoView {
         post.and_then(|post| {
             view! {
                 <>
-                    <Title href="/posts".to_string() title=post.metadata.title.clone()/>
                     <PostTags tags=post.metadata.tags.clone()/>
                     {
                         if post.metadata.draft {
@@ -157,6 +150,7 @@ pub fn PostElement() -> impl IntoView {
 
     view! {
         <Suspense fallback=move || view! { <Loading title="Chargement du post...".to_string() /> }>
+            <Nav/>
             <main class="post">
                 {post_view}
                 <script>load();</script>