diff --git a/Directory.Packages.props b/Directory.Packages.props index 436c53f0..0adfe61f 100644 --- a/Directory.Packages.props +++ b/Directory.Packages.props @@ -1,54 +1,54 @@ - - - true - true - 8.0.11 - 9.0.0 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - all - runtime; build; native; contentfiles; analyzers - - - - - all - runtime; build; native; contentfiles; analyzers - - + + + true + true + 8.0.11 + 9.0.0 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + all + runtime; build; native; contentfiles; analyzers + + + + + all + runtime; build; native; contentfiles; analyzers + + \ No newline at end of file diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor index 78d0d15b..b8e07958 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor +++ b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor @@ -1,6 +1,6 @@ @namespace Havit.Blazor.Components.Web.Bootstrap -
+
@if (HeaderTemplate is not null) @@ -9,7 +9,7 @@ @HeaderTemplate - } -
+
@ItemsTemplate -
diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor.cs b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor.cs index de13ced9..ba343eb4 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor.cs @@ -93,18 +93,4 @@ private async Task HandleCollapseToggleClick() Collapsed = !Collapsed; await InvokeCollapsedChangedAsync(Collapsed); } - - private string GetResponsiveCssClass(string cssClassPattern) - { - return 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 {ResponsiveBreakpoint}") - }; - } } diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor.css b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor.css index 243aeb37..0a518d10 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor.css +++ b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor.css @@ -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); } } @@ -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; -} diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarBrand.razor b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarBrand.razor index c43af72b..0f8f3f9d 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) { @@ -8,6 +9,5 @@ {
@BrandNameShort
} - - @BrandName + @BrandName \ No newline at end of file diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarFooter.razor b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarFooter.razor index b125d666..733497f9 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 276ba81b..d4655efe 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarFooter.razor.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarFooter.razor.cs @@ -29,11 +29,15 @@ 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 160f3805..0288381e 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItem.razor +++ b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItem.razor @@ -1,10 +1,11 @@ @namespace Havit.Blazor.Components.Web.Bootstrap +@using Havit.Blazor.Components.Web.Bootstrap.Internal -
+
@if (!HasExpandableContent) { - @@ -19,20 +20,10 @@ @* To hide the nav-content in mobile view *@
-
- @if (Icon is not null) - { - - } - - - @if (ContentTemplate is not null) - { - @ContentTemplate(new() { ItemExpanded = null }) - } - @Text - -
+
@@ -40,79 +31,66 @@ } else { - RenderFragment itemNavLinkContent = - @
- @if (Icon is not null) - { - - } - - - @if (ContentTemplate is not null) - { - @ContentTemplate(new() { ItemExpanded = expanded }) - } - @Text - - - -
; - - @if (ParentSidebar.Collapsed) - { - - - - @itemNavLinkContent - - - @ChildContent - - - - - } - else - { + - @itemNavLinkContent + + + + @ChildContent + + - - - - } + + + + + + + + + }
\ No newline at end of file diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItem.razor.css b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItem.razor.css index 8073a413..60e55a6f 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItem.razor.css +++ b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebarItem.razor.css @@ -11,14 +11,6 @@ border-radius: var(--hx-sidebar-item-border-radius); } -::deep .hx-sidebar-item-navlink-content { - display: flex; - flex-direction: row; - align-items: center; - align-self: stretch; - gap: .75rem; -} - ::deep .hx-sidebar-subitems { --bs-dropdown-border-radius: calc(var(--hx-sidebar-item-border-radius) + var(--bs-dropdown-padding-x)); } @@ -31,63 +23,40 @@ display: flex; } -::deep .hx-sidebar-subitems.show .hx-sidebar-item-navlink-content-inner { - display: inline-flex; -} - -.hx-sidebar-item-navlink-content-inner { - display: flex; - align-items: center; - flex-grow: 1; -} - ::deep .hx-sidebar-collapsed-nav { flex-direction: column; margin-block: .25rem; } -::deep a.nav-link:hover, -.hx-sidebar-item-highlight-on-active-child:has(.hx-sidebar-subitems .nav-link.active) ::deep > a.nav-link:hover { - background-color: rgba(var(--hx-sidebar-item-hover-background-color), var(--hx-sidebar-item-hover-background-opacity)); - color: var(--hx-sidebar-item-hover-color); -} - ::deep a.nav-link.active { background-color: rgba(var(--hx-sidebar-item-active-background-color), var(--hx-sidebar-item-active-background-opacity)); color: var(--hx-sidebar-item-active-color); font-weight: var(--hx-sidebar-item-active-font-weight); } +/* Font-weight only for first level items */ .hx-sidebar-item-highlight-on-active-child:has(.hx-sidebar-subitems .nav-link.active) ::deep > a.nav-link { - background-color: rgba(var(--hx-sidebar-parent-item-active-background-color), var(--hx-sidebar-parent-item-active-background-opacity)); - color: var(--hx-sidebar-parent-item-active-color); 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); +/* Background and color for rest of the content */ +.hx-sidebar-item-highlight-on-active-child:has(.hx-sidebar-subitems .nav-link.active) ::deep .dropend > a.nav-link, +.hx-sidebar-item-highlight-on-active-child:has(.hx-sidebar-subitems .nav-link.active) ::deep > a.nav-link { + background-color: rgba(var(--hx-sidebar-parent-item-active-background-color), var(--hx-sidebar-parent-item-active-background-opacity)); + color: var(--hx-sidebar-parent-item-active-color); } -.hx-sidebar-item-highlight-on-active-child:has(.hx-sidebar-subitems .nav-link.active) > ::deep.hx-sidebar-item .hx-sidebar-item-icon { +.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 a.nav-link:hover, +.hx-sidebar-item-highlight-on-active-child:has(.hx-sidebar-subitems .nav-link.active) ::deep > a.nav-link:hover { + background-color: rgba(var(--hx-sidebar-item-hover-background-color), var(--hx-sidebar-item-hover-background-opacity)); + color: var(--hx-sidebar-item-hover-color); } ::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/Internal/HxSidebarItemNavLinkContentInternal.razor b/Havit.Blazor.Components.Web.Bootstrap/Navigation/Internal/HxSidebarItemNavLinkContentInternal.razor new file mode 100644 index 00000000..16639d17 --- /dev/null +++ b/Havit.Blazor.Components.Web.Bootstrap/Navigation/Internal/HxSidebarItemNavLinkContentInternal.razor @@ -0,0 +1,19 @@ +@namespace Havit.Blazor.Components.Web.Bootstrap.Internal + +
+ @if (Icon is not null) + { + + } + + @if (ContentTemplate is not null) + { + @ContentTemplate(new() { ItemExpanded = Expanded }) + } + @Text + + @if (Expandable) + { + + } +
\ No newline at end of file diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/Internal/HxSidebarItemNavLinkContentInternal.razor.cs b/Havit.Blazor.Components.Web.Bootstrap/Navigation/Internal/HxSidebarItemNavLinkContentInternal.razor.cs new file mode 100644 index 00000000..1990ad0a --- /dev/null +++ b/Havit.Blazor.Components.Web.Bootstrap/Navigation/Internal/HxSidebarItemNavLinkContentInternal.razor.cs @@ -0,0 +1,14 @@ +namespace Havit.Blazor.Components.Web.Bootstrap.Internal; + +/// +/// Inner content of the . +/// +public partial class HxSidebarItemNavLinkContentInternal +{ + [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/Internal/HxSidebarItemNavLinkContentInternal.razor.css b/Havit.Blazor.Components.Web.Bootstrap/Navigation/Internal/HxSidebarItemNavLinkContentInternal.razor.css new file mode 100644 index 00000000..8cb44511 --- /dev/null +++ b/Havit.Blazor.Components.Web.Bootstrap/Navigation/Internal/HxSidebarItemNavLinkContentInternal.razor.css @@ -0,0 +1,36 @@ +.hx-sidebar-item-navlink-content { + display: flex; + flex-direction: row; + align-items: center; + align-self: stretch; + gap: .75rem; +} + +.hx-sidebar-subitems.show .hx-sidebar-item-navlink-content-inner { + display: inline-flex; +} + +.hx-sidebar-item-navlink-content-inner { + 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); +} \ No newline at end of file diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/SidebarMobileBreakpoint.cs b/Havit.Blazor.Components.Web.Bootstrap/Navigation/SidebarResponsiveBreakpoint.cs similarity index 100% rename from Havit.Blazor.Components.Web.Bootstrap/Navigation/SidebarMobileBreakpoint.cs rename to Havit.Blazor.Components.Web.Bootstrap/Navigation/SidebarResponsiveBreakpoint.cs diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/SidebarResponsiveBreakpointExtensions.cs b/Havit.Blazor.Components.Web.Bootstrap/Navigation/SidebarResponsiveBreakpointExtensions.cs new file mode 100644 index 00000000..a07f0bd5 --- /dev/null +++ b/Havit.Blazor.Components.Web.Bootstrap/Navigation/SidebarResponsiveBreakpointExtensions.cs @@ -0,0 +1,18 @@ +namespace Havit.Blazor.Components.Web.Bootstrap; + +public static class SidebarResponsiveBreakpointExtensions +{ + public static string GetCssClass(this SidebarResponsiveBreakpoint breakpoint, string cssClassPattern) + { + return breakpoint 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(SidebarResponsiveBreakpoint)} value {breakpoint}.") + }; + } +} diff --git a/Havit.Blazor.Components.Web.Bootstrap/wwwroot/defaults.lib.css b/Havit.Blazor.Components.Web.Bootstrap/wwwroot/defaults.lib.css index d7d8c816..2e4199b1 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/wwwroot/defaults.lib.css +++ b/Havit.Blazor.Components.Web.Bootstrap/wwwroot/defaults.lib.css @@ -1,4 +1,5 @@ -:root { +:root, +[data-bs-theme=dark] { /* HxAutosuggest */ --hx-autosuggest-input-close-icon-opacity: .25; --hx-autosuggest-item-highlighted-background-color: var(--bs-tertiary-bg); @@ -11,7 +12,7 @@ --hx-button-gap: .25rem; /* HxSidebar */ - --hx-sidebar-background-color: transparent; + --hx-sidebar-background-color: var(--bs-body-bg); --hx-sidebar-collapsed-width: 72px; --hx-sidebar-width: 300px; --hx-sidebar-max-height: 100vh; @@ -20,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); @@ -56,12 +57,13 @@ --hx-sidebar-footer-padding: 0 1rem 1rem 1rem; --hx-sidebar-footer-item-padding: .75rem; --hx-sidebar-footer-item-margin: 0; - --hx-sidebar-footer-item-font-size: 1rem; .75rem; - --hx-sidebar-footer-item-color: unset; + --hx-sidebar-footer-item-font-size: 1rem; + --hx-sidebar-footer-item-content-gap: .75rem; + --hx-sidebar-footer-item-color: var(--bs-body-color); --hx-sidebar-footer-item-radius: unset; --hx-sidebar-footer-item-hover-background-color: unset; --hx-sidebar-footer-item-hover-background-opacity: unset; - --hx-sidebar-footer-item-hover-color: unset; + --hx-sidebar-footer-item-hover-color: var(--bs-body-color); /* HxProgressOverlay */ --hx-progress-overlay-color: var(--bs-white); diff --git a/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo.razor b/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo.razor index 8eb3d006..c82bf419 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 00000000..98c8adad --- /dev/null +++ b/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_Colors.razor @@ -0,0 +1,34 @@ + +
+ + + + + + + + + + + + + + + + + + + + + + + +
\ 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 00000000..9ae8ff32 --- /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 133323df..b9594512 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 fc12dde0..caaaf89b 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 1a5cee9c..bbb9ea3f 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 ce291680..63c2e4e6 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 bc7ebec5..720249cb 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 89952c13..cf75374c 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 dfcb96e6..f3c2609d 100644 --- a/Havit.Blazor.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml +++ b/Havit.Blazor.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml @@ -2578,6 +2578,11 @@ Prevents the default action for the onclick event. Default is null, which means true when is set. + + + Inner content of the . + + Offset between dropdown input and dropdown menu @@ -8734,8 +8739,12 @@ - Allows you to disable the item with false. - The default value is true. + Any additional CSS class to add. + + + + + Any additional CSS class to add to inner text.