From aae5310802539712133720c9d2b51a478646ca8b Mon Sep 17 00:00:00 2001
From: Arthur Lefebvre <artlef@protonmail.com>
Date: Wed, 11 Feb 2026 15:02:45 +0100
Subject: [PATCH] Mobile: add burger to display navigation menu

---
 front/src/AppNavBar.vue | 54 +++++++++++++++++++++++------------------
 1 file changed, 31 insertions(+), 23 deletions(-)

diff --git a/front/src/AppNavBar.vue b/front/src/AppNavBar.vue
index 602a195..bf9500e 100644
--- a/front/src/AppNavBar.vue
+++ b/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,30 +42,28 @@
           {{ $t('navbar.addbook')}}
         </RouterLink>
       </div>
-      <div class="navbar-end">
+      <div class="navbar-end is-hidden-mobile">
+        <div v-if="authStore.user" class="navbar-item">
+          <div >
+            {{ authStore.user.username }}
+          </div>
+            <a @click="logout" class="button is-light">
+              {{ $t('navbar.logout')}}
+            </a>
+        </div>
+        <div v-else class="navbar-item">
+          <div  class="buttons">
+            <RouterLink to="/signup" class="button is-primary">
+            <strong>{{ $t('navbar.signup')}}</strong>
+            </RouterLink>
+            <RouterLink to="/login" class="button is-light">
+            {{ $t('navbar.login')}}
+            </RouterLink>
+          </div>
+        </div>
       </div>
     </div>
 
-    <div class="navbar-end">
-      <div v-if="authStore.user" class="navbar-item">
-        <div >
-           {{ authStore.user.username }}
-        </div>
-        <a @click="logout" class="button is-light">
-          {{ $t('navbar.logout')}}
-        </a>
-      </div>
-      <div v-else class="navbar-item">
-        <div  class="buttons">
-          <RouterLink to="/signup" class="button is-primary">
-            <strong>{{ $t('navbar.signup')}}</strong>
-          </RouterLink>
-          <RouterLink to="/login" class="button is-light">
-            {{ $t('navbar.login')}}
-          </RouterLink>
-        </div>
-      </div>
-    </div>
 </nav>
 </template>