To add Sidebar colors demo, fixed SidebarFooter overflowing on Collap…

…se, reverted default border radius of SidebarItem to regular (was large), + docs adjustment
havit · Nov 19, 2024 · 9292f2d · 9292f2d
1 parent 17aa60f
commit 9292f2d
Show file tree

Hide file tree

Showing 21 changed files with 128 additions and 54 deletions.
diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarBrand.razor b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarBrand.razor
@@ -1,4 +1,5 @@
 @namespace Havit.Blazor.Components.Web.Bootstrap
+
 <a class="hx-sidebar-brand" href="./">
 	@if (LogoTemplate != null)
 	{

diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarFooter.razor b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarFooter.razor
@@ -9,10 +9,9 @@
             {
                 <HxIcon Icon="Icon" />
             }
-            <span class="hx-sidebar-footer-item-navlink-content-inner">
+            <span class="@CssClassHelper.Combine("hx-sidebar-footer-item-navlink-content-inner", TextCssClass)">
                 @Text
             </span>
         </div>
-
     </HxNavLink>
 </div>
diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarFooter.razor.cs b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarFooter.razor.cs
@@ -29,10 +29,14 @@ public partial class HxSidebarFooter
 	[Parameter] public NavLinkMatch? Match { get; set; } = NavLinkMatch.Prefix;
 
 	/// <summary>
-	/// Allows you to disable the item with <c>false</c>.
-	/// The default value is <c>true</c>.
+	/// Any additional CSS class to add.
 	/// </summary>
 	[Parameter] public string CssClass { get; set; }
+
+	/// <summary>
+	/// Any additional CSS class to add to inner text.
+	/// </summary>
+	[Parameter] public string TextCssClass { get; set; }
 
 	/// <summary>
 	/// Sub-items (not intended to be used for any other purpose).

diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItem.razor b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItem.razor
@@ -31,7 +31,6 @@
 		}
 		else
 		{
-
 			<HxDropdown Direction="DropdownDirection.End" CssClass="@CssClassHelper.Combine("hx-sidebar-item d-none", ParentSidebar.Collapsed ? GetResponsiveCssClass("d-??-block") : null)">
 				<HxNavLink Href="@Href"
 							Match="Match"

diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItem.razor.cs b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItem.razor.cs
@@ -249,7 +249,6 @@ private static bool IsStrictlyPrefixWithSeparator(string value, string prefix)
 		}
 	}
 	#endregion
-
 	private string GetResponsiveCssClass(string cssClassPattern)
 	{
 		return ParentSidebar.ResponsiveBreakpoint switch

diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItem.razor.css b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItem.razor.css
@@ -46,30 +46,7 @@
 	font-weight: var(--hx-sidebar-parent-item-active-font-weight);
 }
 
