Sidebar active attribute not working

[pbborisov18]

Describe the bug

On older versions it works so I guess something has broken (or a change that isn't reflected in the docs). My understanding is I provide a boolean inside the active tag and based on that it would show as active or not.

This is how I'm using it:

<Sidebar class="...">
                <SidebarWrapper class="...">
                    <SidebarGroup>
                            <SidebarItem ... active="{activeNum === 1}" on:click={() => activeNum = 1}/>
                            <SidebarItem ... active="{activeNum === 2}" on:click={() => activeNum = 2}/>
                            ...

If activeNum is 1 the first item would be active, if activeNum is 2 second item would active and so on. So this is working as expected on 0.34.9. I upgraded recently to 0.44.19 (and today to 0.44.20) and this doesn't work anymore for some reason.

Reproduction

You should able to reproduce it pretty easily. Here's the easiest example I could think of:

<Sidebar>
    <SidebarWrapper>
        <SidebarGroup>
            <SidebarItem ... active="{true}"/>
            <SidebarItem ... active="{false}"/>
...

I don't think even the given example in the docs works (with correct url ofc) but I'm not 100% sure as I might be doing something wrong there.

Flowbite version and System Info

As mentioned above working as expected on 0.34.9 
Not working as expected on 0.44.19 and 0.44.20
(I haven't tried other versions for now to pinpoint where it has broken)

System:
    OS: Windows 10 10.0.19045
    CPU: (12) x64 AMD Ryzen 5 1600 Six-Core Processor
    Memory: 4.98 GB / 15.93 GB
  Binaries:
    Node: 18.15.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.5.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.3636.0), Chromium (111.0.1661.62)
  npmPackages:
    @sveltejs/kit: ^1.27.6 => 1.27.6
    flowbite-svelte: ^0.44.20 => 0.44.20 
    svelte: ^4.0.0 => 4.2.7
    vite: ^4.0.0 => 4.5.1

[shinokada]

Please use activeUrl as stated in the doc: https://flowbite-svelte.com/docs/components/sidebar#Adding_links_and_active_class

[pbborisov18]

See the first example in the docs using the active attribute.

... <SidebarItem label="Sidebar" href="/docs/components/sidebar" active={activeUrl === '/docs/components/sidebar'}> ...

Also I can't use activeUrl as I need to use it on 1 page (in a modal). Why was the active attribute removed? Are there plans on adding it back?

[ghost]

@pbborisov18 I found a way that works for me at least:

create the activeUrl. I think you actually have to name it activeUrl because when I named it href it didnt work. let activeUrl = '/settings/profile';

create your Sidebar with the activeUrl variable and give the SidebarItems some logic sounding hrefs. Also give the event with your on:click function (or whatever triggers you use) <Sidebar {activeUrl}><SidebarWrapper><SidebarGroup><SidebarItem href="/settings/profile" id="profile" label="Public Profile" on:click={(event) => changeTab(0, event)}>...

In the triggered function set the activeUrl and preventDefault for the event because it will route you to the page otherwise function changeTab(tabIndex: number, event: MouseEvent) { event.preventDefault(); activeUrl = "/yourExample"; ...

Since I use replaceState (see Shallow Routing) from the new Sveltekit2.0 Update to change the url and not actually load the page I can use my activeUrl then to change url in the browser.

So I think the important things are that the activeUrl is actually called activeUrl and the SidebarItems have their href's set according to your activeUrl changes. You can just prevent the default routing event in your event method (The SidebarItems actually represent tags). There you go.

I think the confusing part is that in the documentation it actually uses active=... even tho it doesnt do anything. So I tried it out myself and got stuck on the idea that active= could do anything. But you actually HAVE to use the activeUrl even tho you prevent the routing.

I'm interested in this as well. I assumed that you can set the active state of the item manually. Example in the docs is showing the use of active as well. But it seems it all is controlled by activeUrl.

This is very limiting, as not all app sidebars are directly linked to routing, and using pseudo paths to 'trick' the component is not very intuitive and feels hacky.

Don't you agree @shinokada? What is the reason for this limitation? Would it make sense to create a PR to extend this component?

[pasevin]

I just noticed that SidebarDropdownItem behaves differently to SidebarItem. In SidebarDropdownItem you can actually manually set the active prop.

It creates even more confusion to me. I would expect both components to have consistency.

[sydney-luce]

The active property appears to have been there before on the SidebarItem but someone commented it out claiming to simplify it, however this doesn't work with sub routes or dynamic sub routes when you might want to mark sidebar item active with out defining child items in the side bar

https://github.com/themesberg/flowbite-svelte/blame/233f9b2caf6fda5172e1c6e03306ee9a6c722253/src/lib/sidebar/SidebarItem.svelte#L11