feat(AutoPer): add CollapseBar function (#8)

* refactor: 增加 CollapseBar 组件

* refactor: 增加侧边栏收起功能

src/Auto-Per/BootstrapBlazorApp/Components/Layout/CollapseBar.razor

@@ -0,0 +1,9 @@
+@inherits BootstrapModuleComponentBase
+@attribute [JSModuleAutoLoader("./Components/Layout/CollapseBar.razor.js", AutoInvokeDispose = false)]
+@rendermode InteractiveServer
+
+<Tooltip Title="展开/收起菜单" Trigger="hover" Placement="Placement.Right">
+    <a id="@Id" class="layout-header-bar">
+        <i class="fa-solid fa-bars"></i>
+    </a>
+</Tooltip>

src/Auto-Per/BootstrapBlazorApp/Components/Layout/CollapseBar.razor.js

@@ -0,0 +1,26 @@
+import EventHandler from "../../_content/BootstrapBlazor/modules/event-handler.js"
+
+export function init(id) {
+    const el = document.getElementById(id);
+    if (el === null) {
+        return;
+    }
+
+    EventHandler.on(el, 'click', e => {
+        e.preventDefault();
+
+        const layout = document.querySelector('.layout');
+        if (layout) {
+            layout.classList.toggle('is-collapsed');
+        }
+    });
+}
+
+export function dispose(id) {
+    const el = document.getElementById(id);
+    if (el === null) {
+        return;
+    }
+
+    EventHandler.off(el, 'click');
+}

src/Auto-Per/BootstrapBlazorApp/Components/Layout/MainLayout.razor

@@ -1,10 +1,12 @@
 @inherits LayoutComponentBase
 
-<Layout ShowGotoTop="true" ShowCollapseBar="true" ShowFooter="@ShowFooter" SideWidth="0"
+<Layout ShowGotoTop="true" ShowCollapseBar="false" ShowFooter="@ShowFooter" SideWidth="0"
         IsPage="true" IsFullSide="@IsFullSide" IsFixedHeader="@IsFixedHeader" IsFixedFooter="@IsFixedFooter"
-        TabDefaultUrl="/" UseTabSet="@UseTabSet" AdditionalAssemblies="new[] { GetType().Assembly, typeof(BootstrapBlazorApp.Client._Imports).Assembly }"
-        Menus="@Menus" class="@Theme">
+        TabDefaultUrl="/" UseTabSet="false" Menus="Menus"
+        AdditionalAssemblies="new[] { GetType().Assembly, typeof(BootstrapBlazorApp.Client._Imports).Assembly }"
+        class="@Theme">
     <Header>
+        <CollapseBar></CollapseBar>
         <span class="ms-3 flex-sm-fill d-none d-sm-block">Bootstrap of Blazor</span>
         <div class="flex-fill d-sm-none">
         </div>

src/Auto-Per/BootstrapBlazorApp/Components/Layout/MainLayout.razor.cs

@@ -5,8 +5,6 @@ namespace BootstrapBlazorApp.Components.Layout;
 
 public partial class MainLayout
 {
-    private bool UseTabSet { get; set; } = true;
-
     private string Theme { get; set; } = "";
 
     private bool IsFixedHeader { get; set; } = true;