Sidebar toggle

BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar/SidebarDocumentation.razor

@@ -6,7 +6,7 @@
 
 <h1>Blazor Sidebar</h1>
 <div class="lead mb-3">
-    Use the Blazor Bootstrap <code>Sidebar</code> component to show consistent cross-browser, responsive and cross-device navigation links, additional information, or other content.
+  Use the Blazor Bootstrap <code>Sidebar</code> component to show consistent cross-browser, responsive and cross-device navigation links, additional information, or other content.
 </div>
 
 <CarbonAds />
@@ -28,7 +28,7 @@
 <Demo Type="typeof(Sidebar_Demo_04_Full_layout_with_sidebar)" Tabs="true" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Toggle sidebar to show icons only" PageUrl="@pageUrl" HashTagName="toggle-sidebar-to-show-icons-only" />
-<div class="mb-3">Call <code>ToggleSidebar()</code> method to toggle the Sidebar to show the icons only.</div>
+<div class="mb-3">Call <code>ToggleSidebar()</code> method to toggle the Sidebar to show the icons only, or set <code>IsCollapsed</code> directly.</div>
 <Demo Type="typeof(Sidebar_Demo_05_Toggle_Sidebar_to_Show_Icons_Only)" Tabs="true" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Show badge" PageUrl="@pageUrl" HashTagName="show-badge" />
@@ -56,8 +56,8 @@
 <Demo Type="typeof(Sidebar_Demo_11_Width)" Tabs="true" />
 
 @code {
-    private string pageUrl = "/sidebar";
-    private string title = "Blazor Sidebar Component";
-    private string description = "Use the Blazor Bootstrap Sidebar component to show consistent cross-browser, responsive and cross-device navigation links, additional information, or other content.";
-    private string imageUrl = "https://i.imgur.com/d91Q9Zt.png";
+  private string pageUrl = "/sidebar";
+  private string title = "Blazor Sidebar Component";
+  private string description = "Use the Blazor Bootstrap Sidebar component to show consistent cross-browser, responsive and cross-device navigation links, additional information, or other content.";
+  private string imageUrl = "https://i.imgur.com/d91Q9Zt.png";
 }

BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar/Sidebar_Demo_05_Toggle_Sidebar_to_Show_Icons_Only.razor

@@ -1,39 +1,42 @@
 <div class="bb-page">
 
