BarDropdown is not working in Bulma

[stsrki]

For dropdown menu the flag is-active must be set on BarItem instead of on BarDropdownMenu.

We have two options:

1. Create internal Visible property on BarItem. It would be set from BarDropdown.

2. Merge both components into one. So we have new component BarDropdownItem.

Current:

<BarItem>
    <BarDropdown>
        <BarDropdownToggle>More</BarDropdownToggle>
        <BarDropdownMenu>
            ...
        </BarDropdownMenu>
    </BarDropdown>
</BarItem>

New:

<BarDropdownItem>
    <BarDropdownToggle>More</BarDropdownToggle>
    <BarDropdownMenu>
        <BarDropdownItem To="https://blazorise.com/docs/quick-start/">
            Quick-Start Guide
        </BarDropdownItem>
        <BarDropdownItem To="https://blazorise.com/docs/usage/">
            Usage
        </BarDropdownItem>
    </BarDropdownMenu>
</BarDropdownItem>

@MitchellNZ

[MitchellNZ]

@stsrki nice catch!

I just took a look into this, and as far as I can tell, all that is missing is a .show class in the Bulma CSS.
In Blazorise.Bulma project styles _utilities.scss, I just added the code below, and it worked!

.show {
    display: block !important;
}

Additionally, I tried to convert BarItem and BarDropdown into one when I was doing the vertical Bar changes, but it was giving me problems with styling and other issues across the providers.. (also, the name BarDropdownItem is taken by menu items in the bar 😅)

[stsrki]

Your solution is the easiest. Better not introduce breaking changes :)

[MitchellNZ]

@stsrki an even easier solution!

In the BulmaClassProvider we should change:
Show() => "show";
to
Show() => "is-block";

This is a default Bulma display class :)

[stsrki]

It's a hack, but it works :)

[MitchellNZ]

Would you like me to make a dev091 patch or include as part of my dev092 bar changes?

[stsrki]

dev092

[MitchellNZ]

Fixed as part of #1287