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

feat : layout administration (WIP)

Browse Source
This commit is contained in:
Mattéo Dunoyer
2026-02-05 16:47:01 +01:00
parent 3062709f08
commit c186e6a5e1
4 changed files with 83 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
frontend/layouts/admin.vue
View File

@@ -1,47 +1,72 @@
<template>
<div class="min-h-screen bg-white text-neutral-900">
<header class="fixed top-0 left-0 right-0 z-50 border-b border-neutral-200 bg-primary-500 h-[85px]">
<div class="flex h-full w-full items-center px-6">
<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">
<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="mx-8 flex flex-1 gap-8 text-2xl font-bold uppercase text-white"></nav>
<nav class="text-2xl font-bold uppercase text-white"></nav>
<NuxtLink to="/" class="ml-auto text-xl font-bold uppercase text-white transition hover:opacity-80">
<NuxtLink
to="/"
class="text-xl font-bold uppercase text-white transition hover:opacity-80 justify-self-end"
>
Quitter le panel admin
</NuxtLink>
</div>
</header>
<aside
class="fixed left-0 top-[85px] z-40 w-64 h-[calc(100vh-85px)] bg-primary-500 text-white flex flex-col"
>
<div class="flex-1 overflow-y-auto p-4 space-y-4">
Dashboard
</div>
<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="p-4 border-t border-neutral-700">
<button
@click="handleLogout"
class="w-full bg-red-600 hover:bg-red-700 py-2 rounded font-bold"
>
Déconnexion
</button>
</div>
</aside>
<div class="overflow-y-auto min-h-0 p-4 space-y-3">
<!-- Ici il faut une list des entite modifiable -->
<div>Réception</div>
<div>Expédition</div>
<div>Véhicule</div>
<div>Poids</div>
<div>Fournisseur</div>
<div>Bovin</div>
<div>Type de livraison</div>
<div>Client</div>
<div>Transporteur</div>
<div>Adresse</div>
<div>Utilisateur</div>
<div>Batiments</div>
<div>Driver</div>
<div>Toto</div>
<div>Toto</div>
<div>Toto</div>
</div>
<main class="pt-[85px] ml-64 px-6">
<div class="mx-auto w-full max-w-[1280px] py-6">
<slot/>
</div>
</main>
<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 -->
<main class="min-h-0 overflow-auto px-6 py-6">
<div class="mx-auto w-full max-w-[1280px] py-6">
<slot />
</div>
</main>
</div>
</div>
</template>
<script setup lang="ts">
const handleLogout = async () => {
try {
await auth.logout()