artlef/bibliomane
1
0
Fork 0
Code Issues 11 Pull Requests Actions Packages Projects 1 Releases 3 Wiki Activity

Mobile: add burger to display navigation menu

Browse Source
This commit is contained in:
Arthur Lefebvre
2026-02-11 15:02:45 +01:00
parent e009fea796
commit aae5310802
1 changed files with 31 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
front/src/AppNavBar.vue
View File

@@ -8,11 +8,13 @@
const router = useRouter(); const router = useRouter();
const popupDisplay = ref(false) const popupDisplay = ref(false)
const isMenuActive = ref(false)
function logout() { function logout() {
authStore.logout(); authStore.logout();
router.push('/'); router.push('/');
} }
</script> </script>
<template> <template>
@@ -21,10 +23,18 @@
<RouterLink to="/" class="navbar-item" activeClass="is-active"> <RouterLink to="/" class="navbar-item" activeClass="is-active">
PLM PLM
</RouterLink> </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>
<div class="navbar-menu"> <div id="navmenu" class="navbar-menu" :class="isMenuActive ? 'is-active' : '' ">
<div class="navbar-start"> <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"> <RouterLink v-if="authStore.user" to="/books" class="navbar-item" activeClass="is-active">
{{ $t('navbar.mybooks')}} {{ $t('navbar.mybooks')}}
</RouterLink> </RouterLink>
@@ -32,30 +42,28 @@
{{ $t('navbar.addbook')}} {{ $t('navbar.addbook')}}
</RouterLink> </RouterLink>
</div> </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> </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> </nav>
</template> </template>