fix: li classes cascaded from ul

[jjagielka]

📑 Description

Navbar: use the setContext to push classes for NavbarLi from 'NavbarUl`. Eliminates the need to repeat the code when navbar is customized.

✅ Checks

• My pull request adheres to the code style of this project
• My code requires changes to the documentation
• I have updated the documentation as required
• I have checked the page with https://validator.unl.edu/
• All the tests have passed
• My pull request is based on the latest commit (not the npm version).

ℹ Additional Information

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
flowbite-svelte	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Mar 1, 2023 at 9:10PM (UTC)
flowbite-svelte-update	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Mar 1, 2023 at 9:10PM (UTC)

[shinokada]

Can you explain why this PR eliminates the need to repeat the code when the navbar is customized?

[jjagielka]

Previously you needed to make:

...
  <NavUl {hidden}>
    <NavLi activeClass="text-red" nonActiveClass="text-blue" href="/" active={true}>Home</NavLi>
    <NavLi activeClass="text-red" nonActiveClass="text-blue" href="/about">About</NavLi>
    <NavLi activeClass="text-red" nonActiveClass="text-blue" href="/services">Services</NavLi>
    <NavLi activeClass="text-red" nonActiveClass="text-blue" href="/pricing">Pricing</NavLi>
    <NavLi activeClass="text-red" nonActiveClass="text-blue" href="/contact">Contact</NavLi>
  </NavUl>
...

now you can do like:

...
  <NavUl activeClass="text-red" nonActiveClass="text-blue" {hidden}>
    <NavLi href="/" active={true}>Home</NavLi>
    <NavLi href="/about">About</NavLi>
    <NavLi href="/services">Services</NavLi>
    <NavLi href="/pricing">Pricing</NavLi>
    <NavLi href="/contact">Contact</NavLi>
  </NavUl>
...

as using setContext NavUl will push the classes to NavLis

[shinokada]

Published in v0.30.6.
Thank you for your PR.

[shinokada]

And also you can add a custom class to an individual li, if you want:

...
  <NavUl activeClass="text-red" nonActiveClass="text-blue" {hidden}>
    <NavLi href="/" active={true}>Home</NavLi>
    <NavLi href="/about" activeClass="text-blue">About</NavLi>
    <NavLi href="/services">Services</NavLi>
...
  </NavUl>
...