Responsive condition to show/hide Sidebar brand

havit · Nov 15, 2024 · 8a8e157 · 8a8e157
1 parent a553f83
commit 8a8e157
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarBrand.razor b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarBrand.razor
@@ -8,8 +8,5 @@
 	{
 		<div class="hx-sidebar-brand-shortname">@BrandNameShort</div>
 	}
-	@if(!ParentSidebar.Collapsed)
-	{
-		<span class="hx-sidebar-brand-name">@BrandName</span>
-	}
+	<span class="@CssClassHelper.Combine("hx-sidebar-brand-name", ParentSidebar.Collapsed ? GetResponsiveCssClass("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,4 +29,18 @@ 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}")
+		};
+	}
 }