[HxSidebar] PR code cleanup

havit · Nov 19, 2024 · 0ad7abf · 0ad7abf
1 parent ac74120
commit 0ad7abf
Show file tree

Hide file tree

Showing 16 changed files with 86 additions and 106 deletions.
diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor
@@ -1,6 +1,6 @@
 @namespace Havit.Blazor.Components.Web.Bootstrap
 
-<div class="@CssClassHelper.Combine("hx-sidebar", GetResponsiveCssClass("flex-??-grow-0"), GetCollapsedCssClass(), CssClass)" id="@Id">
+<div class="@CssClassHelper.Combine("hx-sidebar", ResponsiveBreakpoint.GetCssClass("flex-??-grow-0"), GetCollapsedCssClass(), CssClass)" id="@Id">
 	<div class="nav-menu d-flex flex-column flex-grow-1 position-relative">
 
 		@if (HeaderTemplate is not null)
@@ -9,7 +9,7 @@
 				<CascadingValue Value="@(this)">
 					@HeaderTemplate
 				</CascadingValue>
-				<HxButton CssClass="@CssClassHelper.Combine("hx-sidebar-navbar-toggler", GetResponsiveCssClass("d-??-none"))"
+				<HxButton CssClass="@CssClassHelper.Combine("hx-sidebar-navbar-toggler", ResponsiveBreakpoint.GetCssClass("d-??-none"))"
 						  data-bs-toggle="collapse"
 						  data-bs-target="@($"#{NavContentElementId}")"
 						  aria-controls="@NavContentElementId"
@@ -19,14 +19,14 @@
 			</div>
 		}
 
-		<div class="@CssClassHelper.Combine("hx-sidebar-collapse collapse", GetResponsiveCssClass("d-??-flex"), (!Collapsed) ? "overflow-auto": null)" id="@NavContentElementId">
+		<div class="@CssClassHelper.Combine("hx-sidebar-collapse collapse", ResponsiveBreakpoint.GetCssClass("d-??-flex"), (!Collapsed) ? "overflow-auto": null)" id="@NavContentElementId">
 			<div class="hx-sidebar-body mb-auto w-100">
 				<HxNav Id="@_navId" Orientation="NavOrientation.Vertical">
 					<CascadingValue Value="@(this)" IsFixed="true">
 						@ItemsTemplate
 					</CascadingValue>
 				</HxNav>
-				<div class="@CssClassHelper.Combine("hx-sidebar-toggler", Collapsed ? "collapsed" : null, GetResponsiveCssClass("d-??-block"))"
+				<div class="@CssClassHelper.Combine("hx-sidebar-toggler", Collapsed ? "collapsed" : null, ResponsiveBreakpoint.GetCssClass("d-??-block"))"
 					 role="button"
 					 @onclick="HandleCollapseToggleClick"
 					 @onclick:stopPropagation="true">

diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor.cs b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor.cs
@@ -93,18 +93,4 @@ private async Task HandleCollapseToggleClick()
 		Collapsed = !Collapsed;
 		await InvokeCollapsedChangedAsync(Collapsed);
 	}
-
-	private string GetResponsiveCssClass(string cssClassPattern)
-	{
-		return ResponsiveBreakpoint switch
-		{
-			SidebarResponsiveBreakpoint.None => cssClassPattern.Replace("-??-", "-"), // !!! Simplified for the use case of this component.
-			SidebarResponsiveBreakpoint.Small => cssClassPattern.Replace("??", "sm"),
-			SidebarResponsiveBreakpoint.Medium => cssClassPattern.Replace("??", "md"),
-			SidebarResponsiveBreakpoint.Large => cssClassPattern.Replace("??", "lg"),
-			SidebarResponsiveBreakpoint.ExtraLarge => cssClassPattern.Replace("??", "xl"),
-			SidebarResponsiveBreakpoint.Xxl => cssClassPattern.Replace("??", "xxl"),
-			_ => throw new InvalidOperationException($"Unknown nameof(ResponsiveBreakpoint) value {ResponsiveBreakpoint}")
-		};
-	}
 }
diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarBrand.razor b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarBrand.razor
@@ -9,5 +9,5 @@
 	{
 		<div class="hx-sidebar-brand-shortname">@BrandNameShort</div>
 	}
