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

Jump to bottom

HxSidebar Toggler v2 #667

Merged
merged 6 commits into from
Dec 15, 2023
Merged

HxSidebar Toggler v2 #667

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
292f9d1
Toggler v2 WIP
crdo Nov 19, 2023
64aa2da
Bigger contrast of toggler
crdo Dec 14, 2023
9d18116
CSS vars, docs, cleanup
crdo Dec 15, 2023
c023d82
HxSidebar Toggler localization
hakenr Dec 15, 2023
633f3bb
HxSidebar - revert ExpandIcon & CollapseIcon removal (in favor of [Ob…
hakenr Dec 15, 2023
152dcb1
HxSidebar - .csproj cleanup
hakenr Dec 15, 2023
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
1 change: 1 addition & 0 deletions Havit.Blazor.Components.Web.Bootstrap/Havit.Blazor.Components.Web.Bootstrap.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@
<ProjectReference Include="..\Havit.Blazor.Components.Web\Havit.Blazor.Components.Web.csproj" />
</ItemGroup>


<Target Name="CopyCustomContent" AfterTargets="AfterBuild">
<Copy SourceFiles="$(TargetDir)\Havit.Blazor.Components.Web.Bootstrap.xml" DestinationFolder="$(OutDir)\..\..\..\..\Havit.Blazor.Documentation\xmldoc" />
</Target>
Expand Down
104 changes: 54 additions & 50 deletions Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,58 +1,62 @@
@namespace Havit.Blazor.Components.Web.Bootstrap

<div class="@CssClassHelper.Combine("hx-sidebar", GetResponsiveCssClass("flex-??-grow-0"), GetCollapsedCssClass(), this.CssClass)" id="@Id">
<div class="nav-menu d-flex flex-column flex-grow-1 position-relative">
<div class="nav-menu d-flex flex-column flex-grow-1 position-relative">

@if (HeaderTemplate is not null)
{
<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", GetResponsiveCssClass("d-??-none"))"
data-bs-toggle="collapse"
data-bs-target="@($"#{NavContentElementId}")"
aria-controls="@NavContentElementId"
aria-expanded="false"
aria-label="Toggle navigation"
Icon="BootstrapIcon.List" />
</div>
}
@if (HeaderTemplate is not null)
{
<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", GetResponsiveCssClass("d-??-none"))"
data-bs-toggle="collapse"
data-bs-target="@($"#{NavContentElementId}")"
aria-controls="@NavContentElementId"
aria-expanded="false"
aria-label="Toggle navigation"
Icon="BootstrapIcon.List" />
</div>
}

<div class="@CssClassHelper.Combine("hx-sidebar-collapse collapse", GetResponsiveCssClass("d-??-flex"), (!Collapsed) ? "overflow-auto": null)" id="@NavContentElementId">
<div class="hx-sidebar-body mb-auto w-100">
<HxNav Id="@navId" Orientation="NavOrientation.Vertical" CssClass="ps-0">
<CascadingValue Value="@this" IsFixed="true">
@ItemsTemplate
</CascadingValue>
</HxNav>
<div class="hx-sidebar-toggler" role="button" @onclick="HandleCollapseToggleClick"
@onclick:stopPropagation="true">
<div class="@CssClassHelper.Combine("hx-sidebar-collapse collapse", GetResponsiveCssClass("d-??-flex"), (!Collapsed) ? "overflow-auto": null)" id="@NavContentElementId">
<div class="hx-sidebar-body mb-auto w-100">
<HxNav Id="@navId" Orientation="NavOrientation.Vertical" CssClass="ps-0">
<CascadingValue Value="@this" IsFixed="true">
@ItemsTemplate
</CascadingValue>
</HxNav>
<div class="@CssClassHelper.Combine(
"hx-sidebar-toggler",
Collapsed ? "collapsed" : null,
"d-none", // Hide the sidebar toggler in navbar mode (when below the responsive breakpoint).
GetResponsiveCssClass("d-??-block"))"
role="button"
@onclick="HandleCollapseToggleClick"
@onclick:stopPropagation="true">

@if (TogglerTemplate is null)
{
<div class="@CssClassHelper.Combine(
"hx-sidebar-toggler-icon-wrapper",
"d-none", // Hide the sidebar toggler in navbar mode (when below the responsive breakpoint).
GetResponsiveCssClass("d-??-flex"))">
@if (TogglerTemplate is null)
{
<HxTooltip Placement="TooltipPlacement.Right" Text="@(Collapsed ? Localizer["Expand"] : Localizer["Collapse"])">
<div class="hx-sidebar-toggler-inner">
<div class="hx-sidebar-toggler-arrow"></div>
<div class="hx-sidebar-toggler-arrow"></div>
</div>
</HxTooltip>
}
else
{
@TogglerTemplate(new() { SidebarCollapsed = this.Collapsed })
}
</div>
</div>

<HxIcon CssClass="hx-sidebar-toggler-icon" Icon="@(Collapsed ? ExpandIcon : CollapseIcon)" />
</div>
}
else
{
@TogglerTemplate(new() { SidebarCollapsed = this.Collapsed })
}
</div>
</div>