-::deep i {
-	color: var(--hx-sidebar-item-icon-color);
-	transition: transform .35s ease;
-	transform-origin: .5em 50%;
-}
-
-::deep a.nav-link:hover .hx-sidebar-item-icon {
-	color: var(--hx-sidebar-item-hover-icon-color);
-}
-
-::deep a.nav-link.active .hx-sidebar-item-icon {
-	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 .hx-sidebar-item-icon {
-	color: var(--hx-sidebar-parent-item-active-icon-color);
-}
-
-::deep .bi-chevron-right {
-	font-size: .75rem;
-	margin-left: .5rem;
-}
-
 ::deep .dropdown-menu {
-	max-height: 100vh;
+	max-height: 75vh;
 	overflow: auto;
 }
diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItemNavLinkContent.razor b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItemNavLinkContent.razor
@@ -14,17 +14,6 @@
     </span>
     @if (Expandable)
     {
-        <HxIcon Icon="@BootstrapIcon.ChevronDown" CssClass="@CssClassHelper.Combine(InnerCssClass, "expand-icon")" />
+        <HxIcon Icon="@BootstrapIcon.ChevronRight" CssClass="@CssClassHelper.Combine(InnerCssClass, "expand-icon")" />
     }
-</div>
-
-@code
-{
-    [Parameter] public string Text { get; set; }
-    [Parameter] public bool Expandable { get; set; }
-
-    [Parameter] public bool? Expanded { get; set; }
-    [Parameter] public IconBase Icon { get; set; }
-    [Parameter] public string InnerCssClass { get; set; }
-    [Parameter] public RenderFragment<SidebarItemContentTemplateContext> ContentTemplate { get; set; }
-}   
+</div>
diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItemNavLinkContent.razor.cs b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItemNavLinkContent.razor.cs
@@ -0,0 +1,14 @@
+namespace Havit.Blazor.Components.Web.Bootstrap;
+
+/// <summary>
+/// Innter content of the <see cref="HxSidebarItem"/>.
+/// </summary>
+public partial class HxSidebarItemNavLinkContent
+{
+	[Parameter] public string Text { get; set; }
+	[Parameter] public bool Expandable { get; set; }
+	[Parameter] public bool? Expanded { get; set; }
+	[Parameter] public IconBase Icon { get; set; }
+	[Parameter] public string InnerCssClass { get; set; }
+	[Parameter] public RenderFragment<SidebarItemContentTemplateContext> ContentTemplate { get; set; }
+}
diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItemNavLinkContent.razor.css b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItemNavLinkContent.razor.css
@@ -14,4 +14,27 @@
 	display: flex;
 	align-items: center;
 	flex-grow: 1;
+}
+
+::deep .expand-icon {
+	font-size: .75rem;
+	color: var(--hx-sidebar-item-icon-color);
+	transition: transform .35s ease;
+	transform-origin: .5em 50%;
+}
+
+::deep .hx-sidebar-item-icon {
+	color: var(--hx-sidebar-item-icon-color);
+}
+
+a.nav-link:hover ::deep .hx-sidebar-item-icon {
+	color: var(--hx-sidebar-item-hover-icon-color);
+}
+
+a.nav-link.active ::deep .hx-sidebar-item-icon {
+	color: var(--hx-sidebar-item-active-icon-color);
+}
+
+.hx-sidebar-item-highlight-on-active-child:has(.hx-sidebar-subitems .nav-link.active) > .hx-sidebar-item ::deep .hx-sidebar-item-icon {
+	color: var(--hx-sidebar-parent-item-active-icon-color);
 }
diff --git a/Havit.Blazor.Components.Web.Bootstrap/wwwroot/defaults.lib.css b/Havit.Blazor.Components.Web.Bootstrap/wwwroot/defaults.lib.css
@@ -21,7 +21,7 @@
 	--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-border-radius: 								var(--bs-border-radius);
 	--hx-sidebar-item-margin: 										0;
 	--hx-sidebar-item-hover-color: 									var(--bs-primary);
 	--hx-sidebar-item-hover-background-color: 						var(--bs-primary-rgb);

diff --git a/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo.razor b/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo.razor
@@ -1,4 +1,4 @@
-<div class="d-flex border rounded-3">
+<div class="d-flex border rounded-3 overflow-hidden">
 	<HxSidebar>
 		<HeaderTemplate>
 			<HxSidebarBrand BrandName="Brand name" BrandNameShort="BN" />
@@ -19,7 +19,7 @@
 		</ItemsTemplate>
 
 		<FooterTemplate>
-			<HxSidebarFooter Icon="BootstrapIcon.Person" Text="@(context.SidebarCollapsed ? null : "Login")" Href="/components/HxSidebar/login" />
+			<HxSidebarFooter Icon="BootstrapIcon.Person" TextCssClass="@(context.SidebarCollapsed ? "d-md-none" : null)" Text="Login" Href="/components/HxSidebar/login" />
 		</FooterTemplate>
 	</HxSidebar>
 </div>