-	<span class="@CssClassHelper.Combine("hx-sidebar-brand-name", ParentSidebar.Collapsed ? GetResponsiveCssClass("d-??-none") : null)">@BrandName</span>
+	<span class="@CssClassHelper.Combine("hx-sidebar-brand-name", ParentSidebar.Collapsed ? ParentSidebar.ResponsiveBreakpoint.GetCssClass("d-??-none") : null)">@BrandName</span>
 </a>
diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarBrand.razor.cs b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarBrand.razor.cs
@@ -29,18 +29,4 @@ protected override void OnParametersSet()
 	{
 		Contract.Requires<InvalidOperationException>(ParentSidebar is not null, $"{nameof(HxSidebarBrand)} has to be placed inside {nameof(HxSidebar)}.");
 	}
-
-	private string GetResponsiveCssClass(string cssClassPattern)
-	{
-		return ParentSidebar.ResponsiveBreakpoint switch
-		{
-			SidebarResponsiveBreakpoint.None => cssClassPattern.Replace("-??-", "-"), // !!! Simplified for the use case of this component.
-			SidebarResponsiveBreakpoint.Small => cssClassPattern.Replace("??", "sm"),
-			SidebarResponsiveBreakpoint.Medium => cssClassPattern.Replace("??", "md"),
-			SidebarResponsiveBreakpoint.Large => cssClassPattern.Replace("??", "lg"),
-			SidebarResponsiveBreakpoint.ExtraLarge => cssClassPattern.Replace("??", "xl"),
-			SidebarResponsiveBreakpoint.Xxl => cssClassPattern.Replace("??", "xxl"),
-			_ => throw new InvalidOperationException($"Unknown nameof(ResponsiveBreakpoint) value {ParentSidebar.ResponsiveBreakpoint}")
-		};
-	}
 }
diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarFooter.razor.cs b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarFooter.razor.cs
@@ -32,7 +32,7 @@ public partial class HxSidebarFooter
 	/// Any additional CSS class to add.
 	/// </summary>
 	[Parameter] public string CssClass { get; set; }
-	
+
 	/// <summary>
 	/// Any additional CSS class to add to inner text.
 	/// </summary>

diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItem.razor b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItem.razor
@@ -1,11 +1,11 @@
 @namespace Havit.Blazor.Components.Web.Bootstrap
+@using Havit.Blazor.Components.Web.Bootstrap.Internal
 <CascadingValue Value="this" IsFixed="true">