@if (FooterTemplate is not null)
{
<div class="hx-sidebar-footer">
@FooterTemplate(new() { SidebarCollapsed = this.Collapsed })
</div>
}
</div>
</div>
@if (FooterTemplate is not null)
{
<div class="hx-sidebar-footer">
@FooterTemplate(new() { SidebarCollapsed = this.Collapsed })
</div>
}
</div>
</div>
</div>
18 changes: 12 additions & 6 deletions Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
namespace Havit.Blazor.Components.Web.Bootstrap;
using Microsoft.Extensions.Localization;

namespace Havit.Blazor.Components.Web.Bootstrap;

/// <summary>
/// Sidebar component - responsive navigation sidebar.<br />
Expand All @@ -17,22 +19,24 @@ public partial class HxSidebar : ComponentBase
[Parameter] public RenderFragment ItemsTemplate { get; set; }

/// <summary>
/// Icon for expanding the desktop version. Use <see cref="TogglerTemplate" /> for more specific customization.
/// <c>ExpandIcon</c> is obsolete and will be removed in future release. Use <see cref="TogglerTemplate"/> if you want to render an icon.
/// </summary>
[Parameter] public IconBase ExpandIcon { get; set; } = BootstrapIcon.ChevronBarRight;
[Obsolete("ExpandIcon is obsolete and will be removed in future release. Use TogglerTemplate if you want to render an icon.")]
[Parameter] public IconBase ExpandIcon { get; set; }

/// <summary>
/// Icon for collapsing the desktop version. Use <see cref="TogglerTemplate" /> for more specific customization.
/// <c>CollapseIcon</c> is obsolete and will be removed in future release. Use <see cref="TogglerTemplate"/> if you want to render an icon.
/// </summary>
[Parameter] public IconBase CollapseIcon { get; set; } = BootstrapIcon.ChevronBarLeft;
[Obsolete("CollapseIcon is obsolete and will be removed in future release. Use TogglerTemplate if you want to render an icon.")]
[Parameter] public IconBase CollapseIcon { get; set; }

/// <summary>
/// Sidebar footer (e.g. logged user, language switch, ...).
/// </summary>
[Parameter] public RenderFragment<SidebarFooterTemplateContext> FooterTemplate { get; set; }

/// <summary>
/// Vertical toggler (desktop version) to be rendered instead of the <see cref="ExpandIcon"/> and <see cref="CollapseIcon"/> icon.
/// Vertical toggler (desktop version) to be rendered instead of the default bar/arrow.
/// </summary>
[Parameter] public RenderFragment<SidebarTogglerTemplateContext> TogglerTemplate { get; set; }

Expand Down Expand Up @@ -73,6 +77,8 @@ public partial class HxSidebar : ComponentBase
/// </summary>
[Parameter] public SidebarResponsiveBreakpoint ResponsiveBreakpoint { get; set; } = SidebarResponsiveBreakpoint.Medium;

[Inject] protected IStringLocalizer<HxSpinner> Localizer { get; set; }

protected internal string NavContentElementId => Id + "-nav-content";

/// <summary>
Expand Down
43 changes: 30 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 @@ -62,25 +62,42 @@
transform: translate(-50%, -50%);
}

