-
-
Notifications
You must be signed in to change notification settings - Fork 69
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #667 from havit/feature/HxSidebarNewToggler
HxSidebar Toggler v2
- Loading branch information
Showing
12 changed files
with
612 additions
and
85 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
104 changes: 54 additions & 50 deletions
104
Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
126 changes: 126 additions & 0 deletions
126
Havit.Blazor.Components.Web.Bootstrap/Resources/HxSidebar.cs.resx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> |
Oops, something went wrong.