From 9292f2d4d7205662ba1c0a708ef95d04cc931891 Mon Sep 17 00:00:00 2001 From: dominikcrha Date: Tue, 19 Nov 2024 08:26:03 +0100 Subject: [PATCH] To add Sidebar colors demo, fixed SidebarFooter overflowing on Collapse, reverted default border radius of SidebarItem to regular (was large), + docs adjustment --- .../Navigation/HxSidebarBrand.razor | 1 + .../Navigation/HxSidebarFooter.razor | 3 +-- .../Navigation/HxSidebarFooter.razor.cs | 8 ++++-- .../Navigation/HxSidebarItem.razor | 1 - .../Navigation/HxSidebarItem.razor.cs | 1 - .../Navigation/HxSidebarItem.razor.css | 25 +------------------ .../HxSidebarItemNavLinkContent.razor | 15 ++--------- .../HxSidebarItemNavLinkContent.razor.cs | 14 +++++++++++ .../HxSidebarItemNavLinkContent.razor.css | 23 +++++++++++++++++ .../wwwroot/defaults.lib.css | 2 +- .../HxSidebarDoc/HxSidebar_Demo.razor | 4 +-- .../HxSidebarDoc/HxSidebar_Demo_Colors.razor | 25 +++++++++++++++++++ .../HxSidebar_Demo_Colors.razor.css | 6 +++++ .../HxSidebarDoc/HxSidebar_Demo_Dark.razor | 25 +++++++++++++++++++ .../HxSidebar_Demo_ItemCustomContent.razor | 2 +- .../HxSidebarDoc/HxSidebar_Demo_Logo.razor | 2 +- ...xSidebar_Demo_MultipleItemsExpansion.razor | 2 +- ...r_Demo_ProgramaticallyExpandCollapse.razor | 4 +-- .../HxSidebar_Demo_TogglerTemplate.razor | 4 +-- .../HxSidebar_Documentation.razor | 10 +++++++- .../Havit.Blazor.Components.Web.Bootstrap.xml | 5 ++++ 21 files changed, 128 insertions(+), 54 deletions(-) create mode 100644 Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItemNavLinkContent.razor.cs create mode 100644 Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_Colors.razor create mode 100644 Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_Colors.razor.css create mode 100644 Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_Dark.razor diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarBrand.razor b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarBrand.razor index 889eb79a6..b792f952d 100644 --- 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 + @if (LogoTemplate != null) { diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarFooter.razor b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarFooter.razor index b125d666d..733497f9d 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarFooter.razor +++ b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarFooter.razor @@ -9,10 +9,9 @@ { } - + @Text - \ No newline at end of file diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarFooter.razor.cs b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarFooter.razor.cs index 276ba81b3..d538c210c 100644 --- 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; /// - /// Allows you to disable the item with false. - /// The default value is true. + /// Any additional CSS class to add. /// [Parameter] public string CssClass { get; set; } + + /// + /// Any additional CSS class to add to inner text. + /// + [Parameter] public string TextCssClass { get; set; } /// /// 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 index 68334cc02..de6ff3dd6 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItem.razor +++ b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItem.razor @@ -31,7 +31,6 @@ } else { - ::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; } \ No newline at end of file diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItemNavLinkContent.razor b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItemNavLinkContent.razor index dc718d46c..3ee54e70b 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItemNavLinkContent.razor +++ b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItemNavLinkContent.razor @@ -14,17 +14,6 @@ @if (Expandable) { - + } - - -@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 ContentTemplate { get; set; } -} \ No newline at end of file + \ No newline at end of file diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItemNavLinkContent.razor.cs b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItemNavLinkContent.razor.cs new file mode 100644 index 000000000..5ffcde886 --- /dev/null +++ b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItemNavLinkContent.razor.cs @@ -0,0 +1,14 @@ +namespace Havit.Blazor.Components.Web.Bootstrap; + +/// +/// Innter content of the . +/// +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 ContentTemplate { get; set; } +} \ No newline at end of file diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItemNavLinkContent.razor.css b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItemNavLinkContent.razor.css index 8a20167a4..2d1af60ce 100644 --- 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); } \ No newline at end of file diff --git a/Havit.Blazor.Components.Web.Bootstrap/wwwroot/defaults.lib.css b/Havit.Blazor.Components.Web.Bootstrap/wwwroot/defaults.lib.css index cd37c0480..2e4199b1b 100644 --- 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 index 8eb3d0060..c82bf419a 100644 --- a/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo.razor +++ b/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo.razor @@ -1,4 +1,4 @@ -
+
@@ -19,7 +19,7 @@ - +
\ No newline at end of file diff --git a/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_Colors.razor b/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_Colors.razor new file mode 100644 index 000000000..7e36e182f --- /dev/null +++ b/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_Colors.razor @@ -0,0 +1,25 @@ +
+ + + + + + + + + + + + + + + + + + + + + + + +
\ No newline at end of file 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 new file mode 100644 index 000000000..20d576521 --- /dev/null +++ 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); +} \ No newline at end of file diff --git a/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_Dark.razor b/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_Dark.razor new file mode 100644 index 000000000..9ae8ff32a --- /dev/null +++ b/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_Dark.razor @@ -0,0 +1,25 @@ +
+ + + + + + + + + + + + + + + + + + + + + + + +
\ No newline at end of file diff --git a/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_ItemCustomContent.razor b/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_ItemCustomContent.razor index 133323df4..b95945120 100644 --- a/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_ItemCustomContent.razor +++ b/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_ItemCustomContent.razor @@ -1,4 +1,4 @@ -
+
diff --git a/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_Logo.razor b/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_Logo.razor index fc12dde0b..caaaf89b5 100644 --- 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 @@ -
+
diff --git a/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_MultipleItemsExpansion.razor b/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_MultipleItemsExpansion.razor index 1a5cee9cc..bbb9ea3f5 100644 --- a/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_MultipleItemsExpansion.razor +++ b/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_MultipleItemsExpansion.razor @@ -1,4 +1,4 @@ -
+
diff --git a/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_ProgramaticallyExpandCollapse.razor b/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_ProgramaticallyExpandCollapse.razor index ce291680c..63c2e4e63 100644 --- a/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_ProgramaticallyExpandCollapse.razor +++ b/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_ProgramaticallyExpandCollapse.razor @@ -1,4 +1,4 @@ -
+
@@ -19,7 +19,7 @@ - +
diff --git a/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_TogglerTemplate.razor b/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_TogglerTemplate.razor index bc7ebec5d..720249cb9 100644 --- a/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_TogglerTemplate.razor +++ b/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_TogglerTemplate.razor @@ -1,4 +1,4 @@ -
+
@@ -38,7 +38,7 @@ - +
diff --git a/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Documentation.razor b/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Documentation.razor index 89952c138..14582e4c4 100644 --- a/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Documentation.razor +++ b/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Documentation.razor @@ -8,6 +8,14 @@ + +

Similarly to Bootstrap Navbar, the Sidebar color can be inverted with data-bs-theme="dark" attribute on parent div.

+ + + +

Similarly to Bootstrap Navbar, you can use utility classes to create any color variation eg. text-bg-light. Colors of the active/hover states need to be fine-tuned via CSS vars.

+ +

Use your own custom logo in the sidebar header by setting the LogoTemplate parameter (RenderFragment) on the HxSidebarBrand component.

@@ -71,7 +79,7 @@ Color of the items icons. - + Border radius of the items. diff --git a/Havit.Blazor.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml b/Havit.Blazor.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml index dfcb96e6e..cd71ba92b 100644 --- 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).
+ + + Innter content of the . + + Responsive expand setting (breakpoint) for .