HxSidbarItem - added CSS vars for separate styling of active and hove…

…r items
havit · Oct 24, 2023 · dbbd7f2 · dbbd7f2
1 parent bef817c
commit dbbd7f2
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 22 deletions.
diff --git a/...s.Web.Bootstrap.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Documentation.razor b/...s.Web.Bootstrap.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Documentation.razor
@@ -70,21 +70,33 @@
 		<ComponentApiDocCssVariable Name="--hx-sidebar-item-icon-color" Default="var(--bs-primary)">
 			Color of the items icons.
 		</ComponentApiDocCssVariable>
+		<ComponentApiDocCssVariable Name="--hx-sidebar-item-border-radius" Default="var(--bs-border-radius-lg)">
+			Border radius of the items.
+		</ComponentApiDocCssVariable>
 		<ComponentApiDocCssVariable Name="--hx-sidebar-item-hover-color" Default="var(--bs-primary)">
 			Color of the items on hover.
 		</ComponentApiDocCssVariable>
 		<ComponentApiDocCssVariable Name="--hx-sidebar-item-hover-icon-color" Default="var(--bs-primary)">
 			Color of the items icon on hover.
 		</ComponentApiDocCssVariable>
-		<ComponentApiDocCssVariable Name="--hx-sidebar-item-border-radius" Default="var(--bs-border-radius-lg)">
-			Border radius of the items.
-		</ComponentApiDocCssVariable>
 		<ComponentApiDocCssVariable Name="--hx-sidebar-item-hover-background-color" Default="var(--bs-primary-rgb)">
 			Background color of the items on hover.
 		</ComponentApiDocCssVariable>
 		<ComponentApiDocCssVariable Name="--hx-sidebar-item-hover-background-opacity" Default=".05">
 			Background opacity of the items on hover.
 		</ComponentApiDocCssVariable>
+		<ComponentApiDocCssVariable Name="--hx-sidebar-item-active-color" Default="var(--bs-primary)">
+			Color of the active item.
+		</ComponentApiDocCssVariable>
+		<ComponentApiDocCssVariable Name="--hx-sidebar-item-active-icon-color" Default="var(--bs-primary)">
+			Color of the active item icon.
+		</ComponentApiDocCssVariable>
+		<ComponentApiDocCssVariable Name="--hx-sidebar-item-active-background-opacity" Default=".05">
+			Background opacity of the active item.
+		</ComponentApiDocCssVariable>
+		<ComponentApiDocCssVariable Name="--hx-sidebar-item-active-background-opacity" Default=".05">
+			Background opacity of the active item.
+		</ComponentApiDocCssVariable>
 		<ComponentApiDocCssVariable Name="--hx-sidebar-item-margin" Default="0 0 .25rem 0">
 			Margin of the items.
 		</ComponentApiDocCssVariable>

diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor
@@ -5,12 +5,12 @@
 
         @if (HeaderTemplate is not null)
         {
-            <div class="hx-sidebar-header d-flex align-items-center">
+            <div class="hx-sidebar-header d-flex gap-2 align-items-center">
                 <CascadingValue Value="@this">
                     @HeaderTemplate
                 </CascadingValue>
                 <HxButton
-                    CssClass="@CssClassHelper.Combine("hx-sidebar-navbar-toggler ms-auto", GetResponsiveCssClass("d-??-none"))"
+                    CssClass="@CssClassHelper.Combine("hx-sidebar-navbar-toggler", GetResponsiveCssClass("d-??-none"))"
                     data-bs-toggle="collapse"
                     data-bs-target="@($"#{NavContentElementId}")"
                     aria-controls="@NavContentElementId"

diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor.css b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor.css
@@ -19,7 +19,6 @@
 	}
 }
 
