diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar/SidebarDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar/SidebarDocumentation.razor index 285de70bf..9070599c8 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar/SidebarDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar/SidebarDocumentation.razor @@ -66,6 +66,11 @@ +
+
+ +
+ @code { private const string pageUrl = RouteConstants.Demos_Sidebar_Documentation; private const string pageTitle = "Blazor Sidebar"; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar/Sidebar_Demo_12_Company_Logo_FullWidth.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar/Sidebar_Demo_12_Company_Logo_FullWidth.razor new file mode 100644 index 000000000..8fb78b81c --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar/Sidebar_Demo_12_Company_Logo_FullWidth.razor @@ -0,0 +1,31 @@ + + +@code { + IEnumerable? navItems; + + private async Task SidebarDataProvider(SidebarDataProviderRequest request) + { + if (navItems is null) + navItems = GetNavItems(); + + return await Task.FromResult(request.ApplyTo(navItems)); + } + + private IEnumerable GetNavItems() + { + navItems = new List + { + new NavItem { Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started"}, + new NavItem { Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts"}, + new NavItem { Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete"}, + new NavItem { Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb"}, + new NavItem { Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar"}, + }; + return navItems; + } +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar2/Sidebar2Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar2/Sidebar2Documentation.razor index 5c9f2ec1b..1563a6d77 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar2/Sidebar2Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar2/Sidebar2Documentation.razor @@ -46,6 +46,11 @@ +
+
+ +
+ @code { private const string pageUrl = RouteConstants.Demos_Sidebar2_Documentation; private const string pageTitle = "Blazor Sidebar2"; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar2/Sidebar2_Demo_10_Company_Logo_FullWidth.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar2/Sidebar2_Demo_10_Company_Logo_FullWidth.razor new file mode 100644 index 000000000..be7660fe2 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar2/Sidebar2_Demo_10_Company_Logo_FullWidth.razor @@ -0,0 +1,44 @@ + + +@code { + IEnumerable? navItems; + + private async Task Sidebar2DataProvider(Sidebar2DataProviderRequest request) + { + if (navItems is null) + navItems = GetNavItems(); + + return await Task.FromResult(request.ApplyTo(navItems)); + } + + private IEnumerable GetNavItems() + { + navItems = new List + { + new NavItem { Id = "1", Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started"}, + + new NavItem { Id = "2", IconName = IconName.LayoutSidebarInset, Text = "Content" }, + new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId="2"}, + + new NavItem { Id = "4", IconName = IconName.ExclamationTriangleFill, Text = "Components" }, + new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId="4"}, + new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId="4"}, + + new NavItem { Id = "7", IconName = IconName.ListNested, Text = "Sidebar 2", ParentId="4"}, + new NavItem { Id = "701", Href = "/sidebar2", IconName = IconName.Dash, Text = "How to use", ParentId="7"}, + new NavItem { Id = "702", Href = "/sidebar2-examples", IconName = IconName.Dash, Text = "Examples", ParentId="7"}, + + new NavItem { Id = "8", IconName = IconName.WindowPlus, Text = "Forms" }, + new NavItem { Id = "9", Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete", ParentId="8"}, + new NavItem { Id = "10", Href = "/currency-input", IconName = IconName.CurrencyDollar, Text = "Currency Input", ParentId="8"}, + new NavItem { Id = "11", Href = "/number-input", IconName = IconName.InputCursor, Text = "Number Input", ParentId="8"}, + new NavItem { Id = "12", Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch", ParentId="8"}, + }; + return navItems; + } +} diff --git a/BlazorBootstrap.Demo.RCL/Constants/StringConstants.cs b/BlazorBootstrap.Demo.RCL/Constants/StringConstants.cs new file mode 100644 index 000000000..ea4b877ad --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Constants/StringConstants.cs @@ -0,0 +1,11 @@ +namespace BlazorBootstrap.Demo.RCL; + +public static class StringConstants +{ + public const string AssetsBasePath = "_content/BlazorBootstrap.Demo.RCL"; + public const string CssBasePath = AssetsBasePath + "/css"; + public const string DocsBasePath = AssetsBasePath + "/docs"; + public const string IconsBasePath = AssetsBasePath + "/icons"; + public const string ImagesBasePath = AssetsBasePath + "/images"; + public const string JsBasePath = AssetsBasePath + "/js"; +} diff --git a/BlazorBootstrap.Demo.RCL/wwwroot/images/demos_logo_bw.png b/BlazorBootstrap.Demo.RCL/wwwroot/images/demos_logo_bw.png new file mode 100644 index 000000000..d6870b4be Binary files /dev/null and b/BlazorBootstrap.Demo.RCL/wwwroot/images/demos_logo_bw.png differ diff --git a/blazorbootstrap/Components/Sidebar/Sidebar.razor b/blazorbootstrap/Components/Sidebar/Sidebar.razor index 093b4ff06..9d16f2902 100644 --- a/blazorbootstrap/Components/Sidebar/Sidebar.razor +++ b/blazorbootstrap/Components/Sidebar/Sidebar.razor @@ -11,7 +11,7 @@ @if (!string.IsNullOrWhiteSpace(ImageSrc)) { - @Title + @Title } else @@ -20,7 +20,10 @@ } - @Title + @if (!string.IsNullOrWhiteSpace(Title)) + { + @Title + } @if (!string.IsNullOrWhiteSpace(BadgeText)) { @BadgeText diff --git a/blazorbootstrap/Components/Sidebar/Sidebar.razor.cs b/blazorbootstrap/Components/Sidebar/Sidebar.razor.cs index 1c6c12cec..f7624e37e 100644 --- a/blazorbootstrap/Components/Sidebar/Sidebar.razor.cs +++ b/blazorbootstrap/Components/Sidebar/Sidebar.razor.cs @@ -1,6 +1,4 @@ -using System.Diagnostics.Contracts; - -namespace BlazorBootstrap; +namespace BlazorBootstrap; public partial class Sidebar : BlazorBootstrapComponentBase { @@ -122,9 +120,12 @@ private string GetNavMenuCssClass() ("expanded", !collapseSidebar)); protected override string? StyleNames => - BuildStyleNames(Style, + BuildStyleNames(Style, ($"--bb-sidebar-width: {Width.ToString(CultureInfo.InvariantCulture)}{WidthUnit.ToCssString()};", Width > 0)); + private string? ImageStyleNames => BuildStyleNames("", + ($"width: {ImageWidth.ToString(CultureInfo.InvariantCulture)}{WidthUnit.ToCssString()};", ImageWidth > 0)); + /// /// Gets or sets the badge text. /// @@ -180,6 +181,14 @@ private string GetNavMenuCssClass() [Parameter] public string? ImageSrc { get; set; } + /// + /// Gets or sets the width of the image in pixels. + /// You can change the unit by setting . + /// Default value is 0. + /// + [Parameter] + public float ImageWidth { get; set; } = 0; + private string? navMenuCssClass => GetNavMenuCssClass(); /// @@ -189,7 +198,6 @@ private string GetNavMenuCssClass() /// Default value is null. /// [Parameter] - [EditorRequired] public string? Title { get; set; } = default!; /// diff --git a/blazorbootstrap/Components/Sidebar2/Sidebar2.razor b/blazorbootstrap/Components/Sidebar2/Sidebar2.razor index 9e934e7bb..2e601a47f 100644 --- a/blazorbootstrap/Components/Sidebar2/Sidebar2.razor +++ b/blazorbootstrap/Components/Sidebar2/Sidebar2.razor @@ -10,7 +10,7 @@ @if (!string.IsNullOrWhiteSpace(ImageSrc)) { - @Title + @Title } else @@ -19,7 +19,10 @@ } - @Title + @if (!string.IsNullOrWhiteSpace(Title)) + { + @Title + } @if (!string.IsNullOrWhiteSpace(BadgeText)) { @BadgeText diff --git a/blazorbootstrap/Components/Sidebar2/Sidebar2.razor.cs b/blazorbootstrap/Components/Sidebar2/Sidebar2.razor.cs index d5e21b6a7..ba8e7839c 100644 --- a/blazorbootstrap/Components/Sidebar2/Sidebar2.razor.cs +++ b/blazorbootstrap/Components/Sidebar2/Sidebar2.razor.cs @@ -124,6 +124,8 @@ private string GetNavMenuCssClass() BuildStyleNames(Style, ($"--bb-sidebar2-width: {Width.ToString(CultureInfo.InvariantCulture)}{WidthUnit.ToCssString()};", Width > 0)); + private string? ImageStyleNames => BuildStyleNames("", + ($"width: {ImageWidth.ToString(CultureInfo.InvariantCulture)}{WidthUnit.ToCssString()};", ImageWidth > 0)); /// /// Gets or sets the badge text. @@ -180,6 +182,14 @@ private string GetNavMenuCssClass() [Parameter] public string? ImageSrc { get; set; } + /// + /// Gets or sets the width of the image in pixels. + /// You can change the unit by setting . + /// Default value is 0. + /// + [Parameter] + public float ImageWidth { get; set; } = 0; + private string? navMenuCssClass => GetNavMenuCssClass(); /// diff --git a/docs/docs/05-components/sidebar.mdx b/docs/docs/05-components/sidebar.mdx index ad66e4c72..8d897726c 100644 --- a/docs/docs/05-components/sidebar.mdx +++ b/docs/docs/05-components/sidebar.mdx @@ -27,6 +27,7 @@ Use the Blazor Bootstrap Sidebar component to show consistent cross-browser, res | Href | `string?` | `string.Empty` | | Gets or sets the Href. | 3.0.0 | | IconName | `IconName` | `IconName.None` | | Gets or sets the IconName. | 1.4.0 | | ImageSrc | `string?` | null | | Gets or sets the sidebar logo. | 1.4.0 | +| ImageWidth | float | 0 | ✔️ | Gets or sets the sidebar logo width. You can change the unit by setting `WidthUnit`. | 3.4.0 | | Title | `string?` | null | ✔️ | Gets or sets the sidebar title. | 1.4.0 | | Width | float | 270 | | Gets or sets the sidebar width. | 3.0.0 | | WidthUnit | `Unit` | `Unit.Px` | | Gets or sets the sidebar width unit. | 3.0.0 | diff --git a/docs/docs/05-components/sidebar2.mdx b/docs/docs/05-components/sidebar2.mdx index 51040dbd7..0bb26e1c7 100644 --- a/docs/docs/05-components/sidebar2.mdx +++ b/docs/docs/05-components/sidebar2.mdx @@ -27,6 +27,7 @@ Use the Blazor Bootstrap Sidebar2 component to display consistent, cross-browser | Href | `string?` | `string.Empty` | | Gets or sets the Href. | 3.0.0 | | IconName | `IconName` | `IconName.None` | | Gets or sets the IconName. | 2.1.0 | | ImageSrc | `string?` | null | | Gets or sets the logo. | 2.1.0 | +| ImageWidth | float | 0 | ✔️ | Gets or sets the sidebar logo width. You can change the unit by setting `WidthUnit`. | 3.4.0 | | Title | `string?` | null | ✔️ | Gets or sets the title. | 2.1.0 | | Width | float | 270 | | Gets or sets the sidebar width. | 3.0.0 | | WidthUnit | `Unit` | `Unit.Px` | | Gets or sets the sidebar width unit. | 3.0.0 |