BrainBlast/src/components/BrainBlastBar.vue

<template>
  <v-app-bar :elevation="12">
    <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>

    <v-app-bar-title>Brain Blast</v-app-bar-title>

    <template v-slot:append>
      <v-btn @click="toggleTheme" icon="mdi-theme-light-dark"></v-btn>
    </template>
  </v-app-bar>
</template>

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

  const theme = useTheme()
  const router = useRouter();
  const routes = router.options.routes;

  let menu = ref(false)

  function toggleTheme () {
    theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
  }

</script>

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