Hide side bar on menu item click

iAmBipinPaul · July 22, 2019, 2:43am

<RadzenSidebar @ref="sidebar0">
    <ChildContent>
        <RadzenPanelMenu style="height: 100%;padding-top:20px">
            <ChildContent>
                <RadzenPanelmenuItem Text="First Look" Path="/" Icon="home"></RadzenPanelmenuItem>
                <RadzenPanelmenuItem Text="DataGrid" Path="datagrid" Icon="grid_on"></RadzenPanelmenuItem>                 
            </ChildContent>
        </RadzenPanelMenu>
    </ChildContent>
</RadzenSidebar>

efthymios.ks · June 15, 2021, 12:54pm

The only reason I am answering this is for future people to see it.
I had the exact issue and found the following workaround.

First you should switch RadzenMenuItem to RadzenPanelMenuItem.
Use RadzenPanelMenuItem.ExpandedChanged EventCallback.
Apparently this is also fired on each item click.

Not a official solution, but it's a nice workaround like I said.

   <RadzenSidebar @bind-Expanded="_isSideDrawerOpen">
      <ChildContent> 
         <RadzenPanelMenu>
               @foreach (var menuItem in _menuItems)
               {
                  <RadzenPanelMenuItem Text="@menuItem.Text"
                     Path="@menuItem.Path"
                     Icon="@menuItem.Icon"
                     ExpandedChanged="_ => _isSideDrawerOpen=false" />
               }
         </RadzenPanelMenu> 
      </ChildContent>
   </RadzenSidebar>

   @code { 
      private bool _isSideDrawerOpen;
   }