<template>
  <Transition name="slide">
    <div v-if="open" class="fixed inset-0 z-40 flex md:hidden" @click.self="$emit('close')">
      <nav class="bg-bg-hard w-64 h-full p-6 flex flex-col gap-1 border-r border-bg-soft shadow-2xl">
        <span class="text-green font-bold text-xl mb-6">🌿 Jardin</span>
        <RouterLink
          v-for="l in links" :key="l.to" :to="l.to"
          class="text-text-muted hover:text-text py-2 px-3 rounded-lg text-sm transition-colors"
          active-class="bg-bg-soft text-green"
          @click="$emit('close')"
        >{{ l.label }}</RouterLink>
      </nav>
    </div>
  </Transition>
</template>

<script setup lang="ts">
import { RouterLink } from 'vue-router'
defineProps<{ open: boolean }>()
defineEmits(['close'])
const links = [
  { to: '/', label: 'Dashboard' },
  { to: '/jardins', label: 'Jardins' },
  { to: '/plantes', label: 'Plantes' },
  { to: '/bibliotheque', label: '📷 Bibliothèque' },
  { to: '/outils', label: 'Outils' },
  { to: '/plantations', label: 'Plantations' },
  { to: '/taches', label: 'Tâches' },
  { to: '/planning', label: 'Planning' },
  { to: '/calendrier', label: 'Calendrier' },
  { to: '/reglages', label: 'Réglages' },
]
</script>

<style scoped>
.slide-enter-active, .slide-leave-active { transition: opacity 0.2s; }
.slide-enter-from, .slide-leave-to { opacity: 0; }
</style>
