Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[HxSidebar] responsive collapsing #943

Merged
merged 7 commits into from
Nov 19, 2024
Merged

[HxSidebar] responsive collapsing #943

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0d8e0eb
Responsive sidebar collapsing WIP
crdo Nov 15, 2024
a553f83
HxSidebarItem - force re-rendering when Collapsed changed
hakenr Nov 15, 2024
8a8e157
Responsive condition to show/hide Sidebar brand
crdo Nov 15, 2024
17aa60f
Fix items text missing on sidebar collapse
crdo Nov 15, 2024
9292f2d
To add Sidebar colors demo, fixed SidebarFooter overflowing on Collap…
crdo Nov 19, 2024
ac74120
Fixes #719
crdo Nov 19, 2024
0ad7abf
[HxSidebar] PR code cleanup
hakenr Nov 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
106 changes: 53 additions & 53 deletions Directory.Packages.props
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,54 +1,54 @@
<Project>
<PropertyGroup>
<ManagePackageVersionsCentrally>true</ManagePackageVersionsCentrally>
<CentralPackageTransitivePinningEnabled>true</CentralPackageTransitivePinningEnabled>
<AspNetCoreVersion8>8.0.11</AspNetCoreVersion8>
<AspNetCoreVersion9>9.0.0</AspNetCoreVersion9>
</PropertyGroup>
<ItemGroup>
<PackageVersion Include="Blazored.FluentValidation" Version="2.2.0" />
<PackageVersion Include="bunit.web" Version="1.36.0" />
<PackageVersion Include="Grpc.AspNetCore.Web" Version="2.66.0" />
<PackageVersion Include="Grpc.Net.Client" Version="2.66.0" />
<PackageVersion Include="Grpc.Net.Client.Web" Version="2.66.0" />
<PackageVersion Include="Havit.Core" Version="2.0.31" />
<PackageVersion Include="Havit.AspNetCore" Version="2.0.22" />
<PackageVersion Include="LoxSmoke.DocXml" Version="3.7.1" />
<PackageVersion Include="Microsoft.AspNetCore.Components.Web" Version="$(AspNetCoreVersion9)" Condition="'$(TargetFramework)' == 'net9.0'" />
<PackageVersion Include="Microsoft.AspNetCore.Components.Web" Version="$(AspNetCoreVersion8)" Condition="'$(TargetFramework)' == 'net8.0'" />
<PackageVersion Include="Microsoft.AspNetCore.Components.WebAssembly.Authentication" Version="$(AspNetCoreVersion9)" Condition="'$(TargetFramework)' == 'net9.0'" />
<PackageVersion Include="Microsoft.AspNetCore.Components.WebAssembly.Authentication" Version="$(AspNetCoreVersion8)" Condition="'$(TargetFramework)' == 'net8.0'" />
<PackageVersion Include="Microsoft.AspNetCore.Components.WebAssembly" Version="$(AspNetCoreVersion9)" Condition="'$(TargetFramework)' == 'net9.0'"/>
<PackageVersion Include="Microsoft.AspNetCore.Components.WebAssembly" Version="$(AspNetCoreVersion8)" Condition="'$(TargetFramework)' == 'net8.0'"/>
<PackageVersion Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="$(AspNetCoreVersion9)" />
<PackageVersion Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="$(AspNetCoreVersion9)" />
<PackageVersion Include="Microsoft.CodeAnalysis.CSharp" Version="4.11.0" />
<PackageVersion Include="Microsoft.EntityFrameworkCore.SqlServer" Version="9.0.0" />
<PackageVersion Include="Microsoft.Extensions.Localization" Version="9.0.0" />
<PackageVersion Include="Microsoft.Extensions.Localization.Abstractions" Version="9.0.0" />
<PackageVersion Include="Moq" Version="4.20.72" />
<PackageVersion Include="MSTest" Version="3.6.3" />
<PackageVersion Include="protobuf-net" Version="3.2.45" />
<PackageVersion Include="protobuf-net.Grpc" Version="1.2.2" />
<PackageVersion Include="protobuf-net.Grpc.AspNetCore" Version="1.2.2" />
<PackageVersion Include="protobuf-net.Grpc.ClientFactory" Version="1.2.2" />
<PackageVersion Include="SmartComponents.AspNetCore" Version="0.1.0-preview10148" />
<PackageVersion Include="SmartComponents.AspNetCore.Components" Version="0.1.0-preview10148" />
<PackageVersion Include="SmartComponents.Inference.OpenAI" Version="0.1.0-preview10148" />
<PackageVersion Include="SmartComponents.LocalEmbeddings" Version="0.1.0-preview10148" />
<PackageVersion Include="System.Text.Json" Version="9.0.0" />
</ItemGroup>
<ItemGroup>
<!-- https://github.com/microsoft/MSBuildSdks/tree/main/src/CopyOnWrite -->
<GlobalPackageReference Include="Microsoft.Build.CopyOnWrite" Version="1.0.334">
<PrivateAssets>all</PrivateAssets>
<IncludeAssets>runtime; build; native; contentfiles; analyzers</IncludeAssets>
</GlobalPackageReference>
</ItemGroup>
<ItemGroup Condition="'$(ProjectName.EndsWith(`Tests`))' == 'False'">
<GlobalPackageReference Include="Microsoft.VisualStudio.Threading.Analyzers" Version="17.12.19">
<PrivateAssets>all</PrivateAssets>
<IncludeAssets>runtime; build; native; contentfiles; analyzers</IncludeAssets>
</GlobalPackageReference>
</ItemGroup>
<Project>
<PropertyGroup>
<ManagePackageVersionsCentrally>true</ManagePackageVersionsCentrally>
<CentralPackageTransitivePinningEnabled>true</CentralPackageTransitivePinningEnabled>
<AspNetCoreVersion8>8.0.11</AspNetCoreVersion8>
<AspNetCoreVersion9>9.0.0</AspNetCoreVersion9>
</PropertyGroup>
<ItemGroup>
<PackageVersion Include="Blazored.FluentValidation" Version="2.2.0" />
<PackageVersion Include="bunit.web" Version="1.36.0" />
<PackageVersion Include="Grpc.AspNetCore.Web" Version="2.66.0" />
<PackageVersion Include="Grpc.Net.Client" Version="2.66.0" />
<PackageVersion Include="Grpc.Net.Client.Web" Version="2.66.0" />
<PackageVersion Include="Havit.Core" Version="2.0.31" />
<PackageVersion Include="Havit.AspNetCore" Version="2.0.22" />
<PackageVersion Include="LoxSmoke.DocXml" Version="3.7.1" />
<PackageVersion Include="Microsoft.AspNetCore.Components.Web" Version="$(AspNetCoreVersion9)" Condition="'$(TargetFramework)' == 'net9.0'" />
<PackageVersion Include="Microsoft.AspNetCore.Components.Web" Version="$(AspNetCoreVersion8)" Condition="'$(TargetFramework)' == 'net8.0'" />
<PackageVersion Include="Microsoft.AspNetCore.Components.WebAssembly.Authentication" Version="$(AspNetCoreVersion9)" Condition="'$(TargetFramework)' == 'net9.0'" />
<PackageVersion Include="Microsoft.AspNetCore.Components.WebAssembly.Authentication" Version="$(AspNetCoreVersion8)" Condition="'$(TargetFramework)' == 'net8.0'" />
<PackageVersion Include="Microsoft.AspNetCore.Components.WebAssembly" Version="$(AspNetCoreVersion9)" Condition="'$(TargetFramework)' == 'net9.0'"/>
<PackageVersion Include="Microsoft.AspNetCore.Components.WebAssembly" Version="$(AspNetCoreVersion8)" Condition="'$(TargetFramework)' == 'net8.0'"/>
<PackageVersion Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="$(AspNetCoreVersion9)" />
<PackageVersion Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="$(AspNetCoreVersion9)" />
<PackageVersion Include="Microsoft.CodeAnalysis.CSharp" Version="4.11.0" />
<PackageVersion Include="Microsoft.EntityFrameworkCore.SqlServer" Version="9.0.0" />
<PackageVersion Include="Microsoft.Extensions.Localization" Version="9.0.0" />
<PackageVersion Include="Microsoft.Extensions.Localization.Abstractions" Version="9.0.0" />
<PackageVersion Include="Moq" Version="4.20.72" />
<PackageVersion Include="MSTest" Version="3.6.3" />
<PackageVersion Include="protobuf-net" Version="3.2.45" />
<PackageVersion Include="protobuf-net.Grpc" Version="1.2.2" />
<PackageVersion Include="protobuf-net.Grpc.AspNetCore" Version="1.2.2" />
<PackageVersion Include="protobuf-net.Grpc.ClientFactory" Version="1.2.2" />
<PackageVersion Include="SmartComponents.AspNetCore" Version="0.1.0-preview10148" />
<PackageVersion Include="SmartComponents.AspNetCore.Components" Version="0.1.0-preview10148" />
<PackageVersion Include="SmartComponents.Inference.OpenAI" Version="0.1.0-preview10148" />
<PackageVersion Include="SmartComponents.LocalEmbeddings" Version="0.1.0-preview10148" />
<PackageVersion Include="System.Text.Json" Version="9.0.0" />
</ItemGroup>
<ItemGroup>
<!-- https://github.com/microsoft/MSBuildSdks/tree/main/src/CopyOnWrite -->
<GlobalPackageReference Include="Microsoft.Build.CopyOnWrite" Version="1.0.334">
<PrivateAssets>all</PrivateAssets>
<IncludeAssets>runtime; build; native; contentfiles; analyzers</IncludeAssets>
</GlobalPackageReference>
</ItemGroup>
<ItemGroup Condition="'$(ProjectName.EndsWith(`Tests`))' == 'False'">
<GlobalPackageReference Include="Microsoft.VisualStudio.Threading.Analyzers" Version="17.12.19">
<PrivateAssets>all</PrivateAssets>
<IncludeAssets>runtime; build; native; contentfiles; analyzers</IncludeAssets>
</GlobalPackageReference>
</ItemGroup>
</Project>
5 changes: 1 addition & 4 deletions Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,7 @@
@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, GetResponsiveCssClass("d-??-block"))"
role="button"
@onclick="HandleCollapseToggleClick"
@onclick:stopPropagation="true">
Expand Down
15 changes: 2 additions & 13 deletions Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
@media (min-width: 768px) {
.hx-sidebar,
.hx-sidebar .nav-menu {
max-height: var(--hx-sidebar-max-height);;
max-height: var(--hx-sidebar-max-height);
}
}