-	<div @key="@(GetHashCode() + ParentSidebar.Collapsed.ToString())"
+	<div @key="@ParentSidebar.Collapsed.ToString()"
 		 class="@CssClassHelper.Combine(HighlightOnActiveChild ? "hx-sidebar-item-highlight-on-active-child" : null)">
 		@if (!HasExpandableContent)
 		{
-			<HxTooltip @key="@(GetHashCode() + ParentSidebar.Collapsed.ToString())"
-					   WrapperCssClass="@(ParentSidebar.Collapsed ? "d-block" : null)"
+			<HxTooltip WrapperCssClass="@(ParentSidebar.Collapsed ? "d-block" : null)"
 					   Placement="TooltipPlacement.Right"
 					   Trigger="TooltipTrigger.Hover"
 					   Text="@(ParentSidebar.Collapsed ? TooltipText : null)">
@@ -20,38 +20,38 @@
 
 					@* To hide the nav-content in mobile view *@
 					<div data-bs-toggle="collapse" data-bs-target="#@ParentSidebar.NavContentElementId" class="stretched-link">
-						<HxSidebarItemNavLinkContent Text="@Text"
-												Icon="@Icon"
-												InnerCssClass="@((ParentSidebar.Collapsed && ParentSidebarItem is null) ? GetResponsiveCssClass("d-??-none") : null)"
-												ContentTemplate="@ContentTemplate" />
+						<HxSidebarItemNavLinkContentInternal Text="@Text"
+															 Icon="Icon"
+															 InnerCssClass="@((ParentSidebar.Collapsed && ParentSidebarItem is null) ? ParentSidebar.ResponsiveBreakpoint.GetCssClass("d-??-none") : null)"
+															 ContentTemplate="ContentTemplate" />
 
 					</div>
 				</HxNavLink>
 			</HxTooltip>
 		}
 		else
 		{
-			<HxDropdown Direction="DropdownDirection.End" CssClass="@CssClassHelper.Combine("hx-sidebar-item d-none", ParentSidebar.Collapsed ? GetResponsiveCssClass("d-??-block") : null)">
+			<HxDropdown Direction="DropdownDirection.End" CssClass="@CssClassHelper.Combine("hx-sidebar-item d-none", ParentSidebar.Collapsed ? ParentSidebar.ResponsiveBreakpoint.GetCssClass("d-??-block") : null)">
 				<HxNavLink Href="@Href"
-							Match="Match"
-							OnClick="@(OnClick.HasDelegate ? InvokeOnClickAsync : null)"
-							OnClickStopPropagation="OnClickStopPropagation"
-							OnClickPreventDefault="OnClickPreventDefault"
-							CssClass="@this.CssClass"
-							Enabled="Enabled"
-							role="button"
-							onmouseenter="bootstrap.Dropdown.getOrCreateInstance(event.target).show()"
-							onmouseleave="bootstrap.Dropdown.getInstance(event.target)?.hide()"
-							data-bs-toggle="@(!String.IsNullOrEmpty(Href) ? null : "collapse")"
-							data-bs-target="@(!ParentSidebar.Collapsed ? "#" + _id : null)"
-							aria-expanded="@(expanded ? "true" : "false")">
+						   Match="Match"
+						   OnClick="@(OnClick.HasDelegate ? InvokeOnClickAsync : null)"
+						   OnClickStopPropagation="OnClickStopPropagation"
+						   OnClickPreventDefault="OnClickPreventDefault"
+						   CssClass="@CssClass"
+						   Enabled="Enabled"
+						   role="button"
+						   onmouseenter="bootstrap.Dropdown.getOrCreateInstance(event.target).show()"
+						   onmouseleave="bootstrap.Dropdown.getInstance(event.target)?.hide()"
+						   data-bs-toggle="@(!String.IsNullOrEmpty(Href) ? null : "collapse")"
+						   data-bs-target="@(!ParentSidebar.Collapsed ? "#" + _id : null)"
+						   aria-expanded="@(expanded ? "true" : "false")">
 
-					<HxSidebarItemNavLinkContent Text="@Text"
-												Icon="@Icon"
-												ContentTemplate="@ContentTemplate"
-												InnerCssClass="@CssClassHelper.Combine(ParentSidebar.Collapsed ? "d-none" : null)"
-												Expandable="true"
-												Expanded="@expanded" />
+					<HxSidebarItemNavLinkContentInternal Text="@Text"
+														 Icon="Icon"
+														 ContentTemplate="ContentTemplate"
+														 InnerCssClass="@CssClassHelper.Combine(ParentSidebar.Collapsed ? "d-none" : null)"
+														 Expandable="true"
+														 Expanded="expanded" />
 
 					<HxDropdownMenu CssClass="hx-sidebar-subitems">
 						@ChildContent
@@ -61,29 +61,29 @@
 			</HxDropdown>
 
 			<HxNavLink Href="@Href"
-						CssClass="@CssClassHelper.Combine(CssClass, "hx-sidebar-item", ParentSidebar.Collapsed ? GetResponsiveCssClass("d-??-none") : null)"
-						Match="Match"
-						Enabled="Enabled"
-						OnClick="HandleExpandableItemClick"
-						OnClickStopPropagation="OnClickStopPropagation"
-						OnClickPreventDefault="OnClickPreventDefault"
-						role="button"
-						data-bs-toggle="@(!String.IsNullOrEmpty(Href) ? null : "collapse")"
-						data-bs-target="@("#" + _id)"
-						aria-expanded="@(expanded ? "true" : "false")">
+					   CssClass="@CssClassHelper.Combine(CssClass, "hx-sidebar-item", ParentSidebar.Collapsed ? ParentSidebar.ResponsiveBreakpoint.GetCssClass("d-??-none") : null)"
+					   Match="Match"
+					   Enabled="Enabled"
+					   OnClick="HandleExpandableItemClick"
+					   OnClickStopPropagation="OnClickStopPropagation"
+					   OnClickPreventDefault="OnClickPreventDefault"
+					   role="button"
+					   data-bs-toggle="@(!String.IsNullOrEmpty(Href) ? null : "collapse")"
+					   data-bs-target="@("#" + _id)"
+					   aria-expanded="@(expanded ? "true" : "false")">
 
-				<HxSidebarItemNavLinkContent Text="@Text"
-						Icon="@Icon"
-						ContentTemplate="@ContentTemplate"
-						Expandable="true"
-						Expanded="@expanded" />
+				<HxSidebarItemNavLinkContentInternal Text="@Text"
+													 Icon="Icon"
+													 ContentTemplate="ContentTemplate"
+													 Expandable="true"
+													 Expanded="expanded" />
 
 			</HxNavLink>
 
 			<HxCollapse Id="@_id"
 						Parent="@(ParentSidebar.MultipleItemsExpansion ? null : $"#{ParentSidebar._navId}")"
 						@ref="collapseComponent"
-						CssClass="@CssClassHelper.Combine("hx-sidebar-subitems", ParentSidebar.Collapsed ? GetResponsiveCssClass("d-??-none") : null)"
+						CssClass="@CssClassHelper.Combine("hx-sidebar-subitems", ParentSidebar.Collapsed ? ParentSidebar.ResponsiveBreakpoint.GetCssClass("d-??-none") : null)"
 						InitiallyExpanded="expanded"
 						OnShown="HandleCollapseShown"
 						OnHidden="HandleCollapseHidden">

diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItem.razor.cs b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItem.razor.cs
@@ -249,17 +249,4 @@ private static bool IsStrictlyPrefixWithSeparator(string value, string prefix)
 		}
 	}
 	#endregion
