#812: img on sidebar/sidebar2

BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar/SidebarDocumentation.razor

@@ -66,6 +66,11 @@
     <Demo Type="typeof(Sidebar_Demo_11_Width)" Tabs="true" />
 </Section>
 
+<Section Size="HeadingSize.H2" Name="Set full width company logo" PageUrl="@pageUrl" Link="set-full-width-compay-logo">
+    <div class="mb-3"></div>
+    <Demo Type="typeof(Sidebar_Demo_12_Company_Logo_FullWidth)" Tabs="true" />
+</Section>
+
 @code {
     private const string pageUrl = RouteConstants.Demos_Sidebar_Documentation;
     private const string pageTitle = "Blazor Sidebar";

BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar/Sidebar_Demo_12_Company_Logo_FullWidth.razor

@@ -0,0 +1,31 @@
+<Sidebar Href="/"
+         DataProvider="SidebarDataProvider"
+         ImageSrc="@($"{StringConstants.ImagesBasePath}/demos_logo_bw.png")"
+         ImageWidth="200"
+         Width="232"
+         WidthUnit="Unit.Px" />
+
+@code {
+    IEnumerable<NavItem>? navItems;
+
+    private async Task<SidebarDataProviderResult> SidebarDataProvider(SidebarDataProviderRequest request)
+    {
+        if (navItems is null)
+            navItems = GetNavItems();
+
+        return await Task.FromResult(request.ApplyTo(navItems));
+    }
+
+    private IEnumerable<NavItem> GetNavItems()
+    {
+        navItems = new List<NavItem>
+        {
+            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;
+    }
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar2/Sidebar2Documentation.razor

@@ -46,6 +46,11 @@
     <Demo Type="typeof(Sidebar2_Demo_09_Width)" Tabs="true" />
 </Section>
 
+<Section Size="HeadingSize.H2" Name="Set full width company logo" PageUrl="@pageUrl" Link="set-full-width-compay-logo">
+    <div class="mb-3"></div>
+    <Demo Type="typeof(Sidebar2_Demo_10_Company_Logo_FullWidth)" Tabs="true" />
+</Section>
+
 @code {
     private const string pageUrl = RouteConstants.Demos_Sidebar2_Documentation;
     private const string pageTitle = "Blazor Sidebar2";

BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar2/Sidebar2_Demo_10_Company_Logo_FullWidth.razor

@@ -0,0 +1,44 @@
+<Sidebar2 Href="/"
+          DataProvider="Sidebar2DataProvider"
+          ImageSrc="@($"{StringConstants.ImagesBasePath}/demos_logo_bw.png")"
+          ImageWidth="200"
+          Width="232"
+          WidthUnit="Unit.Px" />
+
+@code {
+    IEnumerable<NavItem>? navItems;
+
+    private async Task<Sidebar2DataProviderResult> Sidebar2DataProvider(Sidebar2DataProviderRequest request)
+    {
+        if (navItems is null)
+            navItems = GetNavItems();
+
+        return await Task.FromResult(request.ApplyTo(navItems));
+    }
+
+    private IEnumerable<NavItem> GetNavItems()
+    {
+        navItems = new List<NavItem>
+        {
+            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;
+    }
+}

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";
+}

blazorbootstrap/Components/Sidebar/Sidebar.razor

@@ -11,7 +11,7 @@
                         @if (!string.IsNullOrWhiteSpace(ImageSrc))
                         {
                             <span class="navbar-brand-image me-2">
-                                <img src="@ImageSrc" alt="@Title" />
+                                <img style="@ImageStyleNames" src="@ImageSrc" alt="@Title" />
                             </span>
                         }
                         else
@@ -20,7 +20,10 @@
                                 <Icon Name="@IconName" CustomIconName="@CustomIconName" Class="fs-4 me-2" />
                             </span>
                         }
-                        <span class="navbar-brand-text fw-semibold expanded-only me-2">@Title</span>
+                        @if (!string.IsNullOrWhiteSpace(Title))
+                        {
+                            <span class="navbar-brand-text fw-semibold expanded-only me-2">@Title</span>
+                        }                        
                         @if (!string.IsNullOrWhiteSpace(BadgeText))
                         {
                             <span class="navbar-brand-badge badge expanded-only">@BadgeText</span>

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));
+
     /// <summary>
     /// Gets or sets the badge text.
     /// </summary>
@@ -180,6 +181,14 @@ private string GetNavMenuCssClass()
     [Parameter]
     public string? ImageSrc { get; set; }
 
+    /// <summary>
+    /// Gets or sets the width of the image in pixels.
+    /// You can change the unit by setting <see cref="WidthUnit" />.
+    /// <remarks>Default value is 0.</remarks>
+    /// </summary>
+    [Parameter]
+    public float ImageWidth { get; set; } = 0;
+
     private string? navMenuCssClass => GetNavMenuCssClass();
 
     /// <summary>
@@ -189,7 +198,6 @@ private string GetNavMenuCssClass()
     /// Default value is null.
     /// </remarks>
     [Parameter]
-    [EditorRequired]
     public string? Title { get; set; } = default!;
 
     /// <summary>

blazorbootstrap/Components/Sidebar2/Sidebar2.razor

@@ -10,7 +10,7 @@
                         @if (!string.IsNullOrWhiteSpace(ImageSrc))
                         {
                             <span class="navbar-brand-image me-2">
-                                <img src="@ImageSrc" alt="@Title" />
+                                <img style="@ImageStyleNames" src="@ImageSrc" alt="@Title" />
                             </span>
                         }
                         else
@@ -19,7 +19,10 @@
                                 <Icon Name="@IconName" CustomIconName="@CustomIconName" Class="fs-4 me-2" />
                             </span>
                         }
-                        <span class="navbar-brand-text fw-semibold expanded-only me-2">@Title</span>
+                        @if (!string.IsNullOrWhiteSpace(Title))
+                        {
+                            <span class="navbar-brand-text fw-semibold expanded-only me-2">@Title</span>
+                        }
                         @if (!string.IsNullOrWhiteSpace(BadgeText))
                         {
                             <span class="navbar-brand-badge badge expanded-only">@BadgeText</span>

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));
 
     /// <summary>
     /// Gets or sets the badge text.
@@ -180,6 +182,14 @@ private string GetNavMenuCssClass()
     [Parameter]
     public string? ImageSrc { get; set; }
 
+    /// <summary>
+    /// Gets or sets the width of the image in pixels.
+    /// You can change the unit by setting <see cref="WidthUnit" />.
+    /// <remarks>Default value is 0.</remarks>
+    /// </summary>
+    [Parameter]
+    public float ImageWidth { get; set; } = 0;
+
     private string? navMenuCssClass => GetNavMenuCssClass();
 
     /// <summary>

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 |

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 |