.hx-sidebar-toggler-icon-wrapper {
opacity: 0;
width: 2em;
height: 2em;
border-radius: 50%;
border: var(--hx-sidebar-toggler-border);
align-items: center;
justify-content: center;
.hx-sidebar-toggler-inner {
display: block;
padding: .75rem;
}

.hx-sidebar-toggler-arrow {
width: .25rem;
height: .75rem;
border-radius: .25rem;
background-color: var(--hx-sidebar-toggler-background);
color: var(--hx-sidebar-toggler-color);
transition: all .25s ease-in-out;
transform: translateY(.15rem) rotate(0deg) translateZ(0px);
}

.hx-sidebar-toggler:hover .hx-sidebar-toggler-arrow {
background-color: var(--bs-body-color);
}

.hx-sidebar-toggler-arrow + .hx-sidebar-toggler-arrow {
transform: translateY(-.15rem) rotate(0deg) translateZ(0px);
}

.hx-sidebar-toggler:hover .hx-sidebar-toggler-arrow {
transform: translateY(.15rem) rotate(15deg) translateZ(0px);
}

.hx-sidebar-toggler:hover .hx-sidebar-toggler-arrow + .hx-sidebar-toggler-arrow {
transform: translateY(-.15rem) rotate(-15deg) translateZ(0px);
}

.hx-sidebar:hover .hx-sidebar-toggler-icon-wrapper {
opacity: .75;
.collapsed .hx-sidebar-toggler:hover .hx-sidebar-toggler-arrow {
transform: translateY(.15rem) rotate(-15deg) translateZ(0px);
}

.hx-sidebar .hx-sidebar-toggler-icon-wrapper:hover {
opacity: 1;
.collapsed .hx-sidebar-toggler:hover .hx-sidebar-toggler-arrow + .hx-sidebar-toggler-arrow {
transform: translateY(-.15rem) rotate(15deg) translateZ(0px);
}

.hx-sidebar-navbar-toggler:hover {
Expand Down
126 changes: 126 additions & 0 deletions Havit.Blazor.Components.Web.Bootstrap/Resources/HxSidebar.cs.resx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
<?xml version="1.0" encoding="utf-8"?>
<root>
<!--
Microsoft ResX Schema

Version 2.0

The primary goals of this format is to allow a simple XML format
that is mostly human readable. The generation and parsing of the
various data types are done through the TypeConverter classes
associated with the data types.

Example:

... ado.net/XML headers & schema ...
<resheader name="resmimetype">text/microsoft-resx</resheader>
<resheader name="version">2.0</resheader>
<resheader name="reader">System.Resources.ResXResourceReader, System.Windows.Forms, ...</resheader>
<resheader name="writer">System.Resources.ResXResourceWriter, System.Windows.Forms, ...</resheader>
<data name="Name1"><value>this is my long string</value><comment>this is a comment</comment></data>
<data name="Color1" type="System.Drawing.Color, System.Drawing">Blue</data>
<data name="Bitmap1" mimetype="application/x-microsoft.net.object.binary.base64">
<value>[base64 mime encoded serialized .NET Framework object]</value>
</data>
<data name="Icon1" type="System.Drawing.Icon, System.Drawing" mimetype="application/x-microsoft.net.object.bytearray.base64">
<value>[base64 mime encoded string representing a byte array form of the .NET Framework object]</value>
<comment>This is a comment</comment>
</data>

There are any number of "resheader" rows that contain simple
name/value pairs.

Each data row contains a name, and value. The row also contains a
type or mimetype. Type corresponds to a .NET class that support
text/value conversion through the TypeConverter architecture.
Classes that don't support this are serialized and stored with the
mimetype set.

The mimetype is used for serialized objects, and tells the
ResXResourceReader how to depersist the object. This is currently not
extensible. For a given mimetype the value must be set accordingly:

Note - application/x-microsoft.net.object.binary.base64 is the format
that the ResXResourceWriter will generate, however the reader can
read any of the formats listed below.

mimetype: application/x-microsoft.net.object.binary.base64
value : The object must be serialized with
: System.Runtime.Serialization.Formatters.Binary.BinaryFormatter
: and then encoded with base64 encoding.

mimetype: application/x-microsoft.net.object.soap.base64
value : The object must be serialized with
: System.Runtime.Serialization.Formatters.Soap.SoapFormatter
: and then encoded with base64 encoding.

mimetype: application/x-microsoft.net.object.bytearray.base64
value : The object must be serialized into a byte array
: using a System.ComponentModel.TypeConverter
: and then encoded with base64 encoding.
-->
<xsd:schema id="root" xmlns="" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
<xsd:import namespace="http://www.w3.org/XML/1998/namespace" />
<xsd:element name="root" msdata:IsDataSet="true">
<xsd:complexType>
<xsd:choice maxOccurs="unbounded">
<xsd:element name="metadata">
<xsd:complexType>
<xsd:sequence>
<xsd:element name="value" type="xsd:string" minOccurs="0" />
</xsd:sequence>
<xsd:attribute name="name" use="required" type="xsd:string" />
<xsd:attribute name="type" type="xsd:string" />
<xsd:attribute name="mimetype" type="xsd:string" />
<xsd:attribute ref="xml:space" />
</xsd:complexType>
</xsd:element>
<xsd:element name="assembly">
<xsd:complexType>
<xsd:attribute name="alias" type="xsd:string" />
<xsd:attribute name="name" type="xsd:string" />
</xsd:complexType>
</xsd:element>
<xsd:element name="data">
<xsd:complexType>
<xsd:sequence>
<xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
<xsd:element name="comment" type="xsd:string" minOccurs="0" msdata:Ordinal="2" />
</xsd:sequence>
<xsd:attribute name="name" type="xsd:string" use="required" msdata:Ordinal="1" />
<xsd:attribute name="type" type="xsd:string" msdata:Ordinal="3" />
<xsd:attribute name="mimetype" type="xsd:string" msdata:Ordinal="4" />
<xsd:attribute ref="xml:space" />
</xsd:complexType>
</xsd:element>
<xsd:element name="resheader">
<xsd:complexType>
<xsd:sequence>
<xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
</xsd:sequence>
<xsd:attribute name="name" type="xsd:string" use="required" />
</xsd:complexType>
</xsd:element>
</xsd:choice>
</xsd:complexType>
</xsd:element>
</xsd:schema>
<resheader name="resmimetype">
<value>text/microsoft-resx</value>
</resheader>
<resheader name="version">
<value>2.0</value>
</resheader>
<resheader name="reader">
<value>System.Resources.ResXResourceReader, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
</resheader>
<resheader name="writer">
<value>System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
</resheader>
<data name="Collapse" xml:space="preserve">
<value>Sbalit</value>
</data>
<data name="Expand" xml:space="preserve">
<value>Rozbalit</value>
</data>
</root>
Loading