-	private string GetResponsiveCssClass(string cssClassPattern)
-	{
-		return ParentSidebar.ResponsiveBreakpoint switch
-		{
-			SidebarResponsiveBreakpoint.None => cssClassPattern.Replace("-??-", "-"), // !!! Simplified for the use case of this component.
-			SidebarResponsiveBreakpoint.Small => cssClassPattern.Replace("??", "sm"),
-			SidebarResponsiveBreakpoint.Medium => cssClassPattern.Replace("??", "md"),
-			SidebarResponsiveBreakpoint.Large => cssClassPattern.Replace("??", "lg"),
-			SidebarResponsiveBreakpoint.ExtraLarge => cssClassPattern.Replace("??", "xl"),
-			SidebarResponsiveBreakpoint.Xxl => cssClassPattern.Replace("??", "xxl"),
-			_ => throw new InvalidOperationException($"Unknown nameof(ResponsiveBreakpoint) value {ParentSidebar.ResponsiveBreakpoint}")
-		};
-	}
 }
diff --git a/...igation/HxSidebarItemNavLinkContent.razor → ...HxSidebarItemNavLinkContentInternal.razor b/...igation/HxSidebarItemNavLinkContent.razor → ...HxSidebarItemNavLinkContentInternal.razor
@@ -1,4 +1,4 @@
-@namespace Havit.Blazor.Components.Web.Bootstrap
+@namespace Havit.Blazor.Components.Web.Bootstrap.Internal
 
 <div class="hx-sidebar-item-navlink-content">
     @if (Icon is not null)

diff --git a/...tion/HxSidebarItemNavLinkContent.razor.cs → ...idebarItemNavLinkContentInternal.razor.cs b/...tion/HxSidebarItemNavLinkContent.razor.cs → ...idebarItemNavLinkContentInternal.razor.cs
@@ -1,9 +1,9 @@
-namespace Havit.Blazor.Components.Web.Bootstrap;
+namespace Havit.Blazor.Components.Web.Bootstrap.Internal;
 
 /// <summary>
-/// Innter content of the <see cref="HxSidebarItem"/>.
+/// Inner content of the <see cref="HxSidebarItem"/>.
 /// </summary>
