Mobile: add burger to display navigation menu

front/src/AppNavBar.vue

@@ -8,11 +8,13 @@
   const router = useRouter();
 
   const popupDisplay = ref(false)
+  const isMenuActive = ref(false)
 
   function logout() {
     authStore.logout();
     router.push('/');
   }
+
 </script>
 
 <template>
@@ -21,10 +23,18 @@
         <RouterLink to="/" class="navbar-item" activeClass="is-active">
         PLM
         </RouterLink>
+        <a role="button" class="navbar-burger" aria-label="menu"
+          :class="isMenuActive ? 'is-active' : '' " :aria-expanded="isMenuActive"
+          @click="isMenuActive = !isMenuActive">
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+        </a>
     </div>
-    <div class="navbar-menu">
+    <div id="navmenu" class="navbar-menu" :class="isMenuActive ? 'is-active' : '' ">
       <div class="navbar-start">
-        <NavBarSearch @open-scan-popup="popupDisplay = true"/>
+        <NavBarSearch @open-scan-popup="popupDisplay = true" class="is-hidden-mobile"/>
         <RouterLink v-if="authStore.user" to="/books" class="navbar-item" activeClass="is-active">
           {{ $t('navbar.mybooks')}}
         </RouterLink>
@@ -32,11 +42,7 @@
           {{ $t('navbar.addbook')}}
         </RouterLink>
       </div>
-      <div class="navbar-end">
+      <div class="navbar-end is-hidden-mobile">
-      </div>
-    </div>
-
-    <div class="navbar-end">
         <div v-if="authStore.user" class="navbar-item">
           <div >
             {{ authStore.user.username }}
@@ -56,6 +62,8 @@
           </div>
         </div>
       </div>
+    </div>
+
 </nav>
 </template>