左侧折叠

templates/index.html

@@ -20,8 +20,19 @@
 </div>
 {% endif %}
 {% endwith %}
-<div class="layout-main">
-  <aside class="sidebar" id="sidebar">
+<div class="layout-main" id="layout-main">
+  <aside class="sidebar" id="sidebar" aria-label="服务分组导航">
+    <div class="sidebar-toolbar">
+      <button
+        type="button"
+        class="btn-sidebar-toggle"
+        id="sidebar-collapse"
+        title="收起侧栏"
+        aria-label="收起侧栏"
+      >
+        ⟨
+      </button>
+    </div>
     {% for group, services in grouped %}
     <div class="sidebar-section">
       <h2>{{ group.name }}</h2>
@@ -44,6 +55,16 @@
     </div>
     {% endfor %}
   </aside>
+  <button
+    type="button"
+    class="btn-sidebar-expand"
+    id="sidebar-expand"
+    title="展开侧栏"
+    aria-label="展开侧栏"
+    hidden
+  >
+    ⟩
+  </button>
   <div class="content-column">
     <div class="service-dashboard" id="service-dashboard">
       {% for group, services in grouped %}
@@ -90,6 +111,37 @@
 </div>
 <script>
   (function () {
+    var layoutMain = document.getElementById("layout-main");
+    var btnSidebarCollapse = document.getElementById("sidebar-collapse");
+    var btnSidebarExpand = document.getElementById("sidebar-expand");
+    var sidebarCollapsedKey = "localnav_sidebar_collapsed";
+
+    function setSidebarCollapsed(collapsed) {
+      if (!layoutMain) return;
+      layoutMain.classList.toggle("sidebar-collapsed", collapsed);
+      if (btnSidebarExpand) btnSidebarExpand.hidden = !collapsed;
+    }
+
+    if (layoutMain && btnSidebarCollapse && btnSidebarExpand) {
+      try {
+        setSidebarCollapsed(localStorage.getItem(sidebarCollapsedKey) === "1");
+      } catch (e) {
+        setSidebarCollapsed(false);
+      }
+      btnSidebarCollapse.addEventListener("click", function () {
+        setSidebarCollapsed(true);
+        try {
+          localStorage.setItem(sidebarCollapsedKey, "1");
+        } catch (e) {}
+      });
+      btnSidebarExpand.addEventListener("click", function () {
+        setSidebarCollapsed(false);
+        try {
+          localStorage.setItem(sidebarCollapsedKey, "0");
+        } catch (e) {}
+      });
+    }
+
     var frame = document.getElementById("svc-frame");
     var dashboard = document.getElementById("service-dashboard");
     var frameStack = document.getElementById("frame-stack");