-
 .hx-sidebar.collapsed {
 	flex-basis: var(--hx-sidebar-collapsed-width);
 	min-width: auto;
@@ -49,6 +48,7 @@
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	margin-left: auto;
 }
 
 ::deep .hx-sidebar-navbar-toggler:focus-within {

diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarBrand.razor b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarBrand.razor
@@ -1,5 +1,5 @@
 @namespace Havit.Blazor.Components.Web.Bootstrap
-<a href="./">
+<a class="hx-sidebar-brand" href="./">
 	@if (LogoTemplate != null)
 	{
 		<div class="hx-sidebar-brand-logo">@LogoTemplate(new() { SidebarCollapsed = ParentSidebar.Collapsed })</div>

diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarBrand.razor.css b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarBrand.razor.css
@@ -1,4 +1,12 @@
-.hx-sidebar-brand-logo {
+.hx-sidebar-brand {
+	display: flex;
+	align-items: center;
+	text-decoration: none;
+	font-size: .875rem;
+	flex-grow: 1;
+}
+
+.hx-sidebar-brand-logo {
 	width: var(--hx-sidebar-brand-logo-width);
 	height: var(--hx-sidebar-brand-logo-height);
 }
@@ -15,13 +23,6 @@
 	justify-content: center;
 }
 
-a {
-	display: inline-flex;
-	align-items: center;
-	text-decoration: none;
-	font-size: .875rem;
-}
-
 .hx-sidebar-brand-name {
 	font-size: 1.25rem;
 	margin-left: .5rem;

diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItem.razor.css b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItem.razor.css
@@ -42,24 +42,31 @@
 }
 
 ::deep a.nav-link:hover,
-::deep a.nav-link.active:hover,
-::deep a.nav-link.active,
 .navbar-desktop-toggler:hover {
 	background-color: rgba(var(--hx-sidebar-item-hover-background-color), var(--hx-sidebar-item-hover-background-opacity));
 	color: var(--hx-sidebar-item-hover-color);
 }
 
+::deep a.nav-link.active,
+::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);
+}
+
 ::deep i {
 	color: var(--hx-sidebar-item-icon-color);
 	transition: transform .35s ease;
 	transform-origin: .5em 50%;
 }
 
-::deep a.nav-link:hover i,
-::deep a.nav-link.active i {
+::deep a.nav-link:hover i {
 	color: var(--hx-sidebar-item-hover-icon-color);
 }
 
+::deep a.nav-link.active i {
+	color: var(--hx-sidebar-item-active-icon-color);
+}
+
 ::deep .bi-chevron-right {
 	font-size: .75rem;
 	margin-left: .5rem;

diff --git a/Havit.Blazor.Components.Web.Bootstrap/wwwroot/defaults.css b/Havit.Blazor.Components.Web.Bootstrap/wwwroot/defaults.css
@@ -19,13 +19,17 @@
 	--hx-sidebar-item-font-size: 									1rem;
 	--hx-sidebar-item-padding: 										.75rem;
 	--hx-sidebar-item-color: 										var(--bs-body-color);
+	--hx-sidebar-item-icon-color: 									var(--bs-primary);
+	--hx-sidebar-item-border-radius: 								var(--bs-border-radius-lg);
+	--hx-sidebar-item-margin: 										0 0 .25rem 0;
 	--hx-sidebar-item-hover-color: 									var(--bs-primary);
 	--hx-sidebar-item-hover-background-color: 						var(--bs-primary-rgb);
 	--hx-sidebar-item-hover-background-opacity: 					.05;
 	--hx-sidebar-item-hover-icon-color: 							var(--bs-primary);
-	--hx-sidebar-item-icon-color: 									var(--bs-primary);
-	--hx-sidebar-item-border-radius: 								var(--bs-border-radius-lg);
-	--hx-sidebar-item-margin: 										0 0 .25rem 0;
+	--hx-sidebar-item-active-color: 								var(--bs-primary);
+	--hx-sidebar-item-active-background-color: 						var(--bs-primary-rgb);
+	--hx-sidebar-item-active-background-opacity: 					.05;
+	--hx-sidebar-item-active-icon-color: 							var(--bs-primary);
 	--hx-sidebar-subitem-font-size: 								.875rem;
 	--hx-sidebar-subitem-padding: 									.5rem;
 	--hx-sidebar-subitem-margin: 									0 0 .25rem 2rem;