MALIO-DEV/Ferme
4
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases 80 Wiki Activity

feat : ajout du responsive sur la navbar et la page d'accueil
All checks were successful
Auto Tag Develop / tag (push) Successful in 4s
Details
Build Release Artefact / build (push) Successful in 1m10s
Details

Browse Source
This commit is contained in:
Autin
2026-02-05 17:28:49 +01:00
parent e9948d6ac3
commit 4a0d38d307
4 changed files with 151 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
frontend/layouts/default.vue
View File

@@ -2,14 +2,15 @@
<div class="min-h-screen bg-white text-neutral-900">
<header class="w-full border-b border-neutral-200 bg-primary-500">
<div class="flex w-full items-center px-6 py-4">
<NuxtLink to="/" class="flex items-center gap-3">
<span
class="flex items-center justify-center bg-white text-xl font-bold uppercase text-primary-500 p-4"
>
LOGO
</span>
</NuxtLink>
<nav class="mx-8 flex flex-1 gap-8 text-2xl font-bold uppercase text-white">
<button
type="button"
class="inline-flex items-center justify-center text-3xl text-white md:hidden"
aria-label="Ouvrir le menu"
@click="toggleMenu"
>
<span aria-hidden="true">☰</span>
</button>
<nav class="ml-4 hidden items-center gap-8 text-2xl font-bold uppercase text-white md:flex">
<NuxtLink to="/" custom v-slot="{ href, navigate, isExactActive }">
<a
:href="href"
@@ -19,26 +20,75 @@
Accueil
</a>
</NuxtLink>
<NuxtLink to="/reception" custom v-slot="{ href, navigate, isActive }">
<a
:href="href"
@click="navigate"
:class="isReceptionActive ? 'opacity-100' : 'opacity-50'"
>
Reception
</a>
</NuxtLink>
</nav>
<NuxtLink to="/" class="flex flex-1 items-center justify-center gap-3">
<span
class="flex items-center justify-center bg-white text-xl font-bold uppercase text-primary-500 p-4"
>
LOGO
</span>
</NuxtLink>
<button
type="button"
class="ml-auto text-xl font-bold uppercase text-white transition hover:opacity-80"
class="ml-auto hidden text-xl font-bold uppercase text-white transition hover:opacity-80 md:inline-flex"
@click="handleLogout"
>
Déconnexion
</button>
</div>
<transition
enter-active-class="transition duration-200 ease-out"
enter-from-class="opacity-0"
enter-to-class="opacity-100"
leave-active-class="transition duration-150 ease-in"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<div
v-if="isMenuOpen"
class="fixed inset-0 z-40 bg-black/40 md:hidden"
@click="closeMenu"
/>
</transition>
<transition
enter-active-class="transition duration-200 ease-out"
enter-from-class="-translate-x-full"
enter-to-class="translate-x-0"
leave-active-class="transition duration-150 ease-in"
leave-from-class="translate-x-0"
leave-to-class="-translate-x-full"
>
<aside
v-if="isMenuOpen"
class="fixed left-0 top-0 z-50 h-full w-full bg-primary-600 px-6 pb-8 pt-6 text-white shadow-xl md:hidden"
role="dialog"
aria-modal="true"
>
<div class="flex items-center justify-between">
<span class="text-2xl font-bold uppercase">Menu</span>
<button
type="button"
class="text-2xl"
aria-label="Fermer le menu"
@click="closeMenu"
>
<Icon name="mdi:close" size="44"/>
</button>
</div>
<nav class="mt-8 flex flex-col gap-6 text-xl font-bold uppercase">
<NuxtLink to="/" class="opacity-100" @click="closeMenu">Accueil</NuxtLink>
</nav>
<button
type="button"
class="mt-5 text-xl font-bold uppercase"
@click="handleLogout"
>
Déconnexion
</button>
</aside>
</transition>
</header>
<main class="mx-auto w-full max-w-[1280px] px-6 pt-[85px] pb-0">
<main class="mx-auto w-full max-w-[1280px] pb-0">
<slot/>
</main>
</div>
@@ -50,11 +100,21 @@ import { useAuthStore } from '~/stores/auth'
const route = useRoute()
const auth = useAuthStore()
const isReceptionActive = computed(() => route.path.startsWith('/reception'))
const isMenuOpen = ref(false)
const closeMenu = () => {
isMenuOpen.value = false
}
const toggleMenu = () => {
isMenuOpen.value = !isMenuOpen.value
}
const handleLogout = async () => {
try {
await auth.logout()
} finally {
closeMenu()
await navigateTo('/login')
}
}