Here's the contents of the component where the sidebar is being used. In the earlier version I mentioned, what will happen when opening the sidebar is the other content on the page will shrink. After updating beyond 20.3.0.XX the content gets pushed off the side of the page instead.
@inherits LayoutComponentBase
@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons
@inject IJSRuntime JS
@inject NavigationManager NavigationManager
<SfSidebar EnablePersistence="true" Width="12rem" Target=".page" DockSize="2.6rem" EnableDock="true" Type="@SidebarType.Push" @bind-IsOpen="@SidebarToggle">
<ChildContent>
<div class="dock">
<ul>
<li class="sidebar-item" id="toggle" @onclick="Toggle">
<span style="color:var(--left-icon);font-size:2rem" class=@PrefixIcon></span>
</li>
@if (MenuData != null)
{
@foreach (var item in MenuData)
{
<li class="sidebar-item">
@if (!SidebarToggle)
{
<SfButton CssClass="e-btn e-round e-flat" IconCss="@item.Icon" IsPrimary="true" @onclick="@(e => NavigateTo(item.Target))"></SfButton>
}
else
{
<SfButton CssClass="e-custom e-flat" IconCss="@item.Icon" IsPrimary="true" @onclick="@(e => NavigateTo(item.Target))">@item.Name</SfButton>
}
</li>
}
}
</ul>
</div>
</ChildContent>
</SfSidebar>
@code {
// MenuItemDetails is a simple class with string members
[Parameter]
public List<MenuItemDetails>? MenuData { get; set; }
private void NavigateTo(string target)
{
NavigationManager.NavigateTo(target);
}
private bool SidebarToggle = false;
string PrefixIcon = "e-icons e-menu";
string ListItemCss = "d-none e-list-item-header";
/// <summary>
/// expander
/// </summary>
/// <param name="args"></param>
private void Toggle(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
{
if (SidebarToggle)
{
ListItemCss = "d-none e-list-item-header";
}
else
{
ListItemCss = "e-list-item-header";
}
SidebarToggle = !SidebarToggle;
}
/// <summary>
/// go to menu
/// </summary>
/// <param name="args"></param>
public void OnSelect(Syncfusion.Blazor.Lists.ClickEventArgs<MenuItemDetails> args)
{
if (!string.IsNullOrWhiteSpace(args.ItemData.Target))
{
NavigationManager.NavigateTo(args.ItemData.Target);
}
}
}