Expand Down Expand Up @@ -104,21 +104,10 @@
transform: translateY(-.15rem) rotate(15deg) translateZ(0px);
}

.hx-sidebar-navbar-toggler:hover {
::deep .hx-sidebar-navbar-toggler:hover {
color: var(--bs-primary);
}

::deep a[aria-expanded="true"] .bi-chevron-right {
transform: rotate(90deg);
}

/*Desktop collapsed*/
.hx-sidebar.collapsed {
width: var(--hx-sidebar-collapsed-width);
}

.hx-sidebar.collapsed ::deep .hx-sidebar-brand-name,
.hx-sidebar.collapsed ::deep .hx-sidebar-item-navlink-content-inner,
.hx-sidebar.collapsed ::deep .expand-icon {
display: none;
}
4 changes: 2 additions & 2 deletions Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarBrand.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@namespace Havit.Blazor.Components.Web.Bootstrap

<a class="hx-sidebar-brand" href="./">
@if (LogoTemplate != null)
{
Expand All @@ -8,6 +9,5 @@
{
<div class="hx-sidebar-brand-shortname">@BrandNameShort</div>
}

<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>
14 changes: 14 additions & 0 deletions Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarBrand.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}")
};
}
}
3 changes: 1 addition & 2 deletions Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarFooter.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
8 changes: 6 additions & 2 deletions Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarFooter.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,14 @@
[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; }