diff --git a/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_Colors.razor b/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_Colors.razor
@@ -0,0 +1,25 @@
+<div class="d-flex border rounded-3 overflow-hidden">
+	<HxSidebar CssClass="text-bg-light">
+		<HeaderTemplate>
+			<HxSidebarBrand BrandName="Brand name" BrandNameShort="BN" />
+		</HeaderTemplate>
+
+		<ItemsTemplate>
+			<HxSidebarItem Text="Dashboard" Icon="BootstrapIcon.Columns" TooltipText="Dashboard" Href="/components/HxSidebar/dashboard" />
+			<HxSidebarItem Text="Employees" Icon="BootstrapIcon.People">
+				<HxSidebarItem Text="Overview" Href="/components/HxSidebar/employees" />
+				<HxSidebarItem Text="Absences" Href="/components/HxSidebar/absences" />
+			</HxSidebarItem>
+			<HxSidebarItem Text="Mine (with icons)" Icon="BootstrapIcon.Person">
+				<HxSidebarItem Text="Overview" Icon="BootstrapIcon.Wallet2" Href="/components/HxSidebar/mine" Match="NavLinkMatch.All" />
+				<HxSidebarItem Text="Timesheets" Icon="BootstrapIcon.Clock" Href="/components/HxSidebar/mine/timesheets" />
+				<HxSidebarItem Text="Absences" Icon="BootstrapIcon.Exclamation" Href="/components/HxSidebar/mine/absences" />
+			</HxSidebarItem>
+			<HxSidebarItem Text="Administration" Icon="BootstrapIcon.Gear" Href="/components/HxSidebar/admin" />
+		</ItemsTemplate>
+
+		<FooterTemplate>
+			<HxSidebarFooter Icon="BootstrapIcon.Person" TextCssClass="@(context.SidebarCollapsed ? "d-md-none" : null)" Text="Login" Href="/components/HxSidebar/login" />
+		</FooterTemplate>
+	</HxSidebar>
+</div>
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
@@ -0,0 +1,6 @@
+div {
+    --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);
+}
diff --git a/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_Dark.razor b/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_Dark.razor
@@ -0,0 +1,25 @@
+<div class="d-flex border rounded-3 overflow-hidden" data-bs-theme="dark">
+	<HxSidebar>
+		<HeaderTemplate>
+			<HxSidebarBrand BrandName="Brand name" BrandNameShort="BN" />
+		</HeaderTemplate>
+
+		<ItemsTemplate>
+			<HxSidebarItem Text="Dashboard" Icon="BootstrapIcon.Columns" TooltipText="Dashboard" Href="/components/HxSidebar/dashboard" />
+			<HxSidebarItem Text="Employees" Icon="BootstrapIcon.People">
+				<HxSidebarItem Text="Overview" Href="/components/HxSidebar/employees" />
+				<HxSidebarItem Text="Absences" Href="/components/HxSidebar/absences" />
+			</HxSidebarItem>
+			<HxSidebarItem Text="Mine (with icons)" Icon="BootstrapIcon.Person">
+				<HxSidebarItem Text="Overview" Icon="BootstrapIcon.Wallet2" Href="/components/HxSidebar/mine" Match="NavLinkMatch.All" />
+				<HxSidebarItem Text="Timesheets" Icon="BootstrapIcon.Clock" Href="/components/HxSidebar/mine/timesheets" />
+				<HxSidebarItem Text="Absences" Icon="BootstrapIcon.Exclamation" Href="/components/HxSidebar/mine/absences" />
+			</HxSidebarItem>
+			<HxSidebarItem Text="Administration" Icon="BootstrapIcon.Gear" Href="/components/HxSidebar/admin" />
+		</ItemsTemplate>
+
+		<FooterTemplate>
+			<HxSidebarFooter Icon="BootstrapIcon.Person" TextCssClass="@(context.SidebarCollapsed ? "d-md-none" : null)" Text="Login" Href="/components/HxSidebar/login" />
+		</FooterTemplate>
+	</HxSidebar>
+</div>
diff --git a/...Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_ItemCustomContent.razor b/...Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_ItemCustomContent.razor
@@ -1,4 +1,4 @@
-<div class="d-flex border rounded-3">
+<div class="d-flex border rounded-3 overflow-hidden">
     <HxSidebar>
         <HeaderTemplate>
 			<HxSidebarBrand BrandName="Brand name" BrandNameShort="BN" />

diff --git a/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_Logo.razor b/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_Logo.razor
@@ -1,4 +1,4 @@
-<div class="d-flex border rounded-3">
+<div class="d-flex border rounded-3 overflow-hidden">
 	<HxSidebar>
 		<HeaderTemplate>
 			<HxSidebarBrand BrandName="HAVIT Blazor">

