Improvements

Author: jason5ng32

src/App.vue

@@ -561,9 +561,15 @@ export default {
     // 监听所有 offcanvas，避免同时打开多个导致浏览器崩溃
     listenOffcanvas() {
       const offcanvasElements = document.querySelectorAll('.offcanvas');
+      const navElements = document.getElementById('navbarNavAltMarkup');
+      const navElementsButton = document.querySelector('.navbar-toggler');
       offcanvasElements.forEach((element) => {
         const instance = Offcanvas.getOrCreateInstance(element); // 确保实例创建成功
         element.addEventListener('show.bs.offcanvas', () => {
+          // 存在 Offcanvas 时关闭导航栏
+          navElements.classList.remove('show');
+          navElementsButton.setAttribute('aria-expanded', 'false');
+          navElementsButton.classList.add('collapsed');
           // 关闭所有其他的 offcanvas
           offcanvasElements.forEach((offcanvas) => {
             if (offcanvas !== element) {

src/components/nav.vue

@@ -43,7 +43,8 @@
 
     </div>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
-      aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
+      aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"
+      @click="closeAllOffCanvas">
       <span class="navbar-toggler-icon bg-transparent "></span>
     </button>
     <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
@@ -106,6 +107,15 @@ export default {
   },
   methods: {
 
+    closeAllOffCanvas() {
+      document.querySelectorAll('.offcanvas').forEach((offcanvas) => {
+        const instance = Offcanvas.getInstance(offcanvas);
+        if (instance) {
+          instance.hide();
+        }
+      });
+    },
+
     // 打开偏好设置
     OpenPreferences() {
       var offcanvasElement = document.getElementById('offcanvasPreferences');