From 7f2da56441ddf44e87a263630a15bc85e33986c4 Mon Sep 17 00:00:00 2001
From: Florian RICHER <florian.richer@unova.fr>
Date: Fri, 12 Jan 2024 23:09:34 +0100
Subject: [PATCH] Update nav

---
 src/app/components/nav.rs | 16 ++++++++++++++--
 src/app/pages/posts.rs    |  2 +-
 style/nav.css             | 27 +++++++++++++++++----------
 3 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/src/app/components/nav.rs b/src/app/components/nav.rs
index 49f5348..5e6ee8c 100644
--- a/src/app/components/nav.rs
+++ b/src/app/components/nav.rs
@@ -5,11 +5,23 @@ use leptos_router::*;
 pub fn Nav() -> impl IntoView {
     let (mobile_menu, set_mobile_menu) = create_signal(false);
 
+    let mobile_burger = move || {
+        if mobile_menu() {
+            view! { <leptos_icons::Icon icon=icondata::IoClose /> }
+        } else {
+            view! { <leptos_icons::Icon icon=icondata::FiMenu /> }
+        }
+    };
+
     view! {
         <nav>
-            <A href="/" class="nav-home">Florian RICHER</A>
+            <div class="nav-main">
+                <A href="/" class="nav-home">Florian RICHER</A>
 
-            <span class="nav-mobile" on:click=move |_| set_mobile_menu(!mobile_menu())><leptos_icons::Icon icon=icondata::FiMenu/></span>
+                <span class="nav-mobile" on:click=move |_| set_mobile_menu(!mobile_menu())>
+                    {mobile_burger}
+                </span>
+            </div>
             <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>
diff --git a/src/app/pages/posts.rs b/src/app/pages/posts.rs
index 4c977c4..6c843fb 100644
--- a/src/app/pages/posts.rs
+++ b/src/app/pages/posts.rs
@@ -132,7 +132,7 @@ pub fn PostList() -> impl IntoView {
     let filter_view = move || {
         tag().and_then(|tag| Some(view! {
             <div class="mx-auto max-w-3xl mb-5">
-                Tag sélectionné : <A class="tag" href="/posts".to_string()>{tag}<leptos_icons::Icon icon=icondata::IoCloseOutline class="scale-125 ml-1 inline" /></A>
+                Tag sélectionné : <A class="tag" href="/posts".to_string()>{tag}<leptos_icons::Icon icon=icondata::IoClose class="scale-125 ml-1 inline" /></A>
             </div>
         }))
     };
diff --git a/style/nav.css b/style/nav.css
index 35bde8a..a56cb73 100644
--- a/style/nav.css
+++ b/style/nav.css
@@ -1,22 +1,29 @@
 @layer components {
     nav {
-        @apply flex flex-wrap flex-row justify-between items-center py-5;
-        @apply mx-auto max-w-3xl;
-        @apply font-semibold;
+        @apply mx-auto max-w-3xl py-5;
+        @apply md:flex md:justify-between md:items-center; /* Transition css only for mobile */
+        @apply font-semibold relative;
 
-        & > .nav-mobile {
-            @apply md:hidden scale-125;
-        }
+        & > .nav-main {
+            @apply max-md:flex max-md:justify-between max-md:items-center;
 
-        & > .nav-home {
-            @apply uppercase font-semibold text-lg;
+            & > .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;
+            @apply max-md:transition-transform max-md:scale-y-0; /* Transition css only for mobile */
+            @apply w-full flex flex-col gap-3 md:w-auto md:flex-row;
+            @apply bg-surface dark:bg-dark_surface;
+            @apply max-md:my-5 max-md:p-5 max-md:border-2 max-md:absolute max-md:z-10;
 
             &.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;
+                @apply max-md:scale-y-100; /* Transition css only for mobile */
             }
         }