feat(Layout): add SideCollapsedWidth parameter (#8537)

* feat(Layout):增加SideCollapsedWidth参数用来处理菜单折叠时的宽度

feat(Layout):增加SideCollapsedWidth参数用来处理菜单折叠时的宽度

* feat(Layout):补充单元测试

test:补充单元测试

* doc: 增加版本信息

* refactor: 支持百分比等单位

* test: 重写单元测试

* chore: bump version 11.0.1

* refactor(NET11): suppress false positive analyzer warnings

---------

Co-authored-by: Argo Zhang <argo@live.ca>

Author: Tony-ST0754

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>11.0.1-beta03</Version>
+    <Version>11.0.1</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/Layout/Layout.razor.cs

@@ -229,6 +229,15 @@ public partial class Layout : ITabHeader
     [Parameter]
     public string? SideWidth { get; set; }
 
+    /// <summary>
+    /// <para lang="zh">指定侧边栏折叠时的宽度，使用 CSS 长度字符串。</para>
+    /// <para lang="en">Specifies the width of the sidebar when collapsed, using a CSS length string.</para>
+    /// <para>v<version>11.0.1</version></para>
+    /// </summary>
+    /// <remarks>接受任何有效的 CSS 长度值。为 null 时使用组件默认值。</remarks>
+    [Parameter]
+    public string? SideCollapsedWidth { get; set; }
+
     /// <summary>
     /// <para lang="zh">获得/设置 Main 模板</para>
     /// <para lang="en">Gets or sets Main Template</para>
@@ -491,6 +500,7 @@ public partial class Layout : ITabHeader
     private string? StyleString => CssBuilder.Default()
         .AddClass("--bb-layout-header-height: 0px;", Header == null)
         .AddClass("--bb-layout-footer-height: 0px;", ShowFooter == false || Footer == null)
+        .AddClass($"--bb-layout-sidebar-collapse-width: {SideCollapsedWidth};", IsCollapsed && SideCollapsedWidth != null)
         .AddStyleFromAttributes(AdditionalAttributes)
         .Build();
 

test/UnitTest/Components/LayoutTest.cs

@@ -345,6 +345,26 @@ public void SideWidth_OK()
         cut.WaitForAssertion(() => Assert.DoesNotContain("width:", cut.Markup));
     }
 
+    [Fact]
+    public void SideCollapsedWidth_OK()
+    {
+        var cut = Context.Render<Layout>(pb =>
+        {
+            pb.Add(a => a.IsCollapsed, false);
+            pb.Add(a => a.SideCollapsedWidth, "80px");
+        });
+        cut.DoesNotContain("--bb-layout-sidebar-collapse-width");
+
+        cut.Render(pb => pb.Add(a => a.IsCollapsed, true));
+        cut.Contains("--bb-layout-sidebar-collapse-width: 80px;");
+
+        cut.Render(pb => pb.Add(a => a.SideCollapsedWidth, "20%"));
+        cut.Contains("--bb-layout-sidebar-collapse-width: 20%;");
+
+        cut.Render(pb => pb.Add(a => a.SideCollapsedWidth, null));
+        cut.DoesNotContain("--bb-layout-sidebar-collapse-width");
+    }
+
     [Fact]
     public void UseTabSet_OK()
     {