If IsOpen is set to false the docked sidebar is in an rendered in an open state. Type is set to push. This is a change in behaviour from 191.1.0.59 to 64, previously the sidebar would honour the setting of IsOpen.
@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons
<div class="col-lg-12 col-sm-12 col-md-12">
<div id="wrapper">
<SfSidebar Width="220px" DockSize="72px" EnableDock="true" [email protected] Position="@Position" @ref="Sidebar" HtmlAttributes="@HtmlAttribute" @bind-IsOpen="SidebarToggle"> <ChildContent>
<div class="dock">
<ul>
<li class="sidebar-item" id="toggle" @onclick="@Toggle">
<span class="e-icons expand"></span>
<span class="e-text" title="menu">Menu</span>
</li>
<li class="sidebar-item">
<span class="e-icons home"></span>
<span class="e-text" title="home">Home</span>
</li>
<li class="sidebar-item">
<span class="e-icons profile"></span>
<span class="e-text" title="profile">Profile</span>
</li>
<li class="sidebar-item">
<span class="e-icons info"></span>
<span class="e-text" title="info">Info</span>
</li>
<li class="sidebar-item">
<span class="e-icons settings"></span>
<span class="e-text" title="settings">Settings</span>
</li>
</ul>
</div>
</ChildContent>
</SfSidebar>
<!-- end of sidebar element -->
<!-- main content declaration -->
<div id="main-content container-fluid col-md-12">
<div class="title">Main content @SidebarToggle</div>
<div class="sub-title">
<p>Click the radio button to switch the Sidebar position</p>
<div class="column">
<!-- RadioButton element declaration -->
<SfRadioButton @bind-Checked="@Leftbtn" Value="Left" Label="Left" Name="state" ValueChange="PositionChange" TChecked="string"></SfRadioButton>
</div>
<div class="column">
<!-- RadioButton element declaration -->
<SfRadioButton @bind-Checked="@Leftbtn" Value="Right" Label="Right" Name="state" ValueChange="PositionChange" TChecked="string"></SfRadioButton>
</div>
</div>
</div>
</div>
<title>Essential JS 2 (Preview) for ASP.Net Core Sidebar-> Dock</title>
</div>
@code {
SfSidebar Sidebar;
public string Leftbtn = "Left";
private SidebarPosition Position { get; set; }
public bool SidebarToggle { get; set; } = true;
public void Toggle()
{
SidebarToggle = !SidebarToggle;
}
public void PositionChange(Syncfusion.Blazor.Buttons.ChangeArgs<string> args)
{
if (args.Value == "Left")
{
this.Position = SidebarPosition.Left;
}
else
{
this.Position = SidebarPosition.Right;
}
}
Dictionary<string, object> HtmlAttribute = new Dictionary<string, object>()
{
{"class", "dockSidebar" }
};
}