HxSidebarItem - Target direct descendant of -hx-sidebar-item-highligh…

…t-on-active-child to avoid setting color to all children when only parent should be targeted
havit · Jan 24, 2024 · f33d7f8 · f33d7f8
1 parent 7494edc
commit f33d7f8
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 35 deletions.
diff --git a/BlazorAppTest/Pages/HxSidebarTest.razor b/BlazorAppTest/Pages/HxSidebarTest.razor
@@ -1,37 +1,52 @@
 @page "/HxSidebarTest"
-<h1>HxSidebarTest</h1>
+@page "/HxSidebarTest/Test1"
+@page "/HxSidebarTest/Test2"
+@page "/HxSidebarTest/Test3"
+@page "/HxSidebarTest/Test4"
+@page "/HxSidebarTest/Test5"
+@page "/HxSidebarTest/Test6"
+@page "/HxSidebarTest/Test7"
+@page "/HxSidebarTest/Test8"
+@page "/HxSidebarTest/Test9"
+@page "/HxSidebarTest/Test10"
+@page "/HxSidebarTest/Test11"
+@page "/HxSidebarTest/Test12"
 
-<div class="border d-inline-block">
-	<HxSidebar>
-		<HeaderTemplate>
-			<HxSidebarBrand BrandName="Brand name" BrandNameShort="BN" />
-		</HeaderTemplate>
+<div> @* div for CSS isolation *@
+	<h1>HxSidebarTest</h1>
 
-		<ItemsTemplate>
-			<HxSidebarItem Text="Match Test 1" Icon="BootstrapIcon.Person" Href="/HxSidebarTest" Match="NavLinkMatch.Prefix">
-				<HxSidebarItem Text="Item 1" Href="/HxSidebarTest#x1" Match="NavLinkMatch.All" />
-				<HxSidebarItem Text="Another item" Href="TEST" />
-				<HxSidebarItem Text="Item 3" Href="TEST" />
-				<HxSidebarItem Text="Another item 4" Href="TEST" />
-			</HxSidebarItem>
-			<HxSidebarItem Text="Plain section" Icon="BootstrapIcon.Person">
-				<HxSidebarItem Text="Item 1" Href="/HxSidebarTest#x1" Match="NavLinkMatch.All" />
-				<HxSidebarItem Text="Another item" Href="TEST" />
-				<HxSidebarItem Text="Item 3" Href="TEST" />
-				<HxSidebarItem Text="Another item 4" Href="TEST" />
-			</HxSidebarItem>
-			<HxSidebarItem Text="Subitems with icons" Href="TEST" Icon="BootstrapIcon.Clock">
-				<HxSidebarItem Text="Item 1" Icon="BootstrapIcon.Person" Href="#" />
-				<HxSidebarItem Text="Another item" Icon="BootstrapIcon.Clock" Href="TEST" />
-				<HxSidebarItem Text="Item 3" Icon="BootstrapIcon.Wallet2"Href="TEST" />
-				<HxSidebarItem Text="Another item 4" Icon="BootstrapIcon.ClipboardData" Href="TEST" />
-			</HxSidebarItem>
-			<HxSidebarItem Text="First-level item 1" Href="TEST" Icon="BootstrapIcon.Wallet2" />
-			<HxSidebarItem Text="First-level item 2" Href="TEST" Icon="BootstrapIcon.ClipboardData" />
-		</ItemsTemplate>
+	<div class="border d-inline-block">
+		<HxSidebar>
+			<HeaderTemplate>
+				<HxSidebarBrand BrandName="Brand name" BrandNameShort="BN"/>
+			</HeaderTemplate>
 
