Refactor title to nav

Cargo.lock

@@ -1787,7 +1787,7 @@ checksum = "69d3587f8a9e599cc7ec2c00e331f71c4e69a5f9a4b8a6efd5b07466b9736f9a"
 
 [[package]]
 name = "portfolio"
-version = "0.3.0"
+version = "0.4.0"
 dependencies = [
  "actix-files",
  "actix-web",

Cargo.toml

@@ -19,6 +19,7 @@ serde = "1.0"
 
 # https://carlosted.github.io/icondata/
 leptos_icons = { version = "0.1.0", features = [
+    "FiMenu",
     "FiExternalLink",
     "FaGithubBrands",
     "FaLinkedinBrands",

data_src/posts/test.md

@@ -17,7 +17,7 @@ tags:
 ##### Heading 5
 ###### Heading 6
 
-This is a paragraph tag. It's used for displaying text content.
+This is a paragraph tag. It's used `for` displaying text content.
 
 [Click me to visit Example website!](https://www.example.com)
 

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>

style/nav.css

@@ -0,0 +1,30 @@
+@layer components {
+    nav {
+        @apply flex flex-wrap flex-row justify-between items-center py-5;
+        @apply mx-auto max-w-3xl;
+        @apply font-semibold;
+
+        & > .nav-mobile {
+            @apply md:hidden scale-125;
+        }
+
+        & > .nav-home {
+            @apply uppercase font-semibold text-lg;
+        }
+
+        & > .nav-links {
+            @apply hidden flex-row gap-5 md:h-auto md:flex;
+
+            &.open {
+                @apply max-md:flex max-md:flex-col max-md:w-full max-md:my-5 max-md:py-5 max-md:border-y-2;
+            }
+        }
+
+        & a {
+            @apply transition-colors duration-500;
+            &:hover {
+                @apply text-primary underline;
+            }
+        }
+    }
+}

style/portfolio.css

@@ -9,6 +9,10 @@
 @import './social_links.css';
 @import './tag.css';
 @import './timeline.css';
-@import './title.css';
 @import './top_component.css';
-/*@import './mermaid.css';*/
+@import './nav.css';
+/*@import './mermaid.css';*/
+
+body {
+    @apply bg-surface dark:bg-dark_surface text-on_surface dark:text-dark_on_surface px-10;
+}

style/post.css

@@ -1,32 +1,31 @@
 @layer components {
     .posts, .post {
-        @apply bg-surface dark:bg-dark_surface text-on_surface dark:text-dark_on_surface;
+        @apply min-h-screen;
-        @apply min-h-screen p-5;
 
         & h1 {
-            @apply text-5xl;
-        }
-
-        & h2 {
             @apply text-4xl;
         }
 
-        & h3 {
+        & h2 {
             @apply text-3xl;
         }
 
-        & h4 {
+        & h3 {
             @apply text-2xl;
         }
 
-        & h5 {
+        & h4 {
             @apply text-xl;
         }
 
-        & h6 {
+        & h5 {
             @apply text-lg;
         }
 
+        & h6 {
+            @apply text-base;
+        }
+
         & h1, & h2, & h3, & h4, & h5, & h6 {
             @apply my-3 font-bold;
         }
@@ -36,25 +35,39 @@
         }
 
         & ul li {
-            @apply list-disc list-inside;
+            @apply list-disc list-inside ml-5;
         }
 
         & ol li {
-            @apply list-decimal list-inside;
+            @apply list-decimal list-inside ml-5;
+        }
+
+        & a {
+            @apply text-primary;
         }
 
         & blockquote {
-            @apply border-l-4 border-primary/50 dark:border-dark_primary/50 pl-3 my-3;
+            @apply border-l-4 border-primary/50 dark:border-dark_primary/50 pl-3 my-3 bg-primary/5 dark:bg-dark_primary/5;
         }
 
         & .tags_list {
             @apply flex flex-row flex-wrap gap-2;
         }
+
+        & code {
+            @apply bg-primary/10 dark:bg-dark_primary/10 rounded-md p-1;
+        }
+
+        /* Fix useless padding */
+        & pre code {
+            @apply p-0;
+        }
     }
 
     .posts {
         & > .posts__cards {
-            @apply grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 m-5;
+            @apply grid grid-cols-1 gap-5 md:grid-cols-2;
+            @apply mx-auto max-w-3xl;
 
             & > div {
                 @apply rounded-xl overflow-hidden relative;

style/title.css

@@ -1,9 +0,0 @@
-@layer components {
-    header {
-        @apply flex flex-col md:flex-row items-center justify-between p-5;
-
-        & h1 {
-            @apply my-3 font-bold text-center text-6xl mb-5 flex-1;
-        }
-    }
-}

style/top_component.css

@@ -3,14 +3,14 @@
         @apply min-h-screen w-full flex flex-col md:flex-row items-center gap-5 relative;
 
         & > div {
-            @apply flex-1 p-10;
+            @apply flex-1;
         }
 
         & > .top_component__image {
-            @apply flex justify-center items-center;
+            @apply flex justify-center items-center px-5;
 
             & > img {
-                @apply mx-auto rounded-lg;
+                @apply rounded-lg w-full;
             }
         }