Layout admin panel #13

Merged
Matteo merged 6 commits from feat/front-end-layout-admin into develop 2026-02-06 08:22:09 +00:00
4 changed files with 83 additions and 2 deletions

2
.idea/workspace.xml generated
View File

@@ -777,4 +777,4 @@
<option value=".github/prompts" /> <option value=".github/prompts" />
</promptFileLocations> </promptFileLocations>
</component> </component>
</project> </project>

View 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>

View File

@@ -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 = () => {

View File

@@ -0,0 +1,13 @@
<script setup lang="ts">
definePageMeta({
layout: 'admin'
})
</script>
<template>
<h1>test</h1>
</template>
<style scoped>
</style>