38 lines
1014 B
Vue
38 lines
1014 B
Vue
|
<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>
|