<div class="bb-page">
 <Sidebar Href="/"
 IconName="IconName.BootstrapFill"
 Title="Blazor Bootstrap"
 BadgeText="v1.3.1"
 DataProvider="SidebarDataProvider" />
 <main>
 <div class="bb-top-row px-4 d-flex justify-content-end">
 <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
 </div>
 <article class="content px-4">
 <div class="py-2">
 <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="ToggleSidebarStyles">Toggle Sidebar styles</Button>
 </div>
 </article>
 </main>
 
</div>
@code {
 bool applyPurpleStyle = false;
 IEnumerable<NavItem>? navItems;
 private async Task<SidebarDataProviderResult> SidebarDataProvider(SidebarDataProviderRequest request)
 {
 if (navItems is null)
 navItems = GetNavItems();
 return await Task.FromResult(request.ApplyTo(navItems));
 }
 private IEnumerable<NavItem> GetNavItems()
 {
 navItems = new List<NavItem>
 {
 new NavItem { Id = "1", Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started"},
 new NavItem { Id = "2", IconName = IconName.LayoutSidebarInset, Text = "Content", IconColor = IconColor.Primary },
 new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId="2"},
 new NavItem { Id = "4", IconName = IconName.ExclamationTriangleFill, Text = "Components", IconColor = IconColor.Success },
 new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId="4"},
 new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId="4"},
 new NavItem { Id = "7", Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", ParentId="4"},
 new NavItem { Id = "8", IconName = IconName.WindowPlus, Text = "Forms", IconColor = IconColor.Danger },
 new NavItem { Id = "9", Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete", ParentId="8"},
 new NavItem { Id = "10", Href = "/currency-input", IconName = IconName.CurrencyDollar, Text = "Currency Input", ParentId="8"},
 new NavItem { Id = "11", Href = "/number-input", IconName = IconName.InputCursor, Text = "Number Input", ParentId="8"},
 new NavItem { Id = "12", Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch", ParentId="8"},
 };
 return navItems;
 }
 private void ToggleSidebarStyles() => applyPurpleStyle = !applyPurpleStyle;
}
@if (applyPurpleStyle)
{
 <style>
 :root {
 --bb-sidebar-width: 270px;
 --bb-sidebar-collapsed-width: 50px;
 --bb-sidebar-background-color: rgba(234, 234, 234, 1);
 --bb-sidebar-top-row-background-color: rgba(0,0,0,0.08);
 --bb-sidebar-top-row-border-color: rgb(194,192,192);
 --bb-sidebar-title-text-color: rgb(0,0,0);
 --bb-sidebar-brand-icon-color: #6f42c1;
 --bb-sidebar-brand-image-width: 24px;
 --bb-sidebar-brand-image-height: 24px;
 --bb-sidebar-title-badge-text-color: rgb(255,255,255);
 --bb-sidebar-title-badge-background-color: rgba(25,135,84,var(--bs-bg-opacity,1));
 --bb-sidebar-navbar-toggler-icon-color: rgb(0,0,0);
 --bb-sidebar-navbar-toggler-background-color: rgba(0,0,0,0.08);
 --bb-sidebar-content-border-color: rgb(194,192,192);
 --bb-sidebar-nav-item-text-color: rgba(0,0,0,0.9);
 --bb-sidebar-nav-item-text-active-color-rgb: 0,0,0;
 --bb-sidebar-nav-item-text-hover-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.9);
 --bb-sidebar-nav-item-text-active-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.9);
 --bb-sidebar-nav-item-background-hover-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.08);
 --bb-sidebar-nav-item-group-background-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.08);
 }
</style>
}