diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar/SidebarDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar/SidebarDocumentation.razor index 3a2a9388e..67c3f0ce3 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar/SidebarDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar/SidebarDocumentation.razor @@ -6,7 +6,7 @@

Blazor Sidebar

- Use the Blazor Bootstrap Sidebar component to show consistent cross-browser, responsive and cross-device navigation links, additional information, or other content. + Use the Blazor Bootstrap Sidebar component to show consistent cross-browser, responsive and cross-device navigation links, additional information, or other content.
@@ -28,7 +28,7 @@ -
Call ToggleSidebar() method to toggle the Sidebar to show the icons only.
+
Call ToggleSidebar() method to toggle the Sidebar to show the icons only, or set IsCollapsed directly.
@@ -56,8 +56,8 @@ @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"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar/Sidebar_Demo_05_Toggle_Sidebar_to_Show_Icons_Only.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar/Sidebar_Demo_05_Toggle_Sidebar_to_Show_Icons_Only.razor index 5c333d2fa..64f781d83 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar/Sidebar_Demo_05_Toggle_Sidebar_to_Show_Icons_Only.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar/Sidebar_Demo_05_Toggle_Sidebar_to_Show_Icons_Only.razor @@ -1,39 +1,42 @@ 
- - -
-
- - About -
- -
-
Page content goes here
-
-
+ + +
+
+ + About +
+ +
+
The sidebar is now @(( sidebar?.IsCollapsed ?? false ) ? "collapsed" : "expanded").
+ + + +
+
@code { - Sidebar sidebar = default!; - IEnumerable? navItems; + Sidebar sidebar { get; set; } = default!; + IEnumerable? navItems; - private async Task SidebarDataProvider(SidebarDataProviderRequest request) - { - if (navItems is null) - navItems = GetNavItems(); + private async Task 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 GetNavItems() - { - navItems = new List + private IEnumerable GetNavItems() + { + navItems = new List { 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; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar2/Sidebar2Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar2/Sidebar2Documentation.razor index 7146edeef..51ed07ba9 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar2/Sidebar2Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar2/Sidebar2Documentation.razor @@ -6,7 +6,7 @@

Blazor Sidebar2

- Use the Blazor Bootstrap Sidebar2 component to display consistent, cross-browser, and responsive navigation links that support more than two nested levels. + Use the Blazor Bootstrap Sidebar2 component to display consistent, cross-browser, and responsive navigation links that support more than two nested levels.
@@ -27,6 +27,10 @@
Replace your MainLayout.razor page code with the below example to have a complete layout with a sidebar.
+ +
Call ToggleSidebar() method to toggle the Sidebar to show the icons only, or set IsCollapsed directly.
+ +
Use the CustomIconName parameter to set the custom logo icon using font awesome or other icons.
@@ -40,8 +44,8 @@ @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"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar2/Sidebar2_Demo_05_Toggle_Sidebar_to_Show_Icons_Only.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar2/Sidebar2_Demo_05_Toggle_Sidebar_to_Show_Icons_Only.razor new file mode 100644 index 000000000..530c62053 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar2/Sidebar2_Demo_05_Toggle_Sidebar_to_Show_Icons_Only.razor @@ -0,0 +1,64 @@ +
+ + + +
+
+ + About +
+ +
+
The sidebar is now @(( sidebar?.IsCollapsed ?? false ) ? "collapsed" : "expanded").
+ + + +
+
+ +
+ +@code { + Sidebar2 sidebar { get; set; } = default!; + IEnumerable? navItems; + + private async Task Sidebar2DataProvider( Sidebar2DataProviderRequest request ) + { + if( navItems is null ) + navItems = GetNavItems(); + + return await Task.FromResult( request.ApplyTo( navItems ) ); + } + + private IEnumerable GetNavItems() + { + navItems = new List + { + 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; +} diff --git a/blazorbootstrap/Components/Sidebar/Sidebar.razor.cs b/blazorbootstrap/Components/Sidebar/Sidebar.razor.cs index 1c6c12cec..46bac0abe 100644 --- a/blazorbootstrap/Components/Sidebar/Sidebar.razor.cs +++ b/blazorbootstrap/Components/Sidebar/Sidebar.razor.cs @@ -84,8 +84,16 @@ public async Task RefreshDataAsync(bool firstRender = false) /// 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)); /// @@ -180,6 +188,15 @@ private string GetNavMenuCssClass() [Parameter] public string? ImageSrc { get; set; } + /// + /// Gets or sets the current collapsed state of the sidebar. + /// + public bool IsCollapsed + { + get => collapseSidebar; + set => ToggleTo(value); + } + private string? navMenuCssClass => GetNavMenuCssClass(); /// diff --git a/blazorbootstrap/Components/Sidebar2/Sidebar2.razor.cs b/blazorbootstrap/Components/Sidebar2/Sidebar2.razor.cs index d5e21b6a7..0017250e8 100644 --- a/blazorbootstrap/Components/Sidebar2/Sidebar2.razor.cs +++ b/blazorbootstrap/Components/Sidebar2/Sidebar2.razor.cs @@ -2,209 +2,226 @@ public partial class Sidebar2 : BlazorBootstrapComponentBase { - #region Fields and Constants + #region Fields and Constants - private bool collapseNavMenu = true; + private bool collapseNavMenu = true; - private bool collapseSidebar = false; + private bool collapseSidebar = false; - private bool isMobile = false; + private bool isMobile = false; - private IEnumerable? items = null; + private IEnumerable? items = null; - private DotNetObjectReference objRef = default!; + private DotNetObjectReference objRef = default!; - private bool requestInProgress = false; + private bool requestInProgress = false; - #endregion + #endregion - #region Methods + #region Methods - protected override async Task OnAfterRenderAsync(bool firstRender) + protected override async Task OnAfterRenderAsync( bool firstRender ) + { + if( firstRender ) { - if (firstRender) - { - await JSRuntime.InvokeVoidAsync("window.blazorBootstrap.sidebar.initialize", Id, objRef); + await JSRuntime.InvokeVoidAsync( "window.blazorBootstrap.sidebar.initialize", Id, objRef ); - var width = await JSRuntime.InvokeAsync("window.blazorBootstrap.sidebar.windowSize"); + var width = await JSRuntime.InvokeAsync( "window.blazorBootstrap.sidebar.windowSize" ); - bsWindowResize(width); + bsWindowResize( width ); - await RefreshDataAsync(firstRender); - } - - await base.OnAfterRenderAsync(firstRender); - } - - protected override async Task OnInitializedAsync() - { - objRef ??= DotNetObjectReference.Create(this); - - AdditionalAttributes ??= new Dictionary(); - - await base.OnInitializedAsync(); + await RefreshDataAsync( firstRender ); } - [JSInvokable] - public void bsWindowResize(int width) - { - if (width < 641) // mobile - isMobile = true; - else - isMobile = false; - } + await base.OnAfterRenderAsync( firstRender ); + } - /// - /// Refresh the sidebar data. - /// - /// Task - public async Task RefreshDataAsync(bool firstRender = false) - { - if (requestInProgress) - return; + protected override async Task OnInitializedAsync() + { + objRef ??= DotNetObjectReference.Create( this ); - requestInProgress = true; + AdditionalAttributes ??= new Dictionary(); - if (DataProvider != null) - { - var request = new Sidebar2DataProviderRequest(); - var result = await DataProvider.Invoke(request); + await base.OnInitializedAsync(); + } - items = result != null ? result.Data : new List(); - } + [JSInvokable] + public void bsWindowResize( int width ) + { + if( width < 641 ) // mobile + isMobile = true; + else + isMobile = false; + } - requestInProgress = false; + /// + /// Refresh the sidebar data. + /// + /// Task + public async Task RefreshDataAsync( bool firstRender = false ) + { + if( requestInProgress ) + return; - await InvokeAsync(StateHasChanged); - } + requestInProgress = true; - /// - /// Toggles sidebar. - /// - public void ToggleSidebar() + if( DataProvider != null ) { - collapseSidebar = !collapseSidebar; - StateHasChanged(); - } + var request = new Sidebar2DataProviderRequest(); + var result = await DataProvider.Invoke( request ); - internal void HideNavMenuOnMobile() - { - if (isMobile && !collapseNavMenu) - collapseNavMenu = true; + items = result != null ? result.Data : new List(); } - private string GetNavMenuCssClass() - { - var classList = new HashSet(); - - if (collapseNavMenu) - classList.Add("collapse"); + requestInProgress = false; - classList.Add("bb-sidebar2-content nav-scrollable bb-scrollbar"); + await InvokeAsync( StateHasChanged ); + } - if (collapseSidebar) - classList.Add("bb-scrollbar-hidden"); + /// + /// Toggles sidebar. + /// + public void ToggleSidebar() + { + ToggleTo( !collapseSidebar ); + } - return string.Join(" ", classList); + private void ToggleTo( bool isCollapsed ) + { + if( collapseSidebar != isCollapsed ) + { + collapseSidebar = isCollapsed; + StateHasChanged(); } - - private void ToggleNavMenu() => collapseNavMenu = !collapseNavMenu; - - #endregion - - #region Properties, Indexers - - protected override string? ClassNames => - BuildClassNames(Class, - ("bb-sidebar2", true), - ("collapsed", collapseSidebar), - ("expanded", !collapseSidebar)); - - protected override string? StyleNames => - BuildStyleNames(Style, - ($"--bb-sidebar2-width: {Width.ToString(CultureInfo.InvariantCulture)}{WidthUnit.ToCssString()};", Width > 0)); - - - /// - /// Gets or sets the badge text. - /// - /// - /// Default value is null. - /// - [Parameter] - public string? BadgeText { get; set; } - - /// - /// Gets or sets the custom icon name. - /// - /// - /// Default value is null. - /// - [Parameter] - public string? CustomIconName { get; set; } - - /// - /// Gets or sets the data provider. - /// - /// - /// Default value is null. - /// - [Parameter] - [EditorRequired] - public Sidebar2DataProviderDelegate? DataProvider { get; set; } = default!; - - /// - /// Gets or sets the Href. - /// - /// - /// Default value is . - /// - [Parameter] - public string? Href { get; set; } = string.Empty; - - /// - /// Gets or sets the IconName. - /// - /// - /// Default value is . - /// - [Parameter] - public IconName IconName { get; set; } - - /// - /// Gets or sets the sidebar logo. - /// - /// - /// Default value is null. - /// - [Parameter] - public string? ImageSrc { get; set; } - - private string? navMenuCssClass => GetNavMenuCssClass(); - - /// - /// Gets or sets the sidebar title. - /// - /// - /// Default value is null. - /// - [Parameter] - [EditorRequired] - public string? Title { get; set; } = default!; - - /// - /// Gets or sets the sidebar width. - /// - /// Default value is 270. - [Parameter] - public float Width { get; set; } = 270; - - /// - /// Gets or sets the sidebar width unit. - /// - /// Default value is . - [Parameter] - public Unit WidthUnit { get; set; } = Unit.Px; - - #endregion + } + + internal void HideNavMenuOnMobile() + { + if( isMobile && !collapseNavMenu ) + collapseNavMenu = true; + } + + private string GetNavMenuCssClass() + { + var classList = new HashSet(); + + if( collapseNavMenu ) + classList.Add( "collapse" ); + + classList.Add( "bb-sidebar2-content nav-scrollable bb-scrollbar" ); + + if( collapseSidebar ) + classList.Add( "bb-scrollbar-hidden" ); + + return string.Join( " ", classList ); + } + + private void ToggleNavMenu() => collapseNavMenu = !collapseNavMenu; + + #endregion + + #region Properties, Indexers + + protected override string? ClassNames => + BuildClassNames( Class, + ("bb-sidebar2", true), + ("collapsed", collapseSidebar), + ("expanded", !collapseSidebar) ); + + protected override string? StyleNames => + BuildStyleNames( Style, + ($"--bb-sidebar2-width: {Width.ToString( CultureInfo.InvariantCulture )}{WidthUnit.ToCssString()};", Width > 0) ); + + + /// + /// Gets or sets the badge text. + /// + /// + /// Default value is null. + /// + [Parameter] + public string? BadgeText { get; set; } + + /// + /// Gets or sets the custom icon name. + /// + /// + /// Default value is null. + /// + [Parameter] + public string? CustomIconName { get; set; } + + /// + /// Gets or sets the data provider. + /// + /// + /// Default value is null. + /// + [Parameter] + [EditorRequired] + public Sidebar2DataProviderDelegate? DataProvider { get; set; } = default!; + + /// + /// Gets or sets the Href. + /// + /// + /// Default value is . + /// + [Parameter] + public string? Href { get; set; } = string.Empty; + + /// + /// Gets or sets the IconName. + /// + /// + /// Default value is . + /// + [Parameter] + public IconName IconName { get; set; } + + /// + /// Gets or sets the sidebar logo. + /// + /// + /// Default value is null. + /// + [Parameter] + public string? ImageSrc { get; set; } + + /// + /// Gets or sets the current collapsed state of the sidebar. + /// + public bool IsCollapsed + { + get => collapseSidebar; + set => ToggleTo( value ); + } + + private string? navMenuCssClass => GetNavMenuCssClass(); + + /// + /// Gets or sets the sidebar title. + /// + /// + /// Default value is null. + /// + [Parameter] + [EditorRequired] + public string? Title { get; set; } = default!; + + /// + /// Gets or sets the sidebar width. + /// + /// Default value is 270. + [Parameter] + public float Width { get; set; } = 270; + + /// + /// Gets or sets the sidebar width unit. + /// + /// Default value is . + [Parameter] + public Unit WidthUnit { get; set; } = Unit.Px; + + #endregion }