-public partial class HxSidebarItemNavLinkContent
+public partial class HxSidebarItemNavLinkContentInternal
 {
 	[Parameter] public string Text { get; set; }
 	[Parameter] public bool Expandable { get; set; }

diff --git a/...ion/HxSidebarItemNavLinkContent.razor.css → ...debarItemNavLinkContentInternal.razor.css b/...ion/HxSidebarItemNavLinkContent.razor.css → ...debarItemNavLinkContentInternal.razor.css
diff --git a/...rap/Navigation/SidebarMobileBreakpoint.cs → ...Navigation/SidebarResponsiveBreakpoint.cs b/...rap/Navigation/SidebarMobileBreakpoint.cs → ...Navigation/SidebarResponsiveBreakpoint.cs
diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/SidebarResponsiveBreakpointExtensions.cs b/Havit.Blazor.Components.Web.Bootstrap/Navigation/SidebarResponsiveBreakpointExtensions.cs
@@ -0,0 +1,18 @@
+namespace Havit.Blazor.Components.Web.Bootstrap;
+
+public static class SidebarResponsiveBreakpointExtensions
+{
+	public static string GetCssClass(this SidebarResponsiveBreakpoint breakpoint, string cssClassPattern)
+	{
+		return breakpoint switch
+		{
+			SidebarResponsiveBreakpoint.None => cssClassPattern.Replace("-??-", "-"), // !!! Simplified for the use case of this component.
+			SidebarResponsiveBreakpoint.Small => cssClassPattern.Replace("??", "sm"),
+			SidebarResponsiveBreakpoint.Medium => cssClassPattern.Replace("??", "md"),
+			SidebarResponsiveBreakpoint.Large => cssClassPattern.Replace("??", "lg"),
+			SidebarResponsiveBreakpoint.ExtraLarge => cssClassPattern.Replace("??", "xl"),
+			SidebarResponsiveBreakpoint.Xxl => cssClassPattern.Replace("??", "xxl"),
+			_ => throw new InvalidOperationException($"Unknown {nameof(SidebarResponsiveBreakpoint)} value {breakpoint}.")
+		};
+	}
+}
diff --git a/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_Colors.razor b/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_Colors.razor
@@ -1,4 +1,13 @@
-<div class="d-flex border rounded-3 overflow-hidden">
+<style>
+	/* Demonstration purposes only. Put this CSS into your application's CSS file or into the component's CSS file. */
+	.my-sidebar {
+		--hx-sidebar-item-hover-color: var(--bs-dark);
+		--hx-sidebar-item-active-background-color: var(--bs-dark-rgb);
+		--hx-sidebar-item-hover-background-color: var(--bs-dark-rgb);
+		--hx-sidebar-item-icon-color: var(--bs-secondary);
+	}
+</style>
+<div class="my-sidebar d-flex border rounded-3 overflow-hidden">
 	<HxSidebar CssClass="text-bg-light">
 		<HeaderTemplate>
 			<HxSidebarBrand BrandName="Brand name" BrandNameShort="BN" />

diff --git a/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_Colors.razor.css b/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_Colors.razor.css
diff --git a/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Documentation.razor b/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Documentation.razor
@@ -8,7 +8,7 @@
         <DocHeading Title="Basic usage" />
         <Demo Type="typeof(HxSidebar_Demo)" />
 
-        <DocHeading Title="Inverted (dark) variant" />
+        <DocHeading Title="Inverted (dark) variant" Id="dark" />
         <p>Similarly to Bootstrap Navbar, the Sidebar color can be inverted with <code>data-bs-theme="dark"</code> attribute on parent <code>div</code>.</p>
         <Demo Type="typeof(HxSidebar_Demo_Dark)" />
 

diff --git a/Havit.Blazor.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml b/Havit.Blazor.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml
@@ -2578,6 +2578,11 @@
             Prevents the default action for the onclick event. Default is <c>null</c>, which means <c>true</c> when <see cref="P:Havit.Blazor.Components.Web.Bootstrap.Internal.HxNavLinkInternal.OnClick"/> is set.
             </summary>
         </member>
+        <member name="T:Havit.Blazor.Components.Web.Bootstrap.Internal.HxSidebarItemNavLinkContentInternal">
+            <summary>
+            Inner content of the <see cref="T:Havit.Blazor.Components.Web.Bootstrap.HxSidebarItem"/>.
+            </summary>
+        </member>
         <member name="P:Havit.Blazor.Components.Web.Bootstrap.Internal.HxInputTagsInputInternal.Offset">
             <summary>
             Offset between dropdown input and dropdown menu
@@ -8832,11 +8837,6 @@
             Sub-items (not intended to be used for any other purpose).
             </summary>
         </member>
-        <member name="T:Havit.Blazor.Components.Web.Bootstrap.HxSidebarItemNavLinkContent">
-            <summary>
-            Innter content of the <see cref="T:Havit.Blazor.Components.Web.Bootstrap.HxSidebarItem"/>.
-            </summary>
-        </member>
         <member name="T:Havit.Blazor.Components.Web.Bootstrap.NavbarExpand">
             <summary>
             Responsive expand setting (breakpoint) for <see cref="T:Havit.Blazor.Components.Web.Bootstrap.HxNavbar"/>.