How do I get the sidebar to collapse like seen on hear:
https://blazor.radzen.com/get-started
Thanks
MainLayout.razor:
@inherits LayoutComponentBase
@using Blazored.Toast.Configuration
<PageTitle>MCC</PageTitle>
<div class="page">
<RadzenContextMenu />
<RadzenTooltip />
<RadzenNotification />
<RadzenDialog />
<div class="sidebar">
<NavMenu />
</div>
<main>
<div class="container-fluid top-row px-4 auth">
<PageHeader/>
<LoginDisplay />
<LanguageSwithcer/>
</div>
<BlazoredToasts Position="ToastPosition.BottomCenter"
Timeout="10"
IconType="IconType.FontAwesome"
ErrorIcon="fas fa-times-circle"
InfoIcon="fas fa-info"
SuccessIcon="fas fa-check"
WarningIcon="fas fa-exclamation-triangle"
MaxToastCount="3" />
<article class="content px-4">
@Body
</article>
</main>
</div>
NavManu.razor
<div class="top-row ps-3 navbar" style="background-color: #e2000f">
<div class="container-fluid">
<div class="df-logo-container">
<a href="#" class="df-logo" aria-label="Home page">
</a>
</div>
<button title="Navigation menu" type="button" class="navbar-toggler" @onclick="ToggleNavMenu">
<i class="fa-solid fa-bars"></i>
</button>
</div>
</div>
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
<nav class="flex-column">
<RadzenPanelMenu>
<RadzenPanelMenuItem Text="Home" Path="/" Icon="home"></RadzenPanelMenuItem>
<RadzenPanelMenuItem Text="SFC" Icon="subject">
<RadzenPanelMenuItem Text="Look Up SFC" Path="LookUpSfc"></RadzenPanelMenuItem>
<RadzenPanelMenuItem Text="SFC Managment" Path="SFCManagment"></RadzenPanelMenuItem>
</RadzenPanelMenuItem>
<RadzenPanelMenuItem Text="Production Floor" Icon="leaderboard">
<RadzenPanelMenuItem Text="Floor View" Path="FloorView"></RadzenPanelMenuItem>
<RadzenPanelMenuItem Text="Graph Management" Path="GraphManagement"></RadzenPanelMenuItem>
<AuthorizeView Roles="test">
<RadzenPanelMenuItem Text="Capability" Path="Capability"></RadzenPanelMenuItem>
</AuthorizeView>
</RadzenPanelMenuItem>
<RadzenPanelMenuItem Text="Process" Icon="build">
<RadzenPanelMenuItem Text="My Station" Path="MyStation"></RadzenPanelMenuItem>
<RadzenPanelMenuItem Text="All Stations" Path="AllStations"></RadzenPanelMenuItem>
</RadzenPanelMenuItem>
<RadzenPanelMenuItem Text="Equipment" Icon="construction">
<RadzenPanelMenuItem Text="RoboCeption" Path="RoboCeption"></RadzenPanelMenuItem>
<RadzenPanelMenuItem Text="TorqueTool" Path="TorqueTool"></RadzenPanelMenuItem>
<RadzenPanelMenuItem Text="Pick2Light" Path="Pick2Light"></RadzenPanelMenuItem>
<RadzenPanelMenuItem Text="LabelPrint" Path="LabelPrint"></RadzenPanelMenuItem>
</RadzenPanelMenuItem>
<RadzenPanelMenuItem Text="External Systems" Icon="next_plan">
<RadzenPanelMenuItem Text="JobQueue" Path="JobQueue"></RadzenPanelMenuItem>
<RadzenPanelMenuItem Text="MES" Path="MES"></RadzenPanelMenuItem>
<RadzenPanelMenuItem Text="IIS" Path="IIS"></RadzenPanelMenuItem>
</RadzenPanelMenuItem>
<RadzenPanelMenuItem Text="Settings" Path="Settings" Icon="settings"></RadzenPanelMenuItem>
<RadzenPanelMenuItem Text="User Management" Path="UserManagement" Icon="manage_accounts"></RadzenPanelMenuItem>
<RadzenPanelMenuItem Text="Help" Icon="help">
<RadzenPanelMenuItem Text="Help" Path="Help"></RadzenPanelMenuItem>
<RadzenPanelMenuItem Text="Documentation" Path="Documentation"></RadzenPanelMenuItem>
</RadzenPanelMenuItem>
@* <RadzenPanelMenuItem Text="My User Profile" Path="showprofile" Icon="assignment_ind"></RadzenPanelMenuItem>*@
<RadzenPanelMenuItem Text="3D" Icon="view_in_ar">
<RadzenPanelMenuItem Text="example 01" Path="example01"></RadzenPanelMenuItem>
<RadzenPanelMenuItem Text="example 02" Path="example02"></RadzenPanelMenuItem>
<RadzenPanelMenuItem Text="example 03" Path="example03"></RadzenPanelMenuItem>
</RadzenPanelMenuItem>
</RadzenPanelMenu>
</nav>
</div>
@code {
private bool collapseNavMenu = true;
private bool expandSfc;
private bool expandSubNavProdFloor;
private bool expandProcess;
private bool expandEquipment;
private bool expandExternalSys;
private bool expandHelp;
private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
private void ToggleNavMenu()
{
collapseNavMenu = !collapseNavMenu;
}
}