-		<FooterTemplate>
-			<HxSidebarFooter Href="https://github.com/havit/Havit.Blazor" Icon="BootstrapIcon.Github" Text="GitHub repository" />
-		</FooterTemplate>
-	</HxSidebar>
-</div>
+			<ItemsTemplate>
+				<HxSidebarItem Text="Match Test 1" Icon="BootstrapIcon.Person" Href="/HxSidebarTest" Match="NavLinkMatch.Prefix">
+					<HxSidebarItem Text="Item 1" Href="/HxSidebarTest#x1" Match="NavLinkMatch.All"/>
+					<HxSidebarItem Text="Another item" Href="/HxSidebarTest/Test1"/>
+					<HxSidebarItem Text="Item 3" Href="/HxSidebarTest/Test2"/>
+					<HxSidebarItem Text="Another item 4" Href="/HxSidebarTest/Test3"/>
+				</HxSidebarItem>
+				<HxSidebarItem Text="Plain section" Icon="BootstrapIcon.Person">
+					<HxSidebarItem Text="Item 1" Href="/HxSidebarTest#x1" Match="NavLinkMatch.All"/>
+					<HxSidebarItem Text="Another item" Href="/HxSidebarTest/Test4"/>
+					<HxSidebarItem Text="Item 3" Href="/HxSidebarTest/Test5"/>
+					<HxSidebarItem Text="Another item 4" Href="/HxSidebarTest/Test6"/>
+				</HxSidebarItem>
+				<HxSidebarItem Text="Subitems with icons" Href="/HxSidebarTest/Test7" Icon="BootstrapIcon.Clock" TooltipText="Subitems with icons">
+					<HxSidebarItem Text="Item 1" Icon="BootstrapIcon.Person" Href="#"/>
+					<HxSidebarItem Text="Another item" Icon="BootstrapIcon.Clock" Href="/HxSidebarTest/Test8"/>
+					<HxSidebarItem Text="Item 3" Icon="BootstrapIcon.Wallet2"Href="/HxSidebarTest/Test9"/>
+					<HxSidebarItem Text="Another item 4" Icon="BootstrapIcon.ClipboardData" Href="/HxSidebarTest/Test10"/>
+				</HxSidebarItem>
+				<HxSidebarItem Text="First-level item 1" Href="/HxSidebarTest/Test11" Icon="BootstrapIcon.Wallet2"/>
+				<HxSidebarItem Text="First-level item 2" Href="/HxSidebarTest/Test12" Icon="BootstrapIcon.ClipboardData"/>
+			</ItemsTemplate>
+
+			<FooterTemplate>
+				<HxSidebarFooter Href="https://github.com/havit/Havit.Blazor" Icon="BootstrapIcon.Github" Text="GitHub repository"/>
+			</FooterTemplate>
+		</HxSidebar>
+	</div>
+</div>
diff --git a/BlazorAppTest/Pages/HxSidebarTest.razor.css b/BlazorAppTest/Pages/HxSidebarTest.razor.css
@@ -0,0 +1,3 @@
+::deep .hx-sidebar {
+	--hx-sidebar-parent-item-active-icon-color: var(--bs-success);
+}
diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItem.razor b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItem.razor
@@ -80,7 +80,7 @@
 			else
 			{
 				<HxNavLink Href="@Href"
-						   CssClass="@CssClassHelper.Combine(this.CssClass)"
+						   CssClass="@CssClassHelper.Combine(this.CssClass, "hx-sidebar-item")"
 						   Match="this.Match"
 						   Enabled="this.Enabled"
 						   role="button"

diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItem.razor.css b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItem.razor.css
@@ -73,7 +73,7 @@
 	color: var(--hx-sidebar-item-active-icon-color);
 }
 
-.hx-sidebar-item-highlight-on-active-child:has(.hx-sidebar-subitems .nav-link.active) ::deep .hx-sidebar-item-icon {
+.hx-sidebar-item-highlight-on-active-child:has(.hx-sidebar-subitems .nav-link.active) > ::deep.hx-sidebar-item .hx-sidebar-item-icon {
 	color: var(--hx-sidebar-parent-item-active-icon-color);
 }