refactor: 使用 div 元素渲染按钮

Author: ArgoZhang

src/BootstrapBlazor/Components/Layout/Layout.razor

@@ -88,9 +88,9 @@
         {
             @if (CollapseBarTemplate == null)
             {
-                <a data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="@TooltipText" class="layout-header-bar">
+                <div data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="@TooltipText" class="layout-header-bar" @onclick="ToggleSidebar">
                     <i class="@MenuBarIcon"></i>
-                </a>
+                </div>
             }
             else
             {

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

@@ -235,6 +235,7 @@ public partial class Layout : IHandlerException
     private string? ClassString => CssBuilder.Default("layout")
         .AddClass("has-sidebar", Side != null && IsFullSide)
         .AddClass("has-footer", ShowFooter && Footer != null)
+        .AddClass("is-collapsed", IsCollapsed)
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
 
@@ -442,13 +443,8 @@ private void Navigation_LocationChanged(object? sender, LocationChangedEventArgs
         }
     }
 
-    /// <summary>
-    /// 点击 收缩展开按钮时回调此方法
-    /// </summary>
-    /// <returns></returns>
-    private async Task CollapseMenu()
+    private async Task TriggerCollapseChanged()
     {
-        IsCollapsed = !IsCollapsed;
         if (IsCollapsedChanged.HasDelegate)
         {
             await IsCollapsedChanged.InvokeAsync(IsCollapsed);
@@ -469,7 +465,8 @@ private Func<MenuItem, Task> ClickMenu() => async item =>
         // 小屏幕时生效
         if (IsSmallScreen && !item.Items.Any())
         {
-            await CollapseMenu();
+            IsCollapsed = false;
+            await TriggerCollapseChanged();
         }
 
         if (OnClickMenu != null)
@@ -478,6 +475,11 @@ private Func<MenuItem, Task> ClickMenu() => async item =>
         }
     };
 
+    private void ToggleSidebar()
+    {
+        IsCollapsed = !IsCollapsed;
+    }
+
     /// <summary>
     /// 上次渲染错误内容
     /// </summary>

src/BootstrapBlazor/Components/Layout/Layout.razor.scss

@@ -171,6 +171,7 @@
             background-color: var(--bb-layout-headerbar-background);
             border: var(--bs-border-width) solid var(--bb-layout-headerbar-border-color);
             border-radius: var(--bs-border-radius);
+            cursor: pointer;
 
             .fa-bars {
                 transition: transform .3s linear;