<script>
// Il s'agit de la bar de navigation principale pour passer d'une vue a l'autre
</script>

<template>
  <v-app-bar :elevation="12">
    <!-- TODO: Ici je voudrai ouvrir un menu en cliquant sur le v-app-bar-nav-icon -->
    <v-app-bar-nav-icon @click="menu = !menu"></v-app-bar-nav-icon>
    <v-menu v-model="menu" offset-y>
      <template v-slot:activator="{ on }">
        <v-btn v-on="on" color="primary">Menu</v-btn>
      </template>
      <v-list>
        <v-list-item>Item 1</v-list-item>
        <v-list-item>Item 2</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 { useTheme } from 'vuetify'

  const theme = useTheme()

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