diff --git a/...r.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_MultipleItemsExpansion.razor b/...r.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_MultipleItemsExpansion.razor
@@ -1,4 +1,4 @@
-<div class="d-flex border rounded-3">
+<div class="d-flex border rounded-3 overflow-hidden">
 	<HxSidebar MultipleItemsExpansion="false">
 		<HeaderTemplate>
 			<HxSidebarBrand BrandName="Brand name" BrandNameShort="BN" />

diff --git a/...entation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_ProgramaticallyExpandCollapse.razor b/...entation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_ProgramaticallyExpandCollapse.razor
@@ -1,4 +1,4 @@
-<div class="d-flex border rounded-3 mb-3">
+<div class="d-flex border rounded-3 mb-3 overflow-hidden">
 	<HxSidebar @bind-Collapsed="Collapsed">
 		<HeaderTemplate>
 			<HxSidebarBrand BrandName="Brand name" BrandNameShort="BN"/>
@@ -19,7 +19,7 @@
 		</ItemsTemplate>
 
 		<FooterTemplate>
-			<HxSidebarFooter Href="/components/HxSidebar/login" Icon="BootstrapIcon.Person" Text="@(context.SidebarCollapsed ? null : "Login")" />
+			<HxSidebarFooter Icon="BootstrapIcon.Person" TextCssClass="@(context.SidebarCollapsed ? "d-md-none" : null)" Text="Login" Href="/components/HxSidebar/login" />
 		</FooterTemplate>
 	</HxSidebar>
 </div>

diff --git a/...t.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_TogglerTemplate.razor b/...t.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_TogglerTemplate.razor
@@ -1,4 +1,4 @@
-<div class="d-flex border rounded-3">
+<div class="d-flex border rounded-3 overflow-hidden">
 	<HxSidebar>
 		<TogglerTemplate>
 			<div class="d-flex">
@@ -38,7 +38,7 @@
 		</ItemsTemplate>
 
 		<FooterTemplate>
-			<HxSidebarFooter Href="/components/HxSidebar/login" Icon="BootstrapIcon.Person" Text="@(context.SidebarCollapsed ? null : "Login")" />
+			<HxSidebarFooter Icon="BootstrapIcon.Person" TextCssClass="@(context.SidebarCollapsed ? "d-md-none" : null)" Text="Login" Href="/components/HxSidebar/login" />
 		</FooterTemplate>
 	</HxSidebar>
 </div>
diff --git a/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Documentation.razor b/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Documentation.razor
@@ -8,6 +8,14 @@
         <DocHeading Title="Basic usage" />
         <Demo Type="typeof(HxSidebar_Demo)" />
 
+        <DocHeading Title="Inverted (dark) variant" />
+        <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)" />
+
+        <DocHeading Title="Colors" />
+        <p>Similarly to Bootstrap Navbar, you can use utility classes to create any color variation eg. <code>text-bg-light</code>. Colors of the active/hover states need to be fine-tuned via CSS vars.</p>
+        <Demo Type="typeof(HxSidebar_Demo_Colors)" />
+
         <DocHeading Title="Logo" />
         <p>Use your own custom logo in the sidebar header by setting the <code>LogoTemplate</code> parameter (<code>RenderFragment</code>) on the <code>HxSidebarBrand</code> component.</p>
         <Demo Type="typeof(HxSidebar_Demo_Logo)" />
@@ -71,7 +79,7 @@
 		<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)">
+		<ComponentApiDocCssVariable Name="--hx-sidebar-item-border-radius" Default="var(--bs-border-radius)">
 			Border radius of the items.
 		</ComponentApiDocCssVariable>
 		<ComponentApiDocCssVariable Name="--hx-sidebar-item-hover-color" Default="var(--bs-primary)">

diff --git a/Havit.Blazor.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml b/Havit.Blazor.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml
@@ -8828,6 +8828,11 @@
             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"/>.
-Original file line number
+Diff line change
@@ Expand Up / @@ -31,7 +31,6 @@ @@
     		}
     		else
     		{
     			<HxDropdown Direction="DropdownDirection.End" CssClass="@CssClassHelper.Combine("hx-sidebar-item d-none", ParentSidebar.Collapsed ? GetResponsiveCssClass("d-??-block") : null)">
     				<HxNavLink Href="@Href"
     							Match="Match"
@@ Expand Down @@