diff --git a/BlazorBootstrap.Demo.RCL/Pages/Layout/server/Layout_Server_Demo_01.razor b/BlazorBootstrap.Demo.RCL/Pages/Layout/server/Layout_Server_Demo_01.razor index 9ea046b01..dfc5f6349 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Layout/server/Layout_Server_Demo_01.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Layout/server/Layout_Server_Demo_01.razor @@ -35,13 +35,8 @@ private IEnumerable GetNavItems() { - navItems = new List - { - new NavItem { Id = "1", Href = "/", IconName = IconName.HouseDoorFill, Text = "Home", Match=NavLinkMatch.All}, - new NavItem { Id = "2", Href = "/counter", IconName = IconName.PlusSquareFill, Text = "Counter"}, - new NavItem { Id = "3", Href = "/fetchdata", IconName = IconName.Table, Text = "Fetch Data"}, - }; - - return navItems; + yield return new NavItem { Href = "/", IconName = IconName.HouseDoorFill, Text = "Home", Match=NavLinkMatch.All }; + yield return new NavItem { Href = "/counter", IconName = IconName.PlusSquareFill, Text = "Counter" }; + yield return new NavItem { Href = "/fetchdata", IconName = IconName.Table, Text = "Fetch Data" }; } } \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Pages/Layout/webassembly/Layout_WebAssembly_Demo_01.razor b/BlazorBootstrap.Demo.RCL/Pages/Layout/webassembly/Layout_WebAssembly_Demo_01.razor index 9ea046b01..3b8f75a2e 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Layout/webassembly/Layout_WebAssembly_Demo_01.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Layout/webassembly/Layout_WebAssembly_Demo_01.razor @@ -35,13 +35,8 @@ private IEnumerable GetNavItems() { - navItems = new List - { - new NavItem { Id = "1", Href = "/", IconName = IconName.HouseDoorFill, Text = "Home", Match=NavLinkMatch.All}, - new NavItem { Id = "2", Href = "/counter", IconName = IconName.PlusSquareFill, Text = "Counter"}, - new NavItem { Id = "3", Href = "/fetchdata", IconName = IconName.Table, Text = "Fetch Data"}, - }; - - return navItems; + yield return new NavItem { Href = "/", IconName = IconName.HouseDoorFill, Text = "Home", Match = NavLinkMatch.All }; + yield return new NavItem { Href = "/counter", IconName = IconName.PlusSquareFill, Text = "Counter" }; + yield return new NavItem { Href = "/fetchdata", IconName = IconName.Table, Text = "Fetch Data" }; } } \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/SidebarDocumentation.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/SidebarDocumentation.razor index 7878c9803..55ab45e3f 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/SidebarDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/SidebarDocumentation.razor @@ -51,6 +51,10 @@
Set the Class property of a NavItem to apply a custom CSS class.
+ +
You can nest multiple levels by providing more ChildItems
+ + @code { private string pageUrl = "/sidebar"; private string title = "Blazor Sidebar Component"; diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_01_Basic_Usage.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_01_Basic_Usage.razor index 8551d955c..b8ca2a179 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_01_Basic_Usage.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_01_Basic_Usage.razor @@ -5,7 +5,8 @@ IconName="IconName.BootstrapFill" @code { Sidebar sidebar = default!; - IEnumerable? navItems; + + private IEnumerable navItems = default!; private async Task SidebarDataProvider(SidebarDataProviderRequest request) { @@ -15,16 +16,13 @@ IconName="IconName.BootstrapFill" return await Task.FromResult(request.ApplyTo(navItems)); } + private IEnumerable GetNavItems() { - navItems = new List - { - new NavItem { Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started"}, - new NavItem { Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts"}, - new NavItem { Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete"}, - new NavItem { Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb"}, - new NavItem { Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar"}, - }; - return navItems; + yield return new NavItem { Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started"}; + yield return new NavItem { Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts"}; + yield return new NavItem { Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete"}; + yield return new NavItem { Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb"}; + yield return new NavItem { Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar" }; } } diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_02_Two_level_navigation.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_02_Two_level_navigation.razor index 81d8bf4fc..5f5956514 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_02_Two_level_navigation.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_02_Two_level_navigation.razor @@ -5,7 +5,7 @@ @code { Sidebar sidebar = default!; - IEnumerable? navItems; + private IEnumerable navItems = default!; private async Task SidebarDataProvider(SidebarDataProviderRequest request) { @@ -15,27 +15,46 @@ 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" }, - new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId="2"}, + yield return new NavItem { Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started" }; + + yield return new NavItem + { + IconName = IconName.LayoutSidebarInset, + Text = "Content", + ChildItems = new List + { + new NavItem { Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons" } + } + }; - new NavItem { Id = "4", IconName = IconName.ExclamationTriangleFill, Text = "Components" }, - 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"}, + yield return new NavItem + { + IconName = IconName.ExclamationTriangleFill, + Text = "Components", + ChildItems = new List + { + new NavItem { Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts" }, + new NavItem { Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb" }, + new NavItem { Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar" } + } + }; - new NavItem { Id = "8", IconName = IconName.WindowPlus, Text = "Forms" }, - 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"}, + yield return new NavItem + { + IconName = IconName.WindowPlus, + Text = "Forms", + ChildItems = new List + { + new NavItem { Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete" }, + new NavItem { Href = "/currency-input", IconName = IconName.CurrencyDollar, Text = "Currency Input" }, + new NavItem { Href = "/number-input", IconName = IconName.InputCursor, Text = "Number Input" }, + new NavItem { Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch" } + } }; - return navItems; } } diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_03_Change_Icons_Color.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_03_Change_Icons_Color.razor index 1a65ae96e..ba8976e01 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_03_Change_Icons_Color.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_03_Change_Icons_Color.razor @@ -5,7 +5,7 @@ @code { Sidebar sidebar = default!; - IEnumerable? navItems; + private IEnumerable navItems = default!; private async Task SidebarDataProvider(SidebarDataProviderRequest request) { @@ -17,25 +17,51 @@ private IEnumerable GetNavItems() { - navItems = new List + + yield return new NavItem { - new NavItem { Id = "1", Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started"}, + 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"}, + yield return new NavItem + { + IconName = IconName.LayoutSidebarInset, + Text = "Content", + IconColor = IconColor.Primary, + ChildItems = new List + { + new NavItem { Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons" } + } + }; - 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"}, + yield return new NavItem + { + IconName = IconName.ExclamationTriangleFill, + Text = "Components", + IconColor = IconColor.Success, + ChildItems = new List + { + new NavItem { Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts" }, + new NavItem { Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb" }, + new NavItem { Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar" }, + } + }; - 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"}, + yield return new NavItem + { + IconName = IconName.WindowPlus, + Text = "Forms", + IconColor = IconColor.Danger, + ChildItems = new List + { + new NavItem { Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete" }, + new NavItem { Href = "/currency-input", IconName = IconName.CurrencyDollar, Text = "Currency Input" }, + new NavItem { Href = "/number-input", IconName = IconName.InputCursor, Text = "Number Input" }, + new NavItem { Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch" }, + } }; - return navItems; } } diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_04_Full_layout_with_sidebar.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_04_Full_layout_with_sidebar.razor index 0984bb88d..8e92dc7c0 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_04_Full_layout_with_sidebar.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_04_Full_layout_with_sidebar.razor @@ -19,7 +19,7 @@ @code { Sidebar sidebar = default!; - IEnumerable? navItems; + private IEnumerable navItems = default!; private async Task SidebarDataProvider(SidebarDataProviderRequest request) { @@ -31,25 +31,50 @@ 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"}, + yield return new NavItem + { + Href = "/getting-started", + IconName = IconName.HouseDoorFill, + Text = "Getting Started" + }; - 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"}, + yield return new NavItem + { + IconName = IconName.LayoutSidebarInset, + Text = "Content", + IconColor = IconColor.Primary, + ChildItems = new List + { + new NavItem { Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons" }, + } + }; - 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"}, + yield return new NavItem + { + IconName = IconName.ExclamationTriangleFill, + Text = "Components", + IconColor = IconColor.Success, + ChildItems = new List + { + new NavItem { Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts" }, + new NavItem { Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb" }, + new NavItem { Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar" }, + } }; - return navItems; + yield return new NavItem + { + IconName = IconName.WindowPlus, + Text = "Forms", + IconColor = IconColor.Danger, + ChildItems = new List + { + new NavItem { Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete" }, + new NavItem { Href = "/currency-input", IconName = IconName.CurrencyDollar, Text = "Currency Input" }, + new NavItem { Href = "/number-input", IconName = IconName.InputCursor, Text = "Number Input" }, + new NavItem { Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch" }, + } + }; } } diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_05_Toggle_Sidebar_to_Show_Icons_Only.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_05_Toggle_Sidebar_to_Show_Icons_Only.razor index 62b9fcead..16a956484 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_05_Toggle_Sidebar_to_Show_Icons_Only.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_05_Toggle_Sidebar_to_Show_Icons_Only.razor @@ -20,7 +20,7 @@ @code { Sidebar sidebar = default!; - IEnumerable? navItems; + private IEnumerable navItems = default!; private async Task SidebarDataProvider(SidebarDataProviderRequest request) { @@ -29,29 +29,55 @@ return await Task.FromResult(request.ApplyTo(navItems)); } + private IEnumerable GetNavItems() { - navItems = new List + yield return new 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"}, + Href = "/getting-started", + IconName = IconName.HouseDoorFill, + Text = "Getting Started" + }; - 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"}, + yield return new NavItem + { + IconName = IconName.LayoutSidebarInset, + Text = "Content", + IconColor = IconColor.Primary, + ChildItems = new List + { + new NavItem { Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons" }, + } + }; - 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"}, + yield return new NavItem + { + IconName = IconName.ExclamationTriangleFill, + Text = "Components", + IconColor = IconColor.Success, + ChildItems = new List + { + new NavItem { Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts" }, + new NavItem { Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb" }, + new NavItem { Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar" }, + } }; - return navItems; + yield return new NavItem + { + + IconName = IconName.WindowPlus, + Text = "Forms", + IconColor = IconColor.Danger, + ChildItems = new List + { + new NavItem { Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete" }, + new NavItem { Href = "/currency-input", IconName = IconName.CurrencyDollar, Text = "Currency Input" }, + new NavItem { Href = "/number-input", IconName = IconName.InputCursor, Text = "Number Input" }, + new NavItem { Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch" }, + } + }; } private void ToggleSidebar() => sidebar.ToggleSidebar(); diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_06_Show_Badge.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_06_Show_Badge.razor index 82e1018c4..888ebdc61 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_06_Show_Badge.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_06_Show_Badge.razor @@ -21,7 +21,7 @@ @code { Sidebar sidebar = default!; - IEnumerable? navItems; + private IEnumerable navItems = default!; private async Task SidebarDataProvider(SidebarDataProviderRequest request) { @@ -31,28 +31,53 @@ return await Task.FromResult(request.ApplyTo(navItems)); } + private IEnumerable GetNavItems() { - navItems = new List + yield return new 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"}, + Href = "/getting-started", + IconName = IconName.HouseDoorFill, + Text = "Getting Started" + }; - 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"}, + yield return new NavItem + { + IconName = IconName.LayoutSidebarInset, + Text = "Content", + IconColor = IconColor.Primary, + ChildItems = new List + { + new NavItem { Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons" }, + } + }; - 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"}, + yield return new NavItem + { + IconName = IconName.ExclamationTriangleFill, + Text = "Components", + IconColor = IconColor.Success, + ChildItems = new List + { + new NavItem { Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts" }, + new NavItem { Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb" }, + new NavItem { Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar" }, + } }; - return navItems; + yield return new NavItem + { + IconName = IconName.WindowPlus, + Text = "Forms", + IconColor = IconColor.Danger, + ChildItems = new List + { + new NavItem { Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete" }, + new NavItem { Href = "/currency-input", IconName = IconName.CurrencyDollar, Text = "Currency Input" }, + new NavItem { Href = "/number-input", IconName = IconName.InputCursor, Text = "Number Input" }, + new NavItem { Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch" }, + } + }; } private void ToggleSidebar() => sidebar.ToggleSidebar(); diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_07_Custom_Brand_Icon.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_07_Custom_Brand_Icon.razor index 27734b894..a0fb35de1 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_07_Custom_Brand_Icon.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_07_Custom_Brand_Icon.razor @@ -21,7 +21,7 @@ @code { Sidebar sidebar = default!; - IEnumerable? navItems; + private IEnumerable navItems = default!; private async Task SidebarDataProvider(SidebarDataProviderRequest request) { @@ -33,26 +33,50 @@ private IEnumerable GetNavItems() { - navItems = new List + yield return new 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"}, + Href = "/getting-started", + IconName = IconName.HouseDoorFill, + Text = "Getting Started" + }; - 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"}, + yield return new NavItem + { + IconName = IconName.LayoutSidebarInset, + Text = "Content", + IconColor = IconColor.Primary, + ChildItems = new List + { + new NavItem { Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons" }, + } + }; - 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"}, + yield return new NavItem + { + IconName = IconName.ExclamationTriangleFill, + Text = "Components", + IconColor = IconColor.Success, + ChildItems = new List + { + new NavItem { Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts" }, + new NavItem { Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb" }, + new NavItem { Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar" }, + } }; - return navItems; + yield return new NavItem + { + IconName = IconName.WindowPlus, + Text = "Forms", + IconColor = IconColor.Danger, + ChildItems = new List + { + new NavItem { Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete" }, + new NavItem { Href = "/currency-input", IconName = IconName.CurrencyDollar, Text = "Currency Input" }, + new NavItem { Href = "/number-input", IconName = IconName.InputCursor, Text = "Number Input" }, + new NavItem { Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch" }, + } + }; } private void ToggleSidebar() => sidebar.ToggleSidebar(); diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_08_Show_Image_as_Brand_Logo.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_08_Show_Image_as_Brand_Logo.razor index c5c68107e..0bba4b6a2 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_08_Show_Image_as_Brand_Logo.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_08_Show_Image_as_Brand_Logo.razor @@ -21,7 +21,7 @@ @code { Sidebar sidebar = default!; - IEnumerable? navItems; + private IEnumerable navItems = default!; private async Task SidebarDataProvider(SidebarDataProviderRequest request) { @@ -33,26 +33,52 @@ private IEnumerable GetNavItems() { - navItems = new List + yield return new NavItem { - new NavItem { Id = "1", Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started"}, + 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"}, + yield return new NavItem + { + IconName = IconName.LayoutSidebarInset, + Text = "Content", + IconColor = IconColor.Primary, + ChildItems = new List + { + new NavItem { Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons" }, + } + }; - 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"}, + yield return new NavItem + { + IconName = IconName.ExclamationTriangleFill, + Text = "Components", + IconColor = IconColor.Success, + ChildItems = new List + { + new NavItem { Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts" }, + new NavItem { Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb" }, + new NavItem { Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar" }, + } + }; - 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"}, + yield return new NavItem + { + IconName = IconName.WindowPlus, + Text = "Forms", + IconColor = IconColor.Danger, + ChildItems = new List + { + new NavItem { Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete" }, + new NavItem { Href = "/currency-input", IconName = IconName.CurrencyDollar, Text = "Currency Input" }, + new NavItem { Href = "/number-input", IconName = IconName.InputCursor, Text = "Number Input" }, + new NavItem { Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch" }, + } }; - return navItems; + } private void ToggleSidebar() => sidebar.ToggleSidebar(); diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_09_Customize_Sidebar.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_09_Customize_Sidebar.razor index af358d8b5..d6b5a9c64 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_09_Customize_Sidebar.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_09_Customize_Sidebar.razor @@ -22,8 +22,7 @@ @code { Sidebar sidebar = default!; - bool applyPurpleStyle = false; - IEnumerable? navItems; + private IEnumerable navItems = default!; private async Task SidebarDataProvider(SidebarDataProviderRequest request) { @@ -33,28 +32,54 @@ return await Task.FromResult(request.ApplyTo(navItems)); } + bool applyPurpleStyle = false; + private IEnumerable GetNavItems() { - navItems = new List + yield return new 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"}, + Href = "/getting-started", + IconName = IconName.HouseDoorFill, + Text = "Getting Started" + }; - 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"}, + yield return new NavItem + { + IconName = IconName.LayoutSidebarInset, + Text = "Content", + IconColor = IconColor.Primary, + ChildItems = new List + { + new NavItem { Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons" }, + } + }; - 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"}, + yield return new NavItem + { + IconName = IconName.ExclamationTriangleFill, + Text = "Components", + IconColor = IconColor.Success, + ChildItems = new List + { + new NavItem { Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts" }, + new NavItem { Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb" }, + new NavItem { Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar" }, + } }; - return navItems; + yield return new NavItem + { + IconName = IconName.WindowPlus, + Text = "Forms", + IconColor = IconColor.Danger, + ChildItems = new List + { + new NavItem { Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete" }, + new NavItem { Href = "/currency-input", IconName = IconName.CurrencyDollar, Text = "Currency Input" }, + new NavItem { Href = "/number-input", IconName = IconName.InputCursor, Text = "Number Input" }, + new NavItem { Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch" }, + } + }; } private void ToggleSidebarStyles() => applyPurpleStyle = !applyPurpleStyle; diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_10_Apply_Custom_CSS_Class_to_NavItem.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_10_Apply_Custom_CSS_Class_to_NavItem.razor index 2a9ece7fa..78ccf29e7 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_10_Apply_Custom_CSS_Class_to_NavItem.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_10_Apply_Custom_CSS_Class_to_NavItem.razor @@ -5,7 +5,7 @@ @code { Sidebar sidebar = default!; - IEnumerable? navItems; + private IEnumerable navItems = default!; private async Task SidebarDataProvider(SidebarDataProviderRequest request) { @@ -17,25 +17,51 @@ private IEnumerable GetNavItems() { - navItems = new List + yield return new NavItem { - new NavItem { Id = "1", Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started"}, + Href = "/getting-started", + IconName = IconName.HouseDoorFill, + Text = "Getting Started" + }; - new NavItem { Id = "2", IconName = IconName.LayoutSidebarInset, Text = "Content" }, - new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId="2"}, + yield return new NavItem + { + IconName = IconName.LayoutSidebarInset, + Text = "Content", + IconColor = IconColor.Primary, + ChildItems = new List + { + new NavItem { Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", Class = "px-3" }, + } + }; - new NavItem { Id = "4", IconName = IconName.ExclamationTriangleFill, Text = "Components" }, - new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId="4", Class="px-3"}, - new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId="4", Class="px-3"}, - new NavItem { Id = "7", Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", ParentId="4", Class="px-3"}, + yield return new NavItem + { + IconName = IconName.ExclamationTriangleFill, + Text = "Components", + IconColor = IconColor.Success, + ChildItems = new List + { + new NavItem { Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", Class = "px-3" }, + new NavItem { Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", Class = "px-3" }, + new NavItem { Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", Class = "px-3" }, + } + }; - new NavItem { Id = "8", IconName = IconName.WindowPlus, Text = "Forms" }, - 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"}, + yield return new NavItem + { + IconName = IconName.WindowPlus, + Text = "Forms", + IconColor = IconColor.Danger, + ChildItems = new List + { + new NavItem { Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete", Class = "px-3" }, + new NavItem { Href = "/currency-input", IconName = IconName.CurrencyDollar, Text = "Currency Input", Class = "px-3" }, + new NavItem { Href = "/number-input", IconName = IconName.InputCursor, Text = "Number Input", Class = "px-3" }, + new NavItem { Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch", Class = "px-3" }, + } }; - return navItems; + } } diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_11_Three_level_navigation.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_11_Three_level_navigation.razor new file mode 100644 index 000000000..8243c9928 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_11_Three_level_navigation.razor @@ -0,0 +1,69 @@ +
+ + +
+
+ + About +
+ +
+
Page content goes here
+
+
+
+@code { + Sidebar sidebar = default!; + private IEnumerable navItems = default!; + + private async Task SidebarDataProvider(SidebarDataProviderRequest request) + { + if (navItems is null) + navItems = GetNavItems(); + + return await Task.FromResult(request.ApplyTo(navItems)); + } + + private IEnumerable GetNavItems() + { + yield return new NavItem + { + Href = "/getting-started", + IconName = IconName.HouseDoorFill, + Text = "Getting Started" + }; + + + yield return new NavItem + { + IconName = IconName.WindowPlus, + Text = "Forms", + IconColor = IconColor.Danger, + ChildItems = new List + { + new NavItem + { + IconName = IconName.InputCursorText, + Text = "Second level", + ChildItems = new List + { + new NavItem + { + Href = "/getting-started", + IconName = IconName.HouseDoorFill, + Text = "Third level item" + } + } + }, + } + }; + + + } + + private void ToogleSidebar() => sidebar.ToggleSidebar(); + +} diff --git a/BlazorBootstrap.Demo.RCL/Shared/MainLayout.razor.cs b/BlazorBootstrap.Demo.RCL/Shared/MainLayout.razor.cs index 63bd27569..1af38d118 100644 --- a/BlazorBootstrap.Demo.RCL/Shared/MainLayout.razor.cs +++ b/BlazorBootstrap.Demo.RCL/Shared/MainLayout.razor.cs @@ -14,6 +14,7 @@ protected override void OnInitialized() base.OnInitialized(); } + private async Task SidebarDataProvider(SidebarDataProviderRequest request) { if (navItems is null) @@ -21,66 +22,119 @@ private async Task SidebarDataProvider(SidebarDataPro return await Task.FromResult(request.ApplyTo(navItems)); } - private IEnumerable GetNavItems() { - navItems = new List + + yield return new() { - new (){ Id = "1", Text = "Getting Started", Href = "/getting-started", IconName = IconName.HouseDoorFill }, + Text = "Getting Started", + IconName = IconName.HouseDoorFill, + ChildItems = new List + { + new (){ Text = "Blazor WebAssembly", Href = "/getting-started/blazor-webassembly", IconName = IconName.BrowserChrome }, + new (){ Text = "Blazor Server", Href = "/getting-started/blazor-server", IconName = IconName.Server }, + new (){ Text = "MAUI Blazor", Href = "/getting-started/maui-blazor", IconName = IconName.PhoneFill }, + } + }; - new (){ Id = "2", Text = "Layout", IconName = IconName.LayoutTextWindowReverse, IconColor = IconColor.Success }, - new (){ Id = "200", Text = "Blazor WebAssembly", Href = "/layout-setup/blazor-webassembly", IconName = IconName.BrowserEdge, ParentId = "2" }, - new (){ Id = "201", Text = "Blazor Server", Href = "/layout-setup/blazor-server", IconName = IconName.Server, ParentId = "2" }, + yield return new() + { + Text = "Layout", + IconName = IconName.LayoutTextWindowReverse, + IconColor = IconColor.Success, + ChildItems = new List + { + new (){ Text = "Blazor WebAssembly", Href = "/layout-setup/blazor-webassembly", IconName = IconName.BrowserEdge }, + new (){ Text = "Blazor Server", Href = "/layout-setup/blazor-server", IconName = IconName.Server }, + } + }; - new (){ Id = "3", Text = "Content", IconName = IconName.BodyText, IconColor = IconColor.Primary }, - new (){ Id = "300", Text = "Icons", Href = "/icons", IconName = IconName.PersonSquare, ParentId = "3" }, + yield return new() + { + Text = "Content", + IconName = IconName.BodyText, + IconColor = IconColor.Primary, + ChildItems = new List + { + new (){ Text = "Icons", Href = "/icons", IconName = IconName.PersonSquare }, + } + }; - new (){ Id = "4", Text = "Forms", IconName = IconName.InputCursorText, IconColor = IconColor.Success }, - new (){ Id = "400", Text = "Auto Complete", Href = "/autocomplete", IconName = IconName.InputCursorText, ParentId = "4" }, - new (){ Id = "401", Text = "Currency Input", Href = "/form/currency-input", IconName = IconName.CurrencyDollar, ParentId = "4" }, - new (){ Id = "402", Text = "Date Input", Href = "/form/date-input", IconName = IconName.CalendarDate, ParentId = "4" }, - new (){ Id = "403", Text = "Number Input", Href = "/form/number-input", IconName = IconName.InputCursor, ParentId = "4" }, - new (){ Id = "404", Text = "Range Input", Href = "/form/range-input", IconName = IconName.Sliders, ParentId = "4" }, - new (){ Id = "405", Text = "Switch", Href = "/form/switch", IconName = IconName.ToggleOn, ParentId = "4" }, - new (){ Id = "406", Text = "Time Input", Href = "/form/time-input", IconName = IconName.ClockFill, ParentId = "4" }, + yield return new() + { + Text = "Forms", + IconName = IconName.InputCursorText, + IconColor = IconColor.Success, + ChildItems = new List + { + new (){ Text = "Auto Complete", Href = "/autocomplete", IconName = IconName.InputCursorText }, + new (){ Text = "Currency Input", Href = "/form/currency-input", IconName = IconName.CurrencyDollar }, + new (){ Text = "Date Input", Href = "/form/date-input", IconName = IconName.CalendarDate }, + new (){ Text = "Number Input", Href = "/form/number-input", IconName = IconName.InputCursor }, + new (){ Text = "Switch", Href = "/form/switch", IconName = IconName.ToggleOn }, + new (){ Text = "Time Input", Href = "/form/time-input", IconName = IconName.ClockFill }, + } + }; - new (){ Id = "5", Text = "Components", IconName = IconName.GearFill, IconColor = IconColor.Danger }, - new (){ Id = "500", Text = "Accordion", Href = "/accordion", IconName = IconName.ChevronBarExpand, ParentId = "5" }, - new (){ Id = "501", Text = "Alerts", Href = "/alerts", IconName = IconName.CheckCircleFill, ParentId = "5" }, - new (){ Id = "502", Text = "Badge", Href = "/badge", IconName = IconName.AppIndicator, ParentId = "5" }, - new (){ Id = "503", Text = "Breadcrumb", Href = "/breadcrumb", IconName = IconName.SegmentedNav, ParentId = "5" }, - new (){ Id = "504", Text = "Buttons", Href = "/buttons", IconName = IconName.ToggleOn, ParentId = "5" }, - new (){ Id = "505", Text = "Callout", Href = "/callout", IconName = IconName.StickyFill, ParentId = "5" }, - new (){ Id = "506", Text = "Card", Href = "/card", IconName = IconName.CardHeading, ParentId = "5" }, - new (){ Id = "507", Text = "Charts", Href = "/charts", IconName = IconName.BarChartLineFill, ParentId = "5", Match = NavLinkMatch.All }, - new (){ Id = "508", Text = "Collapse", Href = "/collapse", IconName = IconName.ArrowsCollapse, ParentId = "5" }, - new (){ Id = "509", Text = "Confirm Dialog", Href = "/confirm-dialog", IconName = IconName.QuestionDiamondFill, ParentId = "5" }, - new (){ Id = "510", Text = "Dropdown", Href = "/dropdown", IconName = IconName.MenuButtonWideFill, ParentId = "5" }, - new (){ Id = "511", Text = "Grid", Href = "/grid", IconName = IconName.Grid, ParentId = "5" }, - new (){ Id = "512", Text = "Modals", Href = "/modals", IconName = IconName.WindowStack, ParentId = "5" }, - new (){ Id = "513", Text = "Offcanvas", Href = "/offcanvas", IconName = IconName.LayoutSidebarReverse, ParentId = "5" }, - new (){ Id = "514", Text = "Pagination", Href = "/pagination", IconName = IconName.ThreeDots, ParentId = "5" }, - new (){ Id = "515", Text = "Pdf Viewer", Href = "/pdf-viewer", IconName = IconName.FilePdfFill, ParentId = "5" }, - new (){ Id = "516", Text = "Placeholders", Href = "/placeholders", IconName = IconName.ColumnsGap, ParentId = "5" }, - new (){ Id = "517", Text = "Preload", Href = "/preload", IconName = IconName.ArrowClockwise, ParentId = "5" }, - new (){ Id = "518", Text = "Progress", Href = "/progress", IconName = IconName.UsbC, ParentId = "5" }, - new (){ Id = "519", Text = "Script Loader", Href = "/script-loader", IconName = IconName.CodeSlash, ParentId = "5" }, - new (){ Id = "520", Text = "Sidebar", Href = "/sidebar", IconName = IconName.LayoutSidebar, ParentId = "5" }, - new (){ Id = "521", Text = "Spinner", Href = "/spinner", IconName = IconName.ArrowRepeat, ParentId = "5" }, - new (){ Id = "522", Text = "Tabs", Href = "/tabs", IconName = IconName.WindowPlus, ParentId = "5" }, - new (){ Id = "523", Text = "Toasts", Href = "/toasts", IconName = IconName.ExclamationTriangleFill, ParentId = "5" }, - new (){ Id = "524", Text = "Tooltips", Href = "/tooltips", IconName = IconName.ChatSquareDotsFill, ParentId = "5" }, - new (){ Id = "6", Text = "Data Visualization", IconName = IconName.BarChartFill, IconColor = IconColor.Warning }, - new (){ Id = "600", Text = "Bar Chart", Href = "/charts/bar-chart", IconName = IconName.BarChartFill, ParentId = "6", Match = NavLinkMatch.All }, - new (){ Id = "601", Text = "Doughnut Chart", Href = "/charts/doughnut-chart", IconName = IconName.CircleFill, ParentId = "6", Match = NavLinkMatch.All }, - new (){ Id = "602", Text = "Line Chart", Href = "/charts/line-chart", IconName = IconName.GraphUp, ParentId = "6", Match = NavLinkMatch.All }, - new (){ Id = "603", Text = "Pie Chart", Href = "/charts/pie-chart", IconName = IconName.PieChartFill, ParentId = "6", Match = NavLinkMatch.All }, + yield return new() + { + Text = "Components", + IconName = IconName.GearFill, + IconColor = IconColor.Danger, + ChildItems = new List + { + new (){ Text = "Accordion", Href = "/accordion", IconName = IconName.ChevronBarExpand }, + new (){ Text = "Alerts", Href = "/alerts", IconName = IconName.CheckCircleFill }, + new (){ Text = "Badge", Href = "/badge", IconName = IconName.AppIndicator }, + new (){ Text = "Breadcrumb", Href = "/breadcrumb", IconName = IconName.SegmentedNav }, + new (){ Text = "Buttons", Href = "/buttons", IconName = IconName.ToggleOn }, + new (){ Text = "Callout", Href = "/callout", IconName = IconName.StickyFill }, + new (){ Text = "Card", Href = "/card", IconName = IconName.CardHeading }, + new (){ Text = "Charts", Href = "/charts", IconName = IconName.BarChartLineFill, Match = NavLinkMatch.All }, + new (){ Text = "Collapse", Href = "/collapse", IconName = IconName.ArrowsCollapse }, + new (){ Text = "Confirm Dialog", Href = "/confirm-dialog", IconName = IconName.QuestionDiamondFill }, + new (){ Text = "Dropdown", Href = "/dropdown", IconName = IconName.MenuButtonWideFill }, + new (){ Text = "Grid", Href = "/grid", IconName = IconName.Grid }, + new (){ Text = "Modals", Href = "/modals", IconName = IconName.WindowStack }, + new (){ Text = "Offcanvas", Href = "/offcanvas", IconName = IconName.LayoutSidebarReverse }, + new (){ Text = "Pagination", Href = "/pagination", IconName = IconName.ThreeDots }, + new (){ Text = "Pdf Viewer", Href = "/pdf-viewer", IconName = IconName.FilePdfFill }, + new (){ Text = "Placeholders", Href = "/placeholders", IconName = IconName.ColumnsGap }, + new (){ Text = "Preload", Href = "/preload", IconName = IconName.ArrowClockwise }, + new (){ Text = "Progress", Href = "/progress", IconName = IconName.UsbC }, + new (){ Text = "Script Loader", Href = "/script-loader", IconName = IconName.CodeSlash }, + new (){ Text = "Sidebar", Href = "/sidebar", IconName = IconName.LayoutSidebar }, + new (){ Text = "Spinner", Href = "/spinners", IconName = IconName.ArrowRepeat }, + new (){ Text = "Tabs", Href = "/tabs", IconName = IconName.WindowPlus }, + new (){ Text = "Toasts", Href = "/toasts", IconName = IconName.ExclamationTriangleFill }, + new (){ Text = "Tooltips", Href = "/tooltips", IconName = IconName.ChatSquareDotsFill }, + } + }; - new(){ Id = "7", Text = "Services", IconName = IconName.WrenchAdjustableCircleFill, IconColor = IconColor.Success }, - new (){ Id = "700", Text = "Modal Service", Href = "/modal-service", IconName = IconName.WindowStack, ParentId = "7" }, + yield return new() + { + Text = "Data Visualization", + IconName = IconName.BarChartFill, + IconColor = IconColor.Warning, + ChildItems = new List + { + new (){ Text = "Bar Chart", Href = "/charts/bar-chart", IconName = IconName.BarChartFill, Match = NavLinkMatch.All }, + new (){ Text = "Doughnut Chart", Href = "/charts/doughnut-chart", IconName = IconName.CircleFill, Match = NavLinkMatch.All }, + new (){ Text = "Line Chart", Href = "/charts/line-chart", IconName = IconName.GraphUp, Match = NavLinkMatch.All }, + new (){ Text = "Pie Chart", Href = "/charts/pie-chart", IconName = IconName.PieChartFill, Match = NavLinkMatch.All }, + } }; - return navItems; + yield return new() + { + Text = "Services", + IconName = IconName.WrenchAdjustableCircleFill, + IconColor = IconColor.Success, + ChildItems = new List + { + new (){ Text = "Modal Service", Href = "/modal-service", IconName = IconName.WindowStack }, + } + }; } } diff --git a/blazorbootstrap.sln b/blazorbootstrap.sln index 9daa09e4f..bcc900136 100644 --- a/blazorbootstrap.sln +++ b/blazorbootstrap.sln @@ -59,7 +59,6 @@ Global {CA121C94-88EC-4902-9FCD-8394BDEB0355} = {7DABA756-9F2F-48A6-B8D3-B104262D11B1} {7103F2DB-2A6E-4164-B531-34D6CCC72458} = {7DABA756-9F2F-48A6-B8D3-B104262D11B1} {190E07ED-8888-4F3B-8484-46BF6FC4C982} = {7DABA756-9F2F-48A6-B8D3-B104262D11B1} - {710E0A10-0567-495D-AA48-A99293D2EA62} = {7DABA756-9F2F-48A6-B8D3-B104262D11B1} EndGlobalSection GlobalSection(ExtensibilityGlobals) = postSolution SolutionGuid = {810B19D0-6AB6-4959-A8D7-340A2F72DF6F} diff --git a/blazorbootstrap/Components/Sidebar/Sidebar.razor.cs b/blazorbootstrap/Components/Sidebar/Sidebar.razor.cs index 057a824b7..e312dd326 100644 --- a/blazorbootstrap/Components/Sidebar/Sidebar.razor.cs +++ b/blazorbootstrap/Components/Sidebar/Sidebar.razor.cs @@ -1,4 +1,6 @@ -namespace BlazorBootstrap; +using Microsoft.AspNetCore.Components.Web.Virtualization; + +namespace BlazorBootstrap; public partial class Sidebar : BlazorBootstrapComponentBase { diff --git a/blazorbootstrap/Components/Sidebar/SidebarItem.razor b/blazorbootstrap/Components/Sidebar/SidebarItem.razor index 7f9ed2dd9..8eeaccbd8 100644 --- a/blazorbootstrap/Components/Sidebar/SidebarItem.razor +++ b/blazorbootstrap/Components/Sidebar/SidebarItem.razor @@ -2,70 +2,75 @@ @inherits BlazorBootstrapComponentBase
- @if (HasChilds) + @if (Item.ChildItems.Any()) { @if (!CollapseSidebar) { + @for (int i = 0; i < SubLevel; i++) + { + + } + - } else { - + - } - @Text + @Item.Text @if (navitemGroupExpanded) { - + } else { - + } } else { - + @if (!CollapseSidebar) { + @for (int i = 0; i < SubLevel; i++) + { + + } - } else { - + - } - @Text + @Item.Text } - @if (navitemGroupExpanded && HasChilds && ChildItems is not null && ChildItems.Any()) + @if (navitemGroupExpanded && Item.ChildItems.Any()) { - @foreach (var childItem in ChildItems) + @foreach (var childItem in Item.ChildItems) { - } } diff --git a/blazorbootstrap/Components/Sidebar/SidebarItem.razor.cs b/blazorbootstrap/Components/Sidebar/SidebarItem.razor.cs index e42994641..a7e81ce65 100644 --- a/blazorbootstrap/Components/Sidebar/SidebarItem.razor.cs +++ b/blazorbootstrap/Components/Sidebar/SidebarItem.razor.cs @@ -13,7 +13,8 @@ public partial class SidebarItem : BlazorBootstrapComponentBase protected override void BuildClasses() { this.AddClass("nav-item"); - this.AddClass("nav-item-group", HasChilds); + this.AddClass("nav-item-group", Item.ChildItems.Any()); + this.AddClass("nav-sub-item", IsSubItem); this.AddClass("active", navitemGroupExpanded); base.BuildClasses(); @@ -21,11 +22,11 @@ protected override void BuildClasses() protected override void OnParametersSet() { - if (!HasChilds || !(ChildItems?.Any() ?? false)) + if (!Item.ChildItems.Any()) return; - foreach (var childItem in ChildItems) - if (ShouldExpand(NavigationManager.Uri, childItem.Href!)) + foreach (NavItem childItem in Item.ChildItems) + if (ShouldExpand(NavigationManager.Uri, childItem.Href)) { navitemGroupExpanded = true; @@ -75,13 +76,13 @@ private static bool IsStrictlyPrefixWithSeparator(string value, string prefix) ); } - private bool ShouldExpand(string currentUriAbsolute, string href) + private bool ShouldExpand(string currentUriAbsolute, string? href) { var hrefAbsolute = href == null ? null : NavigationManager.ToAbsoluteUri(href).AbsoluteUri; return hrefAbsolute != null && (EqualsHrefExactlyOrIfTrailingSlashAdded(currentUriAbsolute, hrefAbsolute) - || (Match == NavLinkMatch.Prefix && IsStrictlyPrefixWithSeparator(currentUriAbsolute, hrefAbsolute))); + || (Item.Match == NavLinkMatch.Prefix && IsStrictlyPrefixWithSeparator(currentUriAbsolute, hrefAbsolute))); } private void ToggleNavItemGroup() => navitemGroupExpanded = !navitemGroupExpanded; @@ -93,37 +94,35 @@ private bool ShouldExpand(string currentUriAbsolute, string href) /// protected override bool ShouldAutoGenerateId => true; - [Parameter] public IEnumerable? ChildItems { get; set; } + private string iconColorCssClass => BootstrapClassProvider.IconColor(Item.IconColor); [CascadingParameter] public bool CollapseSidebar { get; set; } - [Parameter] public string? CustomIconName { get; set; } - - [Parameter] public bool HasChilds { get; set; } - - [Parameter] public string? Href { get; set; } - - [Parameter] public IconColor IconColor { get; set; } - - private string iconColorCssClass => BootstrapClassProvider.IconColor(IconColor); - - [Parameter] public IconName IconName { get; set; } + /// + /// Gets or sets the which should be displayed. + /// + [Parameter, EditorRequired] + public NavItem Item { get; set; } = new(); /// - /// Gets or sets a value representing the URL matching behavior. + /// If set to true then this nav item is marked as nav-sub-item /// [Parameter] - public NavLinkMatch Match { get; set; } + public bool IsSubItem { get; set; } + + /// + /// Gets or sets the current level of this + /// + [Parameter] + public int SubLevel { get; set; } [Inject] private NavigationManager NavigationManager { get; set; } = default!; [CascadingParameter] public Sidebar Parent { get; set; } = default!; - [Parameter] public Target Target { get; set; } - - private string targetString => Target.ToTargetString()!; + private string targetString => Item.Target.ToTargetString(); - [Parameter] public string? Text { get; set; } + #endregion } diff --git a/blazorbootstrap/Components/Sidebar/SidebarItem.razor.css b/blazorbootstrap/Components/Sidebar/SidebarItem.razor.css index a84c36502..f3f65aa3f 100644 --- a/blazorbootstrap/Components/Sidebar/SidebarItem.razor.css +++ b/blazorbootstrap/Components/Sidebar/SidebarItem.razor.css @@ -28,7 +28,6 @@ font-weight: 600; } -/* MDN REFERENCE: https://developer.mozilla.org/en-US/docs/Web/CSS/:has#browser_compatibility */ -.bb-sidebar nav .nav-item.nav-item-group:has(.nav-link.active) { - background-color: var(--bb-sidebar-nav-item-group-background-color); -} +.bb-sidebar nav .nav-item .indent { + padding-left: var(--bb-sidebar-nav-sub-level-padding-left); +} \ No newline at end of file diff --git a/blazorbootstrap/Components/Sidebar/SidebarItemGroup.razor b/blazorbootstrap/Components/Sidebar/SidebarItemGroup.razor index 8f733ef5f..8872351d1 100644 --- a/blazorbootstrap/Components/Sidebar/SidebarItemGroup.razor +++ b/blazorbootstrap/Components/Sidebar/SidebarItemGroup.razor @@ -6,16 +6,8 @@ { foreach (var item in NavItems) { - + } } diff --git a/blazorbootstrap/Models/NavItem.cs b/blazorbootstrap/Models/NavItem.cs index ca4908e58..63145fcdf 100644 --- a/blazorbootstrap/Models/NavItem.cs +++ b/blazorbootstrap/Models/NavItem.cs @@ -7,7 +7,7 @@ public class NavItem /// /// Gets or sets the collection of child navigation items. /// - internal IEnumerable? ChildItems { get; set; } + public IEnumerable ChildItems { get; set; } = Enumerable.Empty(); /// /// Gets or sets an additional CSS class. @@ -19,10 +19,6 @@ public class NavItem /// public string? CustomIconName { get; set; } - /// - /// Gets or sets a Boolean value indicating whether the navigation item has child items. - /// - internal bool HasChildItems { get; set; } /// /// Gets or sets the HyperText Reference (href). @@ -39,21 +35,11 @@ public class NavItem /// public IconName IconName { get; set; } - /// - /// Gets or sets the Id. - /// - public string? Id { get; set; } - /// /// Gets or sets the URL matching behavior. /// public NavLinkMatch Match { get; set; } - /// - /// Gets or sets the parent Id. - /// - public string? ParentId { get; set; } - /// /// Gets or sets the sequence. /// diff --git a/blazorbootstrap/Models/SidebarDataProviderRequest.cs b/blazorbootstrap/Models/SidebarDataProviderRequest.cs index d26e5cbe7..4e6f6e9c8 100644 --- a/blazorbootstrap/Models/SidebarDataProviderRequest.cs +++ b/blazorbootstrap/Models/SidebarDataProviderRequest.cs @@ -9,30 +9,9 @@ public SidebarDataProviderResult ApplyTo(IEnumerable data) if (data is null) return new SidebarDataProviderResult { Data = Enumerable.Empty() }; - var result = new List(); - var parentNavItems = data.Where(x => string.IsNullOrWhiteSpace(x.ParentId))?.OrderBy(x => x.Sequence); - - if (parentNavItems is null || !parentNavItems.Any()) - return new SidebarDataProviderResult { Data = Enumerable.Empty() }; - - result.AddRange(parentNavItems); - - foreach (var navItem in parentNavItems) - { - if (string.IsNullOrWhiteSpace(navItem.Id)) - continue; - - var childNavItems = data.Where(x => x.ParentId == navItem.Id)?.OrderBy(x => x.Sequence); - - if (childNavItems is not null && childNavItems.Any()) - { - navItem.HasChildItems = true; - navItem.ChildItems = childNavItems; - } - } - - return new SidebarDataProviderResult { Data = result }; + return new SidebarDataProviderResult { Data = data }; } #endregion } + diff --git a/blazorbootstrap/Models/SidebarDataProviderResult.cs b/blazorbootstrap/Models/SidebarDataProviderResult.cs index f28eabbda..f5ba99737 100644 --- a/blazorbootstrap/Models/SidebarDataProviderResult.cs +++ b/blazorbootstrap/Models/SidebarDataProviderResult.cs @@ -10,4 +10,4 @@ public class SidebarDataProviderResult public IEnumerable? Data { get; init; } #endregion -} +} \ No newline at end of file diff --git a/blazorbootstrap/wwwroot/blazor.bootstrap.css b/blazorbootstrap/wwwroot/blazor.bootstrap.css index 25329e670..5280e3749 100644 --- a/blazorbootstrap/wwwroot/blazor.bootstrap.css +++ b/blazorbootstrap/wwwroot/blazor.bootstrap.css @@ -33,6 +33,7 @@ --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); + --bb-sidebar-nav-sub-level-padding-left: 1em; /* custom tooltip */ --bb-tooltip-primary: var(--bs-primary); --bb-tooltip-secondary: var(--bs-secondary);