[HxSidebar] [HxSidebarDivider] - Is it possible to have parent expanded on start and anyway to have a separator

[Miatrix]

I just started moving my existing bootstrap based sidebar to your components, however I cannot find how to have a parent expanded initially and I don't see a way to add a separator like you can with the bootstrap code.

What I'm trying to do is to have the sidebar menu structure look a bit cleaner by grouping things but have it open initially so the user isn't confused.

crude example: (if MultipleItemsExpansion is true then more than one could be open initially)

Buttons & Indicators >
Data & Grid v
    HxGrid
    HxContextMenu
    ----------------------
    HxPager
    Hxrepeater
    --------------
    HxTreeView
Layout & Typography >
etc....
``` `

[crdo]

If what you refer to is sidebar in Boostrap docs, it feels like a completely different component. It is just a parent/child structure with icons, not collapsing at all.

[hakenr]

Bootstrap v5 currently doesn't include a specific 'sidebar' component. Your suggestion to introduce something like HxSidebarDivider for adding horizontal separators to the sidebar is quite interesting and could be a valuable addition to the framework. However, it's worth noting that this feature is not currently on our roadmap. Nonetheless, we appreciate your input and will add this idea to our backlog for future consideration.

[hakenr]

(Regarding the expansion, there is just the ExpandOnMatch parameter which currently allows you to expand the sidebar on first render when the URL matches.)

[Miatrix]

Hopefully this helps you quickly create a component for the HXSidebarDivider.

I was able to create it for my layout by using:

<div class="hx-sidebar-item-divider"></div>

.hx-sidebar-item-divider {
    margin: var(--hx-sidebar-subitem-margin);
    border-top-color: var(--bs-border-color);
    border-top-style: solid;
    border-top-width: 1.11111px;
    display: flex;
    padding: 0 0 5px 5px;
}

Example:

<HxSidebarItem Text="Info" Href="/" Match="NavLinkMatch.Prefix" ExpandOnMatch="true" Icon="FontAwesomeIcons.Info">
    <HxSidebarItem Icon="FontAwesomeIcons.News" Href="news" Text="News" />
    <HxSidebarItem Icon="FontAwesomeIcons.Forums" Href="forums" Text="Forums" />
    <HxSidebarItem Icon="FontAwesomeIcons.Guides" Href="guides" Text="Guides" />
    <HxSidebarItem Icon="FontAwesomeIcons.Bugs" Href="bugs" Text="Bugs" />
    <div class="hx-sidebar-item-divider"></div>
    <HxSidebarItem Icon="FontAwesomeIcons.ContactUs" Href="contact-us" Text="Contact Us"/>
</HxSidebarItem>

I was expecting the top Sidebar to expand when at the root of the website, however it doesn't work. Is there a way to make it work currently? I even tried Href="" with no luck