Skip to content

Refactor sidebar #415

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 12 commits into from
Closed

Refactor sidebar #415

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
070e077
Refactor sidebar to IEnumerable
MarvinKlein1508 Oct 24, 2023
c7d2250
Remove Id & ParentId
MarvinKlein1508 Oct 24, 2023
a2aa232
Provide class as parameter to get it set by ClassBuilder
MarvinKlein1508 Oct 24, 2023
7a7e793
Add demo for third level navigation
MarvinKlein1508 Oct 24, 2023
ce64736
Fix nullable warning
MarvinKlein1508 Oct 24, 2023
4b3d2b8
Add documentation
MarvinKlein1508 Oct 24, 2023
2006a07
Update Three level navigation demo
MarvinKlein1508 Nov 23, 2023
4295f5d
Add spacing to Sidebar
MarvinKlein1508 Nov 23, 2023
6e13f46
Add documentation
MarvinKlein1508 Nov 23, 2023
41d89d7
Revert to SidebarDataProviderDelegate
MarvinKlein1508 Jan 22, 2024
bfa5fb0
Fix Match
MarvinKlein1508 Jan 22, 2024
94aa622
Merge 2.0 branch + Remove ClassBuilder from Sidebar
MarvinKlein1508 Feb 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 3 additions & 8 deletions BlazorBootstrap.Demo.RCL/Pages/Layout/server/Layout_Server_Demo_01.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,13 +35,8 @@

private IEnumerable<NavItem> GetNavItems()
{
navItems = new List<NavItem>
{
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" };
}
}
11 changes: 3 additions & 8 deletions BlazorBootstrap.Demo.RCL/Pages/Layout/webassembly/Layout_WebAssembly_Demo_01.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,13 +35,8 @@

private IEnumerable<NavItem> GetNavItems()
{
navItems = new List<NavItem>
{
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" };
}
}
4 changes: 4 additions & 0 deletions BlazorBootstrap.Demo.RCL/Pages/Sidebar/SidebarDocumentation.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,10 @@
<div class="mb-3">Set the <b>Class</b> property of a <b>NavItem</b> to apply a custom CSS class.</div>
<Demo Type="typeof(Sidebar_Demo_10_Apply_Custom_CSS_Class_to_NavItem)" Tabs="true" />

<SectionHeading Size="HeadingSize.H2" Text="Third level navigation" PageUrl="@pageUrl" HashTagName="apply-custom-css-class-to-navitem" />
<div class="mb-3">You can nest multiple levels by providing more ChildItems</div>
<Demo Type="typeof(Sidebar_Demo_11_Three_level_navigation)" Tabs="true" />

@code {
private string pageUrl = "/sidebar";
private string title = "Blazor Sidebar Component";
Expand Down
18 changes: 8 additions & 10 deletions BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_01_Basic_Usage.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@ IconName="IconName.BootstrapFill"

@code {
Sidebar sidebar = default!;
IEnumerable<NavItem>? navItems;

private IEnumerable<NavItem> navItems = default!;

private async Task<SidebarDataProviderResult> SidebarDataProvider(SidebarDataProviderRequest request)
{
Expand All @@ -15,16 +16,13 @@ IconName="IconName.BootstrapFill"
return await Task.FromResult(request.ApplyTo(navItems));
}


private IEnumerable<NavItem> GetNavItems()
{
navItems = new List<NavItem>
{
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" };
}
}
51 changes: 35 additions & 16 deletions BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_02_Two_level_navigation.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

@code {
Sidebar sidebar = default!;
IEnumerable<NavItem>? navItems;
private IEnumerable<NavItem> navItems = default!;

private async Task<SidebarDataProviderResult> SidebarDataProvider(SidebarDataProviderRequest request)
{
Expand All @@ -15,27 +15,46 @@
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" },
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<NavItem>
{
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<NavItem>
{
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<NavItem>
{
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;
}
}
56 changes: 41 additions & 15 deletions BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_03_Change_Icons_Color.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

@code {
Sidebar sidebar = default!;
IEnumerable<NavItem>? navItems;
private IEnumerable<NavItem> navItems = default!;

private async Task<SidebarDataProviderResult> SidebarDataProvider(SidebarDataProviderRequest request)
{
Expand All @@ -17,25 +17,51 @@

private IEnumerable<NavItem> GetNavItems()
{
navItems = new List<NavItem>

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<NavItem>
{
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<NavItem>
{
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<NavItem>
{
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;
}
}
57 changes: 41 additions & 16 deletions BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_04_Full_layout_with_sidebar.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@

@code {
Sidebar sidebar = default!;
IEnumerable<NavItem>? navItems;
private IEnumerable<NavItem> navItems = default!;

private async Task<SidebarDataProviderResult> SidebarDataProvider(SidebarDataProviderRequest request)
{
Expand All @@ -31,25 +31,50 @@

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"},
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<NavItem>
{
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<NavItem>
{
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<NavItem>
{
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" },
}
};
}
}
58 changes: 42 additions & 16 deletions ...rBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_05_Toggle_Sidebar_to_Show_Icons_Only.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@

@code {
Sidebar sidebar = default!;
IEnumerable<NavItem>? navItems;
private IEnumerable<NavItem> navItems = default!;

private async Task<SidebarDataProviderResult> SidebarDataProvider(SidebarDataProviderRequest request)
{
Expand All @@ -29,29 +29,55 @@

return await Task.FromResult(request.ApplyTo(navItems));
}


private IEnumerable<NavItem> GetNavItems()
{
navItems = new List<NavItem>
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<NavItem>
{
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<NavItem>
{
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<NavItem>
{
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();
Expand Down
Loading