Close burger 'menu' when clicking items in mobile view.

knadh · Jan 5, 2022 · 2f56057 · 2f56057
1 parent b0787f7
commit 2f56057
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -1,15 +1,15 @@
 <template>
   <div id="app">
     <b-navbar :fixed-top="true" v-if="$root.isLoaded">
-        <template slot="brand">
+        <template #brand>
           <div class="logo">
             <router-link :to="{name: 'dashboard'}">
               <img class="full" src="@/assets/logo.svg"/>
               <img class="favicon" src="@/assets/favicon.png"/>
             </router-link>
           </div>
         </template>
-        <template slot="end">
+        <template #end>
           <navigation v-if="isMobile" :isMobile="isMobile"
             :activeItem="activeItem" :activeGroup="activeGroup" @toggleGroup="toggleGroup"
             @doLogout="doLogout" />

diff --git a/frontend/src/components/Navigation.vue b/frontend/src/components/Navigation.vue
@@ -100,6 +100,18 @@ export default {
       this.$emit('doLogout');
     },
   },
+
+  mounted() {
+    // A hack to close the open accordion burger menu items on click.
+    // Buefy does not have a way to do this.
+    if (this.isMobile) {
+      document.querySelectorAll('.navbar li a[href]').forEach((e) => {
+        e.onclick = () => {
+          document.querySelector('.navbar-burger').click();
+        };
+      });
+    }
+  },
 };
 
 </script>