Sidebar 2 component

BlazorBootstrap.Demo.RCL/Pages/Callout/Callout_Demo_01_Examples.razor

@@ -14,6 +14,10 @@
     <strong>This is an info callout</strong>. Example text to show it in action. See <a href="https://blazorbootstrap.com/docs/components/callout">callout documentation</a>.
 </Callout>
 
-<Callout Type="CalloutType.Success">
+<Callout Type="CalloutType.Tip">
     <strong>This is an tip callout</strong>. Example text to show it in action. See <a href="https://blazorbootstrap.com/docs/components/callout">callout documentation</a>.
-</Callout>
+</Callout>
+
+<Callout Type="CalloutType.Success">
+    <strong>This is an success callout</strong>. Example text to show it in action. See <a href="https://blazorbootstrap.com/docs/components/callout">callout documentation</a>.
+</Callout>

BlazorBootstrap.Demo.RCL/Pages/Index.razor

@@ -170,6 +170,11 @@
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.LayoutSidebarInset" class="me-2" /> Sidebar</h4>
             </a>
         </div>
+        <div class="col-sm-4 mb-2">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/sidebar2">
+                <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.ListNested" class="me-2" /> Sidebar 2 <Badge Color="BadgeColor.Danger">New</Badge></h4>
+            </a>
+        </div>
         <div class="col-sm-4 mb-2">
             <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/spinners">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.ArrowRepeat" class="me-2" /> Spinners <Badge Color="BadgeColor.Danger">New</Badge></h4>

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

@@ -17,7 +17,7 @@
 <SectionHeading Size="HeadingSize.H2" Text="Two level navigation" PageUrl="@pageUrl" HashTagName="two-level-navigation" />
 <div class="mb-3">Use NavItem's <code>Id</code> and <code>ParentId</code> to set the parent-child relation.</div>
 <Demo Type="typeof(Sidebar_Demo_02_Two_level_navigation)" Tabs="true" />
-<Callout Type="CalloutType.Default" Heading="NOTE">At this moment, two levels of navigation are supported.</Callout>
+<Callout Type="CalloutType.Danger" Heading="NOTE">Currently, two levels of navigation are supported. For more than two levels, use the <b><a href="/sidebar2">Sidebar2</a></b> component.</Callout>
 
 <SectionHeading Size="HeadingSize.H2" Text="Change icons color" PageUrl="@pageUrl" HashTagName="change-icons-color" />
 <div class="mb-3">Set <code>IconColor</code> property to change the color.</div>

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

@@ -0,0 +1,43 @@
+@page "/sidebar2"
+
+<PageTitle>@title</PageTitle>
+
+<MetaTags PageUrl="@pageUrl" Title="@title" Description="@description" ImageUrl="@imageUrl" />
+
+<h1>Blazor Sidebar2</h1>
+<div class="lead mb-3">
+    Use the Blazor Bootstrap <code>Sidebar2</code> component to display consistent, cross-browser, and responsive navigation links that support more than two nested levels.
+</div>
+
+@* <CarbonAds /> *@
+
+<SectionHeading Size="HeadingSize.H2" Text="Basic usage" PageUrl="@pageUrl" HashTagName="basic-usage" />
+<div class="mb-3"></div>
+<Demo Type="typeof(Sidebar2_Demo_01_Basic_Usage)" Tabs="true" />
+
+<SectionHeading Size="HeadingSize.H2" Text="More nested levels" PageUrl="@pageUrl" HashTagName="more-nested-levels" />
+<div class="mb-3"></div>
+<Demo Type="typeof(Sidebar2_Demo_02_More_Nested_Levels)" Tabs="true" />
+
+@* <SectionHeading Size="HeadingSize.H2" Text="Change icons color" PageUrl="@pageUrl" HashTagName="change-icons-color" />
+<div class="mb-3">Set <code>IconColor</code> property to change the color.</div>
+<Demo Type="typeof(Sidebar2_Demo_03_Change_Icons_Color)" Tabs="true" /> *@
+
+<SectionHeading Size="HeadingSize.H2" Text="Full layout with sidebar" PageUrl="@pageUrl" HashTagName="full-layout-with-sidebar" />
+<div class="mb-3">Replace your <b>MainLayout.razor</b> page code with the below example to have a complete layout with a sidebar.</div>
+<Demo Type="typeof(Sidebar2_Demo_04_Full_layout_with_sidebar)" Tabs="true" />
+
+<SectionHeading Size="HeadingSize.H2" Text="Custom brand icon" PageUrl="@pageUrl" HashTagName="custom-brand-icon" />
+<div class="mb-3">Use the <code>CustomIconName</code> parameter to set the custom logo icon using font awesome or other icons.</div>
+<Demo Type="typeof(Sidebar2_Demo_07_Custom_Brand_Icon)" Tabs="true" />
+
+<SectionHeading Size="HeadingSize.H2" Text="Show image as brand logo" PageUrl="@pageUrl" HashTagName="show-image-as-brand-logo" />
+<div class="mb-3">Use the <code>ImageSrc</code> parameter to set the brand logo.</div>
+<Demo Type="typeof(Sidebar2_Demo_08_Show_Image_as_Brand_Logo)" Tabs="true" />
+
+@code {
+    private string pageUrl = "sidebar2";
+    private string title = "Blazor Sidebar2 Component";
+    private string description = "Use the Blazor Bootstrap Sidebar2 component to display consistent, cross-browser, and responsive navigation links that support more than two nested levels.";
+    private string imageUrl = "https://i.imgur.com/U0l6wXo.png";
+}

BlazorBootstrap.Demo.RCL/Pages/Sidebar2/Sidebar2_Demo_01_Basic_Usage.razor

@@ -0,0 +1,45 @@
+<Sidebar2 IconName="IconName.BootstrapFill"
+          Title="Blazor Bootstrap"
+          BadgeText="v2.1.0"
+          DataProvider="Sidebar2DataProvider" />
+
+@code {
+    IEnumerable<NavItem>? navItems;
+
+    private async Task<Sidebar2DataProviderResult> Sidebar2DataProvider(Sidebar2DataProviderRequest request)
+    {
+        if (navItems is null)
+            navItems = GetNavItems();
+
+        await Task.Delay(2000);
+
+        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"},
+
+            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", IconName = IconName.ListNested, Text = "Sidebar 2", ParentId="4"},
+            new NavItem { Id = "701", Href = "/sidebar2", IconName = IconName.Dash, Text = "How to use", ParentId="7"},
+            new NavItem { Id = "702", Href = "/sidebar2-examples", IconName = IconName.Dash, Text = "Examples", ParentId="7"},
+
+            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"},
+        };
+
+        return navItems;
+    }
+}

BlazorBootstrap.Demo.RCL/Pages/Sidebar2/Sidebar2_Demo_02_More_Nested_Levels.razor

@@ -0,0 +1,52 @@
+<Sidebar2 IconName="IconName.BootstrapFill"
+          Title="Blazor Bootstrap"
+          BadgeText="v2.1.0"
+          DataProvider="Sidebar2DataProvider" />
+
+@code {
+    IEnumerable<NavItem>? navItems;
+
+    private async Task<Sidebar2DataProviderResult> Sidebar2DataProvider(Sidebar2DataProviderRequest request)
+    {
+        if (navItems is null)
+            navItems = GetNavItems();
+
+        await Task.Delay(2000);
+
+        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"},
+
+            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", IconName = IconName.ListNested, Text = "Sidebar 2", ParentId="4"},
+            new NavItem { Id = "701", Href = "/sidebar2/how-to-use", IconName = IconName.Dash, Text = "How to use", ParentId="7"},
+
+            new NavItem { Id = "702", IconName = IconName.Dash, Text = "Examples", ParentId="7"},
+            new NavItem { Id = "70201", Href = "/sidebar2", IconName = IconName.Dash, Text = "Nested levels", ParentId="702"},
+
+            new NavItem { Id = "8", IconName = IconName.Grid, Text = "Grid", ParentId="4"},
+            new NavItem { Id = "801", Href = "/grid/#", IconName = IconName.Dash, Text = "How to use", ParentId="8"},
+            new NavItem { Id = "802", IconName = IconName.Dash, Text = "Examples", ParentId="8"},
+            new NavItem { Id = "80201", Href = "/grid/#", IconName = IconName.Dash, Text = "Filters", ParentId="802"},
+
+            new NavItem { Id = "9", IconName = IconName.WindowPlus, Text = "Forms" },
+            new NavItem { Id = "10", Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete", ParentId="9"},
+            new NavItem { Id = "11", Href = "/currency-input", IconName = IconName.CurrencyDollar, Text = "Currency Input", ParentId="9"},
+            new NavItem { Id = "12", Href = "/number-input", IconName = IconName.InputCursor, Text = "Number Input", ParentId="9"},
+            new NavItem { Id = "13", Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch", ParentId="9"},
+        };
+
+        return navItems;
+    }
+}

BlazorBootstrap.Demo.RCL/Pages/Sidebar2/Sidebar2_Demo_03_Change_Icons_Color.razor

@@ -0,0 +1,52 @@
+<Sidebar2 IconName="IconName.BootstrapFill"
+          Title="Blazor Bootstrap"
+          BadgeText="v2.1.0"
+          DataProvider="Sidebar2DataProvider" />
+
+@code {
+    IEnumerable<NavItem>? navItems;
+
+    private async Task<Sidebar2DataProviderResult> Sidebar2DataProvider(Sidebar2DataProviderRequest request)
+    {
+        if (navItems is null)
+            navItems = GetNavItems();
+
+        await Task.Delay(2000);
+
+        return await Task.FromResult(request.ApplyTo(navItems));
+    }
+
+    private IEnumerable<NavItem> GetNavItems()
+    {
+        navItems = new List<NavItem>
+        {
+            new NavItem { Id = "1", Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started"},
+
+            new NavItem { Id = "2", IconName = IconName.LayoutSidebarInset, Text = "Content", IconColor = IconColor.Primary },
+            new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId="2"},
+
+            new NavItem { Id = "4", IconName = IconName.ExclamationTriangleFill, Text = "Components", IconColor = IconColor.Success },
+            new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId="4"},
+            new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId="4"},
+
+            new NavItem { Id = "7", IconName = IconName.ListNested, Text = "Sidebar 2", ParentId="4"},
+            new NavItem { Id = "701", Href = "/sidebar2/how-to-use", IconName = IconName.Dash, Text = "How to use", ParentId="7"},
+
+            new NavItem { Id = "702", IconName = IconName.Dash, Text = "Examples", ParentId="7"},
+            new NavItem { Id = "70201", Href = "/sidebar2", IconName = IconName.Dash, Text = "Nested levels", ParentId="702"},
+
+            new NavItem { Id = "8", IconName = IconName.Grid, Text = "Grid", ParentId="4", IconColor = IconColor.Danger },
+            new NavItem { Id = "801", Href = "/grid/#", IconName = IconName.Dash, Text = "How to use", ParentId="8"},
+            new NavItem { Id = "802", IconName = IconName.Dash, Text = "Examples", ParentId="8"},
+            new NavItem { Id = "80201", Href = "/grid/#", IconName = IconName.Dash, Text = "Filters", ParentId="802"},
+
+            new NavItem { Id = "9", IconName = IconName.WindowPlus, Text = "Forms", IconColor = IconColor.Warning },
+            new NavItem { Id = "10", Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete", ParentId="9"},
+            new NavItem { Id = "11", Href = "/currency-input", IconName = IconName.CurrencyDollar, Text = "Currency Input", ParentId="9"},
+            new NavItem { Id = "12", Href = "/number-input", IconName = IconName.InputCursor, Text = "Number Input", ParentId="9"},
+            new NavItem { Id = "13", Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch", ParentId="9"},
+        };
+
+        return navItems;
+    }
+}

BlazorBootstrap.Demo.RCL/Pages/Sidebar2/Sidebar2_Demo_04_Full_layout_with_sidebar.razor

@@ -0,0 +1,66 @@
+<div class="bb-page">
+
+    <Sidebar2 IconName="IconName.BootstrapFill"
+              Title="Blazor Bootstrap"
+              BadgeText="v2.1.0"
+              DataProvider="Sidebar2DataProvider" />
+
+    <main>
+        <div class="bb-top-row px-4 d-flex justify-content-end">
+            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
+        </div>
+
+        <article class="content px-4">
+            <div class="py-2">Page content goes here</div>
+        </article>
+    </main>
+
+</div>
+
+@code {
+    IEnumerable<NavItem>? navItems;
+
+    private async Task<Sidebar2DataProviderResult> Sidebar2DataProvider(Sidebar2DataProviderRequest request)
+    {
+        if (navItems is null)
+            navItems = GetNavItems();
+
+        await Task.Delay(2000);
+
+        return await Task.FromResult(request.ApplyTo(navItems));
+    }
+
+    private IEnumerable<NavItem> GetNavItems()
+    {
+        navItems = new List<NavItem>
+        {
+            new NavItem { Id = "1", Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started"},
+
+            new NavItem { Id = "2", IconName = IconName.LayoutSidebarInset, Text = "Content", IconColor = IconColor.Primary },
+            new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId="2"},
+
+            new NavItem { Id = "4", IconName = IconName.ExclamationTriangleFill, Text = "Components", IconColor = IconColor.Success },
+            new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId="4"},
+            new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId="4"},
+
+            new NavItem { Id = "7", IconName = IconName.ListNested, Text = "Sidebar 2", ParentId="4"},
+            new NavItem { Id = "701", Href = "/sidebar2/how-to-use", IconName = IconName.Dash, Text = "How to use", ParentId="7"},
+
+            new NavItem { Id = "702", IconName = IconName.Dash, Text = "Examples", ParentId="7"},
+            new NavItem { Id = "70201", Href = "/sidebar2", IconName = IconName.Dash, Text = "Nested levels", ParentId="702"},
+
+            new NavItem { Id = "8", IconName = IconName.Grid, Text = "Grid", ParentId="4", IconColor = IconColor.Danger },
+            new NavItem { Id = "801", Href = "/grid/#", IconName = IconName.Dash, Text = "How to use", ParentId="8"},
+            new NavItem { Id = "802", IconName = IconName.Dash, Text = "Examples", ParentId="8"},
+            new NavItem { Id = "80201", Href = "/grid/#", IconName = IconName.Dash, Text = "Filters", ParentId="802"},
+
+            new NavItem { Id = "9", IconName = IconName.WindowPlus, Text = "Forms", IconColor = IconColor.Warning },
+            new NavItem { Id = "10", Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete", ParentId="9"},
+            new NavItem { Id = "11", Href = "/currency-input", IconName = IconName.CurrencyDollar, Text = "Currency Input", ParentId="9"},
+            new NavItem { Id = "12", Href = "/number-input", IconName = IconName.InputCursor, Text = "Number Input", ParentId="9"},
+            new NavItem { Id = "13", Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch", ParentId="9"},
+        };
+
+        return navItems;
+    }
+}

BlazorBootstrap.Demo.RCL/Pages/Sidebar2/Sidebar2_Demo_07_Custom_Brand_Icon.razor

@@ -0,0 +1,66 @@
+<div class="bb-page">
+
+    <Sidebar2 CustomIconName="bi bi-apple"
+              Title="Blazor Bootstrap"
+              BadgeText="v2.1.0"
+              DataProvider="Sidebar2DataProvider" />
+
+    <main>
+        <div class="bb-top-row px-4 d-flex justify-content-end">
+            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
+        </div>
+
+        <article class="content px-4">
+            <div class="py-2">Page content goes here</div>
+        </article>
+    </main>
+
+</div>
+
+@code {
+    IEnumerable<NavItem>? navItems;
+
+    private async Task<Sidebar2DataProviderResult> Sidebar2DataProvider(Sidebar2DataProviderRequest request)
+    {
+        if (navItems is null)
+            navItems = GetNavItems();
+
+        await Task.Delay(2000);
+
+        return await Task.FromResult(request.ApplyTo(navItems));
+    }
+
+    private IEnumerable<NavItem> GetNavItems()
+    {
+        navItems = new List<NavItem>
+        {
+            new NavItem { Id = "1", Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started"},
+
+            new NavItem { Id = "2", IconName = IconName.LayoutSidebarInset, Text = "Content", IconColor = IconColor.Primary },
+            new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId="2"},
+
+            new NavItem { Id = "4", IconName = IconName.ExclamationTriangleFill, Text = "Components", IconColor = IconColor.Success },
+            new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId="4"},
+            new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId="4"},
+
+            new NavItem { Id = "7", IconName = IconName.ListNested, Text = "Sidebar 2", ParentId="4"},
+            new NavItem { Id = "701", Href = "/sidebar2/how-to-use", IconName = IconName.Dash, Text = "How to use", ParentId="7"},
+
+            new NavItem { Id = "702", IconName = IconName.Dash, Text = "Examples", ParentId="7"},
+            new NavItem { Id = "70201", Href = "/sidebar2", IconName = IconName.Dash, Text = "Nested levels", ParentId="702"},
+
+            new NavItem { Id = "8", IconName = IconName.Grid, Text = "Grid", ParentId="4", IconColor = IconColor.Danger },
+            new NavItem { Id = "801", Href = "/grid/#", IconName = IconName.Dash, Text = "How to use", ParentId="8"},
+            new NavItem { Id = "802", IconName = IconName.Dash, Text = "Examples", ParentId="8"},
+            new NavItem { Id = "80201", Href = "/grid/#", IconName = IconName.Dash, Text = "Filters", ParentId="802"},
+
+            new NavItem { Id = "9", IconName = IconName.WindowPlus, Text = "Forms", IconColor = IconColor.Warning },
+            new NavItem { Id = "10", Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete", ParentId="9"},
+            new NavItem { Id = "11", Href = "/currency-input", IconName = IconName.CurrencyDollar, Text = "Currency Input", ParentId="9"},
+            new NavItem { Id = "12", Href = "/number-input", IconName = IconName.InputCursor, Text = "Number Input", ParentId="9"},
+            new NavItem { Id = "13", Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch", ParentId="9"},
+        };
+
+        return navItems;
+    }
+}