How to close the Navbar when a NavLi is clicked on mobile?

[planetaska]

I have a regular navbar like this:

<script>
    import { Navbar, NavBrand, NavLi, NavUl, NavHamburger, Dropdown, DropdownItem, DropdownDivider } from 'flowbite-svelte';
    import { ChevronDownOutline, FaceExplodeOutline } from 'flowbite-svelte-icons';
    import { DarkMode } from 'flowbite-svelte';
    import { page } from '$app/stores';
    $: activeUrl = $page.url.pathname;
</script>

<Navbar let:hidden let:toggle class="py-1 sm:py-0 absolute top-0 z-40 shadow">
    <NavBrand href="/" class="order-2 sm:order-1">...</NavBrand>
    <NavHamburger on:click={toggle} class="order-1 sm:order-2" />
    <div class="flex items-center order-3">
        <NavUl {hidden} {activeUrl}>
            <NavLi href="/">Home</NavLi>
            <NavLi id="nav-menu-tools" class="cursor-pointer">
                Tools<ChevronDownOutline class="w-3 h-3 ml-2 text-primary-800 dark:text-white inline" />
            </NavLi>
            <NavLi href="/about">About</NavLi>
            <Dropdown triggeredBy="#nav-menu-tools" class="w-44 z-20">
                <DropdownItem href="#">Tool 1</DropdownItem>
                <DropdownItem href="#">Tool 2</DropdownItem>
                <DropdownItem href="#">Tool 3</DropdownItem>
            </Dropdown>
        </NavUl>
        <DarkMode class="p-1" />
    </div>
</Navbar>

When the user clicks one of the NavLi item, or any DropdownItem, I expected the NavUl to disappear. But it doesn't.

So the first question is: how do you close the NavUl on mobile?

What I have tried:

I tried calling the toggle function like this:

<NavLi href="/" on:click={toggle}>Home</NavLi>

It works on mobile, but then on desktop, the toggle will trigger the Navbar animation for some reason, then the NavUl will get re-rendered, artifacts starts to appear, and the Dropdown is showing the gray background which should only show on mobile.

So, if this is the expected way to close the NavUl, is there a way to close it without triggering all these animations/re-rendering for desktop?

Let me rephrase the situation: when using toggle to close the NavUl, on mobile it closes just fine, but on desktop it creates all kinds of awkward animations and artifacts.

[danclaroni]

did you figure this out? I did the following as a work around:

    let hideNavMenu = true;

    const onNavHamburgerClick = (toggleFn: () => void) => {
        toggleFn();
        hideNavMenu = false;
    };

    const onNavLinkClick = (toggleFn: () => void) => {
        hideNavMenu = true;
    };

    <Navbar let:toggle">
...
        <NavHamburger onClick={() => onNavHamburgerClick(toggle)} />
...
        <NavUl
            hidden={hideNavMenu}
            on:click={() => onNavLinkClick(toggle)}
        >

[planetaska]

That worked perfectly, thank you!

A side note for anyone running into the same issue: if you have a dropdown like the one in my question, you will want to put on:click on each NavLi and DropdownItem components instead of the NavUl, otherwise the nav will close when the user clicked on the menu opening link! Also notice that on NavHamburger, the prop name is onClick, not on:click.

[planetaska]

Just want to add this quick: if your nav links does change the browser history, you can use $navigating from SvelteKit to close the nav. Something like this:

import { navigating } from '$app/stores';

$: if ($navigating) {
    hideNavMenu = true
}

So that you don't have to add on:click to each NavLi or DropdownItem manually!

[vanBerloDevelopments]

worked great!

Small issue, now the burger menu does not close when you press it when it's open. You might want to change onNavHamburgerClick in your answer to:

const onNavHamburgerClick = (toggleFn: () => void) => {
toggleFn();
hideNavMenu = !hideNavMenu;
};

[eslam-allam]

Just want to add this quick: if your nav links does change the browser history, you can use $navigating from SvelteKit to close the nav. Something like this:

import { navigating } from '$app/stores';

$: if ($navigating) {
    hideNavMenu = true
}

So that you don't have to add on:click to each NavLi or DropdownItem manually!

If you would like this to work with url fragment changes as well then perhaps you could try this instead:

import { page } from '$app/stores';

$: activeUrl = $page.url.pathname + $page.url.hash;
$: if (activeUrl) {
	hideNavMenu = true;
}

This is nice for me since I had the activeUrl variable already for to change the color of the active tab in the navbar.