Update nav
This commit is contained in:
parent
bd9f35c993
commit
7f2da56441
3 changed files with 32 additions and 13 deletions
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
}))
|
||||
};
|
||||
|
|
|
@ -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 */
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue