Allow to specify class on NavItems (#381)

* Allow to specify class on NavItems * Sidebar: Add option to space items #276 - demos update --------- Co-authored-by: Vikram Reddy <[email protected]>
vikramlearning · Oct 1, 2023 · 8e2668e · 8e2668e
1 parent 8f31429
commit 8e2668e
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 7 deletions.
diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/SidebarDocumentation.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/SidebarDocumentation.razor
@@ -45,6 +45,10 @@
 <div class="mb-3">Developers can customize the sidebar color by changing the CSS variables, as mentioned in the below example.</div>
 <Demo Type="typeof(Sidebar_Demo_09_Customize_Sidebar)" Tabs="true" />
 
+<SectionHeading Size="HeadingSize.H2" Text="Apply custom CSS class to NavItem" PageUrl="@pageUrl" HashTagName="apply-custom-css-class-to-navitem" />
+<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" />
+
 @code {
     private string pageUrl = "/sidebar";
     private string title = "Blazor Sidebar Component";

diff --git a/...rBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_10_Apply_Custom_CSS_Class_to_NavItem.razor b/...rBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_10_Apply_Custom_CSS_Class_to_NavItem.razor
@@ -0,0 +1,41 @@
+<Sidebar @ref="sidebar"
+         IconName="IconName.BootstrapFill"
+         Title="Blazor Bootstrap"
+         DataProvider="SidebarDataProvider" />
+
+@code {
+    Sidebar sidebar;
+    IEnumerable<NavItem> navItems;
+
+    private async Task<SidebarDataProviderResult> SidebarDataProvider(SidebarDataProviderRequest request)
+    {
+        if (navItems is null)
+            navItems = GetNavItems();
+
+        return await Task.FromResult(request.ApplyTo(navItems));
+    }
+
+    private IEnumerable<NavItem> GetNavItems()
+    {
+        navItems = new List<NavItem>
+        {
+            new NavItem { Id = "1", Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started"},
+
+            new NavItem { Id = "2", IconName = IconName.LayoutSidebarInset, Text = "Content" },
+            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", 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"},
+
+            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;
+    }
+}
diff --git a/blazorbootstrap/Components/Sidebar/SidebarItem.razor b/blazorbootstrap/Components/Sidebar/SidebarItem.razor
@@ -65,7 +65,8 @@
                          Href="@childItem.Href"
                          Text="@childItem.Text"
                          Target="@childItem.Target"
-                         Match="@childItem.Match"/>
+                         Match="@childItem.Match"
+                         Class="@childItem.Class" />
         }
     }
 </div>
diff --git a/blazorbootstrap/Components/Sidebar/SidebarItemGroup.razor b/blazorbootstrap/Components/Sidebar/SidebarItemGroup.razor
@@ -13,8 +13,9 @@
                          Text="@item.Text"
                          Target="@item.Target"
                          Match="@item.Match"
-                         HasChilds="@item.HasChilds"
-                         ChildItems="@item.ChildItems"/>
+                         HasChilds="@item.HasChildItems"
+                         ChildItems="@item.ChildItems"
+                         Class="@item.Class"/>
         }
     }
 </nav>
diff --git a/blazorbootstrap/Models/NavItem.cs b/blazorbootstrap/Models/NavItem.cs
@@ -4,17 +4,28 @@ public class NavItem
 {
     #region Properties, Indexers
 
+    /// <summary>
+    /// Gets or sets the collection of child navigation items.
+    /// </summary>
     internal IEnumerable<NavItem>? ChildItems { get; set; }
 
     /// <summary>
-    /// Gets or sets the custom icon name.
+    /// Gets or sets an additional CSS class.
+    /// </summary>
+    public string? Class { get; set; }
+
+    /// <summary>
+    /// Gets or sets the name of the custom icon to display.
     /// </summary>
     public string? CustomIconName { get; set; }
 
-    internal bool HasChilds { get; set; }
+    /// <summary>
+    /// Gets or sets a Boolean value indicating whether the navigation item has child items.
+    /// </summary>
+    internal bool HasChildItems { get; set; }
 
     /// <summary>
-    /// Gets or sets the href.
+    /// Gets or sets the HyperText Reference (href).
     /// </summary>
     public string? Href { get; set; }
 

diff --git a/blazorbootstrap/Models/SidebarDataProviderRequest.cs b/blazorbootstrap/Models/SidebarDataProviderRequest.cs
@@ -26,7 +26,7 @@ public SidebarDataProviderResult ApplyTo(IEnumerable<NavItem> data)
 
             if (childNavItems is not null && childNavItems.Any())
             {
-                navItem.HasChilds = true;
+                navItem.HasChildItems = true;
                 navItem.ChildItems = childNavItems;
             }
         }