Merge pull request #688 from havit/feature/Issue687-HxSidebar-highlig…

…ht-parent-as-active-when-it's-child-is-active #687 New parameter HighlightOnActiveChild + CSS
havit · Dec 15, 2023 · 39ebc75 · 39ebc75
2 parents c840fcf + e5156fa
commit 39ebc75
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 7 deletions.
diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItem.razor b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItem.razor
@@ -1,6 +1,6 @@
 @namespace Havit.Blazor.Components.Web.Bootstrap
 <CascadingValue Value="this" IsFixed="true">
-    <div>
+    <div class="@CssClassHelper.Combine(HighlightOnActiveChild ? "hx-sidebar-item-highlight-on-active-child" : null)">
         @if (!HasExpandableContent)
         {
             <HxNavLink Href="@Href"
@@ -59,7 +59,7 @@
                            role="button"
                            data-bs-toggle="dropdown"
                            aria-expanded="@(this.expanded ? "true" : "false")">
-                        
+
                            @itemNavLinkContent
 
                     </HxNavLink>

diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItem.razor.cs b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItem.razor.cs
@@ -36,6 +36,12 @@ public partial class HxSidebarItem : IAsyncDisposable
 	/// </summary>
 	[Parameter] public bool ExpandOnMatch { get; set; } = true;
 
+	/// <summary>
+	/// Set to <c>false</c> if you don't want to highlight the item if one of the children items is active (URL matches).<br/>
+	/// Default is <c>true</c>.
+	/// </summary>
+	[Parameter] public bool HighlightOnActiveChild { get; set; } = true;
+
 	/// <summary>
 	/// Allows you to disable the item with <c>false</c>.
 	/// Default is <c>true</c>.

diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItem.razor.css b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItem.razor.css
@@ -51,6 +51,13 @@
 ::deep a.nav-link.active:hover {
 	background-color: rgba(var(--hx-sidebar-item-active-background-color), var(--hx-sidebar-item-active-background-opacity));
 	color: var(--hx-sidebar-item-active-color);
+	font-weight: var(--hx-sidebar-item-active-font-weight);
+}
+
+.hx-sidebar-item-highlight-on-active-child:has(.hx-sidebar-subitems .nav-link.active) ::deep > a.nav-link {
+	background-color: rgba(var(--hx-sidebar-parent-item-active-background-color), var(--hx-sidebar-parent-item-active-background-opacity));
+	color: var(--hx-sidebar-parent-item-active-color);
+	font-weight: var(--hx-sidebar-parent-item-active-font-weight);
 }
 
 ::deep i {

diff --git a/Havit.Blazor.Components.Web.Bootstrap/wwwroot/defaults.css b/Havit.Blazor.Components.Web.Bootstrap/wwwroot/defaults.css
@@ -28,6 +28,11 @@
 	--hx-sidebar-item-active-background-color: 						var(--bs-primary-rgb);
 	--hx-sidebar-item-active-background-opacity: 					.1;
 	--hx-sidebar-item-active-icon-color: 							var(--bs-primary);
+	--hx-sidebar-item-active-font-weight: 							unset;
+	--hx-sidebar-parent-item-active-color:							unset;
+	--hx-sidebar-parent-item-active-background-opacity:				0;
+	--hx-sidebar-parent-item-active-background-color:				unset;
+	--hx-sidebar-parent-item-active-font-weight: 					600;
 	--hx-sidebar-subitem-font-size: 								.875rem;
 	--hx-sidebar-subitem-padding: 									.5rem;
 	--hx-sidebar-subitem-margin: 									0 0 .25rem 2rem;

diff --git a/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Documentation.razor b/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Documentation.razor
@@ -91,6 +91,24 @@
 		<ComponentApiDocCssVariable Name="--hx-sidebar-item-active-background-opacity" Default=".1">
 			Background opacity of the active item.
 		</ComponentApiDocCssVariable>
+		<ComponentApiDocCssVariable Name="--hx-sidebar-item-active-background-color" Default="var(--bs-primary-rgb)">
+			Background color of the active item.
+		</ComponentApiDocCssVariable>
+		<ComponentApiDocCssVariable Name="--hx-sidebar-item-active-font-weight" Default="unset">
+			Font weight of the active item.
+		</ComponentApiDocCssVariable>
+		<ComponentApiDocCssVariable Name="--hx-sidebar-parent-item-active-color" Default="unset">
+			Color of the parent of active item.
+		</ComponentApiDocCssVariable>
+		<ComponentApiDocCssVariable Name="--hx-sidebar-parent-item-active-background-color" Default="unset">
+			Background color of the parent of active item.
+		</ComponentApiDocCssVariable>
+		<ComponentApiDocCssVariable Name="--hx-sidebar-parent-item-active-background-opacity" Default="0">
+			Background opacity of the parent of active item.
+		</ComponentApiDocCssVariable>
+		<ComponentApiDocCssVariable Name="--hx-sidebar-parent-item-active-font-weight" Default="600">
+			Font weight of the parent of active item.
+		</ComponentApiDocCssVariable>
 		<ComponentApiDocCssVariable Name="--hx-sidebar-item-margin" Default="0 0 .25rem 0">
 			Margin of the items.
 		</ComponentApiDocCssVariable>

diff --git a/Havit.Blazor.Documentation/Shared/Sidebar.razor b/Havit.Blazor.Documentation/Shared/Sidebar.razor
@@ -72,7 +72,8 @@
             <HxSidebarItem Href="@($"/components/{nameof(HxDropdown)}")" Text="@nameof(HxDropdown)" />
             <HxSidebarItem Href="@($"/components/{nameof(HxIcon)}")" Text="@nameof(HxIcon)" />
             <HxSidebarItem Href="@($"/components/{nameof(HxPlaceholder)}")" Text="@nameof(HxPlaceholder)" />
-            <HxSidebarItem Href="@($"/components/{nameof(HxTooltip)}")" Text="@nameof(HxTooltip)" />
+			<HxSidebarItem Href="@($"/components/{nameof(HxTooltip)}")" Text="@nameof(HxTooltip)" />
+			<HxSidebarItem Href="@($"/components/{nameof(HxPopover)}")" Text="@nameof(HxPopover)" />
             <HxSidebarItem Href="@($"/components/{nameof(HxTabPanel)}")" Text="@nameof(HxTabPanel)" />
             <HxSidebarItem Href="@($"/components/{nameof(HxListGroup)}")" Text="@(nameof(HxListGroup))" />
             <HxSidebarItem Href="@($"/components/{nameof(HxListLayout)}")" Text="@(nameof(HxListLayout))" />
@@ -92,9 +93,6 @@
 			@{
 #pragma warning restore 0618
 			}
-			<HxSidebarItem Href="@($"/components/{nameof(HxContextMenu)}")" Text="@(nameof(HxContextMenu))" />
-            <HxSidebarItem Href="@($"/components/{nameof(HxDropdown)}")" Text="@nameof(HxDropdown)" />
-            <HxSidebarItem Href="@($"/components/{nameof(HxTabPanel)}")" Text="@nameof(HxTabPanel)" />
             <HxSidebarItem Href="@($"/components/{nameof(HxRedirectTo)}")" Text="@nameof(HxRedirectTo)" />
         </HxSidebarItem>
 
@@ -118,7 +116,7 @@
             <HxSidebarItem Href="/concepts/dark-color-mode-theme" Text="Dark color mode" />
         </HxSidebarItem>
 
-        <HxSidebarItem Text="All Components" Icon="BootstrapIcon.SortAlphaDown" ExpandOnMatch="false">
+        <HxSidebarItem Text="All Components" Icon="BootstrapIcon.SortAlphaDown" ExpandOnMatch="false" HighlightOnActiveChild="false">
 			@{
 #pragma warning disable 0618  // Obsolete
 			}

diff --git a/Havit.Blazor.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml b/Havit.Blazor.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml
@@ -8135,6 +8135,12 @@
             NOTE: The expansion is only applied on initial load, the sidebar does not track the URL changes (this may change in the future).
             </summary>
         </member>
+        <member name="P:Havit.Blazor.Components.Web.Bootstrap.HxSidebarItem.HighlightOnActiveChild">
+            <summary>
+            Set to <c>false</c> if you don't want to highlight the item if one of the children items is active (URL matches).<br/>
+            Default is <c>true</c>.
+            </summary>
+        </member>
         <member name="P:Havit.Blazor.Components.Web.Bootstrap.HxSidebarItem.Enabled">
             <summary>
             Allows you to disable the item with <c>false</c>.