fix(frontend): ajouter Bibliothèque dans le sidebar desktop App.vue

This commit is contained in:
2026-02-22 13:05:41 +01:00
parent de2b95ff94
commit fa23dd8f2b

View File

@@ -1,16 +1,57 @@
<template>
<AppHeader @toggle-drawer="drawerOpen = !drawerOpen" />
<!-- Mobile: header + drawer -->
<AppHeader class="lg:hidden" @toggle-drawer="drawerOpen = !drawerOpen" />
<AppDrawer :open="drawerOpen" @close="drawerOpen = false" />
<main class="pt-14 min-h-screen">
<!-- Desktop: sidebar fixe + contenu -->
<div class="lg:flex">
<!-- Sidebar desktop -->
<aside class="hidden lg:flex lg:flex-col lg:fixed lg:inset-y-0 lg:w-60 bg-bg-hard border-r border-bg-soft z-30">
<div class="px-5 pt-6 pb-4 border-b border-bg-soft">
<RouterLink to="/" class="text-green font-bold text-xl tracking-wide flex items-center gap-2">
🌿 <span>Jardin</span>
</RouterLink>
</div>
<nav class="flex-1 py-4 px-3 flex flex-col gap-0.5 overflow-y-auto">
<RouterLink
v-for="l in links" :key="l.to" :to="l.to"
class="flex items-center gap-3 text-text-muted hover:text-text py-2 px-3 rounded-lg text-sm transition-colors group"
active-class="bg-bg-soft text-green font-medium"
>
<span class="text-base leading-none">{{ l.icon }}</span>
<span>{{ l.label }}</span>
</RouterLink>
</nav>
<div class="px-4 py-4 border-t border-bg-soft text-text-muted text-xs">
🌱 Jardin App
</div>
</aside>
<!-- Main content -->
<main class="pt-14 lg:pt-0 lg:pl-60 min-h-screen w-full">
<RouterView />
</main>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { RouterView } from 'vue-router'
import { RouterLink, RouterView } from 'vue-router'
import AppHeader from '@/components/AppHeader.vue'
import AppDrawer from '@/components/AppDrawer.vue'
const drawerOpen = ref(false)
const links = [
{ to: '/', label: 'Dashboard', icon: '🏠' },
{ to: '/jardins', label: 'Jardins', icon: '🪴' },
{ to: '/plantes', label: 'Plantes', icon: '🌱' },
{ to: '/bibliotheque', label: 'Bibliothèque', icon: '📷' },
{ to: '/outils', label: 'Outils', icon: '🔧' },
{ to: '/plantations', label: 'Plantations', icon: '🥕' },
{ to: '/taches', label: 'Tâches', icon: '✅' },
{ to: '/planning', label: 'Planning', icon: '📆' },
{ to: '/calendrier', label: 'Calendrier', icon: '🌙' },
{ to: '/reglages', label: 'Réglages', icon: '⚙️' },
]
</script>