feat : layout administration (WIP)
This commit is contained in:
@@ -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()
|
||||
|
||||
@@ -28,6 +28,15 @@
|
||||
Reception
|
||||
</a>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/admin/dashboard" custom v-slot="{ href, navigate, isActive }">
|
||||
<a
|
||||
:href="href"
|
||||
@click="navigate"
|
||||
:class="isReceptionActive ? 'opacity-100' : 'opacity-50'"
|
||||
>
|
||||
Admin
|
||||
</a>
|
||||
</NuxtLink>
|
||||
</nav>
|
||||
<button
|
||||
type="button"
|
||||
|
||||
@@ -5,7 +5,11 @@ definePageMeta({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>test</h1>
|
||||
<h1>Quam ob rem id primum videamus, si placet, quatenus amor in amicitia progredi debeat. Numne, si Coriolanus habuit amicos, ferre contra patriam arma illi cum Coriolano debuerunt? num Vecellinum amici regnum adpetentem, num Maelium debuerunt iuvare?
|
||||
|
||||
Cum haec taliaque sollicitas eius aures everberarent expositas semper eius modi rumoribus et patentes, varia animo tum miscente consilia, tandem id ut optimum factu elegit: et Vrsicinum primum ad se venire summo cum honore mandavit ea specie ut pro rerum tunc urgentium captu disponeretur concordi consilio, quibus virium incrementis Parthicarum gentium a arma minantium impetus frangerentur.
|
||||
|
||||
Ciliciam vero, quae Cydno amni exultat, Tarsus nobilitat, urbs perspicabilis hanc condidisse Perseus memoratur, Iovis filius et Danaes, vel certe ex Aethiopia profectus Sandan quidam nomine vir opulentus et nobilis et Anazarbus auctoris vocabulum referens, et Mopsuestia vatis illius domicilium Mopsi, quem a conmilitio Argonautarum cum aureo vellere direpto redirent, errore abstractum delatumque ad Africae litus mors repentina consumpsit, et ex eo cespite punico tecti manes eius heroici dolorum varietati medentur plerumque sospitales.</h1>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
Reference in New Issue
Block a user