<template>
  <v-app-bar-nav-icon v-on:click="menu = !menu"></v-app-bar-nav-icon>
  <v-menu v-model="menu" class="menu-below-bar">
    <v-list>
      <v-list-item v-for="route in routes" :key="route.name" :to="route.path">{{ route.name }}</v-list-item>
    </v-list>
  </v-menu>
</template>

<script setup>
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'

  const router = useRouter()
  const routes = router.options.routes

  let menu = ref(false)
</script>

<style scoped>
  .menu-below-bar {
    margin-top: 48px; /* La hauteur de la barre d'application */
  }
</style>
