Add more QOL Javascript to NavBar components

[m-sears]

Summary

The NavBar components for Flowbite Svelte look good visually, but the functionality needs some tweaking:

1. When menu items are clicked, they should close the mobile-menu, otherwise the user has to take further action to close it manually which is bad UX and will get tiring on large websites or long scrolling sessions.

2. When CTA buttons are present, they should close the mobile menu when clicked IF the mobile menu is open., same reason as above.

3. When using the (activeUrl) property, it should split/filter the path to the first level. This way, if I have a drop-down menu incorporated, and I am on "www.company.com/about/careers" as an example, it will default to "www.company.com/about" as the active URL. This should also highlight the font of the sub-page you are located in, within the drop-down submenu.

This way if I navigate to the sub-menu of a drop-down, I can see that I am still under the parent page/link, but I can also see which specific sub-page I am on since the font is also highlighted in the drop-down submenu.

4. The drop-down menu should push the other menu links DOWN rather than appear/above beside it.

5. The mobile menu should close when you click outside of it, not just when you click a link or click the menu button again.

6. The menu icon should change to an "X" icon when the menu is open, showing people where to click to close it.

7. The slide transition should be faster, the default delay and duration for the animation are too long and will cause user frustration waiting for it top open and close repeatedly when navigating large sites or during long scrolling sessions.

Basic example

I do not have all of these suggestions mapped out, but here is a sample implementation of closing the menu when links/CTA buttons are clicked, as well as filtering the path (path filtering not functional right now). Also I sped up the delay of the slide transition animation.

<script>
    import '../app.css';
    import {
      Navbar,
      NavBrand,
      NavLi,
      NavUl,
      NavHamburger,
      Button,
    } from 'flowbite-svelte';
    import { navigating, page } from '$app/stores';
    import { sineInOut } from 'svelte/easing';

    let hideNavMenu = true;

    const closeNavMenu = () => {
      if (!hideNavMenu) {
        hideNavMenu = true;
      }
    };

    const toggleNavMenu = () => {
      hideNavMenu = !hideNavMenu;
    };

    $: activeUrl = $page.url.pathname.split('/').filter(Boolean)[0]; // Extracts the first level of the pathname
  
    $: if ($navigating) {
      hideNavMenu = true;
    }
  
    export let slideParams = {
      delay: 200,
      duration: 200,
      easing: sineInOut,
    };
</script>

<header>
    <Navbar let:toggle>
      <NavBrand href="/">
        <img src="/images/flowbite-svelte-icon-logo.svg" class="me-3 h-6 sm:h-9" alt="Flowbite Logo" />
        <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite</span>
      </NavBrand>
      <div class="flex md:order-2">
        <Button size="sm" on:click={closeNavMenu}>Get started</Button>
        <NavHamburger onClick={toggleNavMenu} />
      </div>
      <NavUl {slideParams} hidden={hideNavMenu} {activeUrl}>
        <NavLi href="/">Home</NavLi>
        <NavLi href="/about">About</NavLi>
        <NavLi href="/services">Services</NavLi>
        <NavLi href="/pricing">Pricing</NavLi>
        <NavLi href="/contact">Contact</NavLi>
      </NavUl>
    </Navbar>
</header>

Motivation

The motivation for these changes is to create a more intuitive navigation experience when using the Flowbite-Svelte NavBar components.