Combined BarDropdown and BarLink

[njannink]

Our UI designer has come up with the following idea:

This is like a combined bar dropdown and link. When you click the little arrow the idea is that the menu expands and when you click the label or icon you should be taken to the root help page. The contents of the dropdown are sub pages.

Would something like this be possible with the current Blazorise sidebar?

[stsrki]

In theory, should be possible. At the moment the toggle icon is done with CSS.

To make it as you suggested we would have to split it into a separate element so that it can be clickable. Also, it will need to be opt-in with a parameter flag, possibly an enum.

I will make it part of v1 and investigate further.

[njannink]

I found something that seems to work fine

<BarLink To="/help" Clicked="@(() => Toggle(true))">
    <BarIcon IconName="IconNames.Help" /> Help
    <div class="ml-auto" @onclick:stopPropagation @onclick:preventDefault>
        <IconButton IconName="@(m_visible ? IconNames.ExpandLess : IconNames.ExpandMore)" 
                    Clicked="@(() => Toggle(!_visible))" />
    </div>
</BarLink>

<BarDropdown Visible="@_visible">
    <BarDropdownMenu>...</BarDropdownMenu>
</BarDropdown>

@code {
    private bool _visible;

    private void Toggle(bool visible)
    {
        _visible = visible;
    }
}

[njannink]

@stsrki input and suggestions are welcome

[stsrki]

Seems like a good approach. We'll probably do something similar. It needs to work for all providers.

[nove1398]

This is exactly what I was going to post about, this could be great for implementation

[stsrki]

Moving to Backlog.

[oaldrian]

As I also frequently use this "feature"...

I do it as follows:

<BarDropdown>
<BarDropdownToggle>
<a style="color: black; text-decoration: none" href="/linkToMenuEntry">MenuEntry</a>
</BarDropdownToggle>
<BarDropdownMenu>
    <BarDropdownItem To="linkToSubMenuEntry">
    SubMenuEntry
    </BarDropdownItem>
</BarDropdownMenu>
</BarDropdown>

ofc color has to be the correct color for the used theme colors