Layout admin panel (!13)
| Numéro du ticket | Layout admin panel | |------------------|-----------------| | | | ## Description de la PR ## Modification du .env ## Check list - [x] Pas de régression - [ ] TU/TI/TF rédigée - [x] TU/TI/TF OK - [ ] CHANGELOG modifié Reviewed-on: #13 Co-authored-by: Matteo <matteo@yuno.malio.fr> Co-committed-by: Matteo <matteo@yuno.malio.fr>
This commit was merged in pull request #13.
This commit is contained in:
2
.idea/workspace.xml
generated
2
.idea/workspace.xml
generated
@@ -777,4 +777,4 @@
|
|||||||
<option value=".github/prompts" />
|
<option value=".github/prompts" />
|
||||||
</promptFileLocations>
|
</promptFileLocations>
|
||||||
</component>
|
</component>
|
||||||
</project>
|
</project>
|
||||||
|
|||||||
61
frontend/layouts/admin.vue
Normal file
61
frontend/layouts/admin.vue
Normal file
@@ -0,0 +1,61 @@
|
|||||||
|
<template>
|
||||||
|
<div class="min-h-screen text-neutral-900 grid grid-rows-[85px,1fr]">
|
||||||
|
<!-- HEADER -->
|
||||||
|
<header class="bg-primary-500 z-50 h-[85px]">
|
||||||
|
<div class="h-full w-full px-6 grid grid-cols-[auto,1fr,auto] items-center gap-8">
|
||||||
|
<NuxtLink to="/" class="grid place-items-center">
|
||||||
|
<span class="grid place-items-center bg-white text-xl font-bold uppercase text-primary-500 p-4">
|
||||||
|
LOGO
|
||||||
|
</span>
|
||||||
|
</NuxtLink>
|
||||||
|
|
||||||
|
<nav class="text-2xl font-bold uppercase text-white"></nav>
|
||||||
|
|
||||||
|
<NuxtLink
|
||||||
|
to="/"
|
||||||
|
class="text-xl font-bold uppercase text-white transition hover:opacity-80 justify-self-end"
|
||||||
|
>
|
||||||
|
Quitter le panel admin
|
||||||
|
</NuxtLink>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-[16rem,1fr] h-[calc(100vh-85px)] min-h-0">
|
||||||
|
<aside class="bg-primary-500 text-white min-h-0 grid grid-rows-[auto,1fr,auto]">
|
||||||
|
<div class="p-4 font-semibold">Tableau de bord</div>
|
||||||
|
|
||||||
|
<div class="overflow-y-auto min-h-0 p-4 space-y-3">
|
||||||
|
<!-- Liste des liens à ajouter ci-dessous -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4">
|
||||||
|
<button
|
||||||
|
@click="handleLogout"
|
||||||
|
class="w-full bg-red-600 hover:bg-red-700 py-2 rounded font-bold"
|
||||||
|
>
|
||||||
|
Déconnexion
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<main class="min-h-0 overflow-auto px-12 py-12 ">
|
||||||
|
<div class="w-full ">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
const handleLogout = async () => {
|
||||||
|
try {
|
||||||
|
await auth.logout()
|
||||||
|
} finally {
|
||||||
|
await navigateTo('/login')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -20,6 +20,14 @@
|
|||||||
Accueil
|
Accueil
|
||||||
</a>
|
</a>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
|
<NuxtLink to="/admin/dashboard" custom v-slot="{ href, navigate, isActive }">
|
||||||
|
<a
|
||||||
|
:href="href"
|
||||||
|
@click="navigate"
|
||||||
|
>
|
||||||
|
Admin
|
||||||
|
</a>
|
||||||
|
</NuxtLink>
|
||||||
</nav>
|
</nav>
|
||||||
<NuxtLink to="/" class="flex flex-1 items-center justify-center gap-3">
|
<NuxtLink to="/" class="flex flex-1 items-center justify-center gap-3">
|
||||||
<span
|
<span
|
||||||
@@ -100,7 +108,6 @@ import { useAuthStore } from '~/stores/auth'
|
|||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const auth = useAuthStore()
|
const auth = useAuthStore()
|
||||||
const isReceptionActive = computed(() => route.path.startsWith('/reception'))
|
|
||||||
const isMenuOpen = ref(false)
|
const isMenuOpen = ref(false)
|
||||||
|
|
||||||
const closeMenu = () => {
|
const closeMenu = () => {
|
||||||
|
|||||||
13
frontend/pages/admin/dashboard.vue
Normal file
13
frontend/pages/admin/dashboard.vue
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
definePageMeta({
|
||||||
|
layout: 'admin'
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<h1>test</h1>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user