-    <Sidebar @ref="sidebar"
-             Href="/"
-             IconName="IconName.BootstrapFill"
-             Title="Blazor Bootstrap"
-             DataProvider="SidebarDataProvider" />
-
-    <main>
-        <div class="bb-top-row px-4 d-flex justify-content-between">
-            <Icon Name="IconName.List" role="button" @onclick="ToggleSidebar" />
-            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
-        </div>
-
-        <article class="content px-4">
-            <div class="py-2">Page content goes here</div>
-        </article>
-    </main>
+  <Sidebar @ref="sidebar"
+           Href="/"
+           IconName="IconName.BootstrapFill"
+           Title="Blazor Bootstrap"
+           DataProvider="SidebarDataProvider" />
+
+  <main>
+    <div class="bb-top-row px-4 d-flex justify-content-between">
+      <Icon Name="IconName.List" role="button" @onclick="ToggleSidebar" />
+      <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
+    </div>
+
+    <article class="content px-4">
+      <div class="py-2">The sidebar is now @(( sidebar?.IsCollapsed ?? false ) ? "collapsed" : "expanded").</div>
+      <Button Type="ButtonType.Button" Size="ButtonSize.Small" Color="ButtonColor.Primary" role="button" @onclick="ToggleSidebar">Toggle</Button>
+      <Button Type="ButtonType.Button" Size="ButtonSize.Small" Color="ButtonColor.Primary" role="button" @onclick="() => SetSidebar(isCollapsed: true)">Collapse</Button>
+      <Button Type="ButtonType.Button" Size="ButtonSize.Small" Color="ButtonColor.Primary" role="button" @onclick="() => SetSidebar(isCollapsed: false)">Expand</Button>
+    </article>
+  </main>
 
 </div>
 
 @code {
-    Sidebar sidebar = default!;
-    IEnumerable<NavItem>? navItems;
+  Sidebar sidebar { get; set; } = default!;
+  IEnumerable<NavItem>? navItems;
 
-    private async Task<SidebarDataProviderResult> SidebarDataProvider(SidebarDataProviderRequest request)
-    {
-        if (navItems is null)
-            navItems = GetNavItems();
+  private async Task<SidebarDataProviderResult> SidebarDataProvider( SidebarDataProviderRequest request )
+  {
+    if( navItems is null )
+      navItems = GetNavItems();
 
-        return await Task.FromResult(request.ApplyTo(navItems));
-    }
+    return await Task.FromResult( request.ApplyTo( navItems ) );
+  }
 
-    private IEnumerable<NavItem> GetNavItems()
-    {
-        navItems = new List<NavItem>
+  private IEnumerable<NavItem> GetNavItems()
+  {
+    navItems = new List<NavItem>
         {
             new NavItem { Id = "1", Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started"},
 
@@ -52,8 +55,10 @@
             new NavItem { Id = "12", Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch", ParentId="8"},
         };
 
-        return navItems;
-    }
+    return navItems;
+  }
+
+  private void ToggleSidebar() => sidebar.ToggleSidebar();
 
-    private void ToggleSidebar() => sidebar.ToggleSidebar();
+  private void SetSidebar( bool isCollapsed ) => sidebar.IsCollapsed = isCollapsed;
 }

BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar2/Sidebar2Documentation.razor

@@ -6,7 +6,7 @@
 
 <h1>Blazor Sidebar2</h1>
 <div class="lead mb-3">
-    Use the Blazor Bootstrap <code>Sidebar2</code> component to display consistent, cross-browser, and responsive navigation links that support more than two nested levels.
+  Use the Blazor Bootstrap <code>Sidebar2</code> component to display consistent, cross-browser, and responsive navigation links that support more than two nested levels.
 </div>
 
 <CarbonAds />
@@ -27,6 +27,10 @@
 <div class="mb-3">Replace your <b>MainLayout.razor</b> page code with the below example to have a complete layout with a sidebar.</div>
 <Demo Type="typeof(Sidebar2_Demo_04_Full_layout_with_sidebar)" Tabs="true" />
 
+<SectionHeading Size="HeadingSize.H2" Text="Toggle sidebar to show icons only" PageUrl="@pageUrl" HashTagName="toggle-sidebar-to-show-icons-only" />
+<div class="mb-3">Call <code>ToggleSidebar()</code> method to toggle the Sidebar to show the icons only, or set <code>IsCollapsed</code> directly.</div>
+<Demo Type="typeof(Sidebar2_Demo_05_Toggle_Sidebar_to_Show_Icons_Only)" Tabs="true" />
+
 <SectionHeading Size="HeadingSize.H2" Text="Custom brand icon" PageUrl="@pageUrl" HashTagName="custom-brand-icon" />
 <div class="mb-3">Use the <code>CustomIconName</code> parameter to set the custom logo icon using font awesome or other icons.</div>
 <Demo Type="typeof(Sidebar2_Demo_07_Custom_Brand_Icon)" Tabs="true" />
@@ -40,8 +44,8 @@
 <Demo Type="typeof(Sidebar2_Demo_09_Width)" Tabs="true" />
 
 @code {
-    private string pageUrl = "sidebar2";
-    private string title = "Blazor Sidebar2 Component";
-    private string description = "Use the Blazor Bootstrap Sidebar2 component to display consistent, cross-browser, and responsive navigation links that support more than two nested levels.";
-    private string imageUrl = "https://i.imgur.com/U0l6wXo.png";
+  private string pageUrl = "sidebar2";
+  private string title = "Blazor Sidebar2 Component";
+  private string description = "Use the Blazor Bootstrap Sidebar2 component to display consistent, cross-browser, and responsive navigation links that support more than two nested levels.";
+  private string imageUrl = "https://i.imgur.com/U0l6wXo.png";
 }

BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar2/Sidebar2_Demo_05_Toggle_Sidebar_to_Show_Icons_Only.razor

@@ -0,0 +1,64 @@
+<div class="bb-page">
+
+  <Sidebar2 @ref="sidebar"
+            Href="/"
+            IconName="IconName.BootstrapFill"
+            Title="Blazor Bootstrap"
+            DataProvider="Sidebar2DataProvider" />
+
+  <main>
+    <div class="bb-top-row px-4 d-flex justify-content-between">
+      <Icon Name="IconName.List" role="button" @onclick="ToggleSidebar" />
+      <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
+    </div>
+
+    <article class="content px-4">
+      <div class="py-2">The sidebar is now @(( sidebar?.IsCollapsed ?? false ) ? "collapsed" : "expanded").</div>
+      <Button Type="ButtonType.Button" Size="ButtonSize.Small" Color="ButtonColor.Primary" role="button" @onclick="ToggleSidebar">Toggle</Button>
+      <Button Type="ButtonType.Button" Size="ButtonSize.Small" Color="ButtonColor.Primary" role="button" @onclick="() => SetSidebar(isCollapsed: true)">Collapse</Button>
+      <Button Type="ButtonType.Button" Size="ButtonSize.Small" Color="ButtonColor.Primary" role="button" @onclick="() => SetSidebar(isCollapsed: false)">Expand</Button>
+    </article>
+  </main>
+
+</div>
+
+@code {
+  Sidebar2 sidebar { get; set; } = default!;
+  IEnumerable<NavItem>? navItems;
+
+  private async Task<Sidebar2DataProviderResult> Sidebar2DataProvider( Sidebar2DataProviderRequest 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 ToggleSidebar() => sidebar.ToggleSidebar();
+
+  private void SetSidebar( bool isCollapsed ) => sidebar.IsCollapsed = isCollapsed;
+}

blazorbootstrap/Components/Sidebar/Sidebar.razor.cs

@@ -84,8 +84,16 @@ public async Task RefreshDataAsync(bool firstRender = false)
     /// </summary>
     public void ToggleSidebar()
     {
-        collapseSidebar = !collapseSidebar;
-        StateHasChanged();
+        ToggleTo(!collapseSidebar);
+    }
+
+    private void ToggleTo(bool isCollapsed)
+    {
+        if (collapseSidebar != isCollapsed)
+        {
+            collapseSidebar = isCollapsed;
+            StateHasChanged();
+        }
     }
 
     internal void HideNavMenuOnMobile()
@@ -122,7 +130,7 @@ private string GetNavMenuCssClass()
             ("expanded", !collapseSidebar));
 
     protected override string? StyleNames =>
-        BuildStyleNames(Style, 
+        BuildStyleNames(Style,
             ($"--bb-sidebar-width: {Width.ToString(CultureInfo.InvariantCulture)}{WidthUnit.ToCssString()};", Width > 0));
 
     /// <summary>
@@ -180,6 +188,15 @@ private string GetNavMenuCssClass()
     [Parameter]
     public string? ImageSrc { get; set; }
 
+    /// <summary>
+    /// Gets or sets the current collapsed state of the sidebar.
+    /// </summary>
+    public bool IsCollapsed
+    {
+        get => collapseSidebar;
+        set => ToggleTo(value);
+    }
+
     private string? navMenuCssClass => GetNavMenuCssClass();
 
     /// <summary>