Check warning on line 35 in Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarFooter.razor.cs

View workflow job for this annotation

GitHub Actions / build 

Fix formatting (https://learn.microsoft.com/dotnet/fundamentals/code-analysis/style-rules/ide0055)

Check warning on line 35 in Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarFooter.razor.cs

View workflow job for this annotation

GitHub Actions / build 

Fix formatting (https://learn.microsoft.com/dotnet/fundamentals/code-analysis/style-rules/ide0055)

Check warning on line 35 in Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarFooter.razor.cs

View workflow job for this annotation

GitHub Actions / build 

Fix formatting (https://learn.microsoft.com/dotnet/fundamentals/code-analysis/style-rules/ide0055)

Check warning on line 35 in Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarFooter.razor.cs

View workflow job for this annotation

GitHub Actions / build 

Fix formatting (https://learn.microsoft.com/dotnet/fundamentals/code-analysis/style-rules/ide0055)
/// <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).
Expand Down
140 changes: 59 additions & 81 deletions Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItem.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
@namespace Havit.Blazor.Components.Web.Bootstrap
<CascadingValue Value="this" IsFixed="true">
<div class="@CssClassHelper.Combine(HighlightOnActiveChild ? "hx-sidebar-item-highlight-on-active-child" : null)">
<div @key="@(GetHashCode() + ParentSidebar.Collapsed.ToString())"
class="@CssClassHelper.Combine(HighlightOnActiveChild ? "hx-sidebar-item-highlight-on-active-child" : null)">
@if (!HasExpandableContent)
{
<HxTooltip @key="@(GetHashCode() + ParentSidebar.Collapsed.ToString())"
Expand All @@ -19,100 +20,77 @@

@* To hide the nav-content in mobile view *@
<div data-bs-toggle="collapse" data-bs-target="#@ParentSidebar.NavContentElementId" class="stretched-link">
<div class="hx-sidebar-item-navlink-content">
@if (Icon is not null)
{
<HxIcon CssClass="hx-sidebar-item-icon" Icon="Icon" />
}

<span class="hx-sidebar-item-navlink-content-inner">
@if (ContentTemplate is not null)
{
@ContentTemplate(new() { ItemExpanded = null })
}
@Text
</span>
</div>
<HxSidebarItemNavLinkContent Text="@Text"
Icon="@Icon"
InnerCssClass="@((ParentSidebar.Collapsed && ParentSidebarItem is null) ? GetResponsiveCssClass("d-??-none") : null)"
ContentTemplate="@ContentTemplate" />

</div>
</HxNavLink>
</HxTooltip>
}
else
{
RenderFragment itemNavLinkContent =
@<div class="hx-sidebar-item-navlink-content">
@if (Icon is not null)
{
<HxIcon CssClass="hx-sidebar-item-icon" Icon="Icon" />
}

<span class="hx-sidebar-item-navlink-content-inner">
@if (ContentTemplate is not null)
{
@ContentTemplate(new() { ItemExpanded = expanded })
}
@Text
</span>

<HxIcon Icon="@BootstrapIcon.ChevronRight" CssClass="expand-icon" />
</div>;
<HxDropdown Direction="DropdownDirection.End" CssClass="@CssClassHelper.Combine("hx-sidebar-item d-none", ParentSidebar.Collapsed ? GetResponsiveCssClass("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")">

@if (ParentSidebar.Collapsed)
{
<HxDropdown Direction="DropdownDirection.End" CssClass="hx-sidebar-item">
<HxNavLink Href="@Href"
Match="Match"
OnClick="@(OnClick.HasDelegate ? InvokeOnClickAsync : null)"
OnClickStopPropagation="OnClickStopPropagation"
OnClickPreventDefault="OnClickPreventDefault"
CssClass="this.CssClass"
Enabled="Enabled"
role="button"
data-bs-offset="0,0"
onmouseenter="bootstrap.Dropdown.getOrCreateInstance(event.target).show()"
onmouseleave="bootstrap.Dropdown.getInstance(event.target)?.hide()"
aria-expanded="@(expanded ? "true" : "false")">
<HxSidebarItemNavLinkContent Text="@Text"
Icon="@Icon"
ContentTemplate="@ContentTemplate"
InnerCssClass="@CssClassHelper.Combine(ParentSidebar.Collapsed ? "d-none" : null)"
Expandable="true"
Expanded="@expanded" />

@itemNavLinkContent
<HxDropdownMenu CssClass="hx-sidebar-subitems">
@ChildContent
</HxDropdownMenu>

<HxDropdownMenu CssClass="hx-sidebar-subitems">
@ChildContent
</HxDropdownMenu>
</HxNavLink>
</HxDropdown>

</HxNavLink>
</HxDropdown>
}
else
{
<HxNavLink Href="@Href"
CssClass="@CssClassHelper.Combine(CssClass, "hx-sidebar-item")"
Match="Match"
Enabled="Enabled"
OnClick="HandleExpandableItemClick"
OnClickStopPropagation="OnClickStopPropagation"
OnClickPreventDefault="OnClickPreventDefault"
role="button"
data-bs-toggle="@(expanded && !String.IsNullOrEmpty(Href) ? null : "collapse")"
data-bs-target="@("#" + _id)"
aria-expanded="@(expanded ? "true" : "false")">
<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")">

@itemNavLinkContent
<HxSidebarItemNavLinkContent Text="@Text"
Icon="@Icon"
ContentTemplate="@ContentTemplate"
Expandable="true"
Expanded="@expanded" />

</HxNavLink>
</HxNavLink>

<HxCollapse Id="@_id"
Parent="@(ParentSidebar.MultipleItemsExpansion ? null : $"#{ParentSidebar._navId}")"
@ref="collapseComponent"
CssClass="hx-sidebar-subitems"
InitiallyExpanded="expanded"
OnShown="HandleCollapseShown"
OnHidden="HandleCollapseHidden">
<nav class="nav hx-sidebar-collapsed-nav">
@ChildContent
</nav>
</HxCollapse>
}
<HxCollapse Id="@_id"
Parent="@(ParentSidebar.MultipleItemsExpansion ? null : $"#{ParentSidebar._navId}")"
@ref="collapseComponent"
CssClass="@CssClassHelper.Combine("hx-sidebar-subitems", ParentSidebar.Collapsed ? GetResponsiveCssClass("d-??-none") : null)"
InitiallyExpanded="expanded"
OnShown="HandleCollapseShown"
OnHidden="HandleCollapseHidden">
<nav class="nav hx-sidebar-collapsed-nav">
@ChildContent
</nav>
</HxCollapse>
}
</div>
</CascadingValue>
Loading