asco.fablab/BrainBlast
11
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

Creation d'un composant pour l'app bar

Browse Source
This commit is contained in:
Laurent 2024-02-21 06:50:02 +00:00
parent c4806cd2c5
commit 0e5f144ffb
2 changed files with 50 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/App.vue
View File

@ -1,35 +1,6 @@
<template>
<v-app>
<v-system-bar>
<v-icon icon="mdi-wifi-strength-4"></v-icon>
<v-icon icon="mdi-signal" class="ms-2"></v-icon>
<v-icon icon="mdi-battery" class="ms-2"></v-icon>
<span class="ms-2">3:14AM</span>
</v-system-bar>
<v-app-bar :elevation="12">
<template v-slot:prepend>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
</template>
<v-app-bar-title>Brain Blast</v-app-bar-title>
<template v-slot:append>
<v-btn @click="toggleTheme">Toggle Theme</v-btn>
<v-btn icon="mdi-heart"></v-btn>
<v-btn icon="mdi-magnify"></v-btn>
<v-btn icon="mdi-dots-vertical"></v-btn>
</template>
</v-app-bar>
<v-navigation-drawer>
<v-list-item title="Brain Blast" subtitle="The cultural quizzzz"></v-list-item>
<v-divider></v-divider>
<v-list-item link title="List Item 1"></v-list-item>
<v-list-item link title="List Item 2"></v-list-item>
<v-list-item link title="List Item 3"></v-list-item>
</v-navigation-drawer>
<AppAppBar />
<v-main>
<HelloWorld msg="PIGNOUF ! " />
<RouterLink to="/">Home</RouterLink>
@ -41,13 +12,3 @@
<v-footer :elevation=12 border><v-row justify="center">ASCO - Fablab</v-row></v-footer>
</v-app>
</template>
<script setup>
import { useTheme } from 'vuetify'
const theme = useTheme()
function toggleTheme () {
theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
}
</script>

49
src/components/AppAppBar.vue Normal file
View File

@ -0,0 +1,49 @@
<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>
<v-btn icon="mdi-settings-helper"></v-btn>
</template>
</v-app-bar>
<!-- Settings contextuels a chaques pages,
TODO : composant a masquer avec le v-btn mdi-setting-helper -->
<v-navigation-drawer>
<v-list-item title="Brain Blast" subtitle="The cultural quizzzz"></v-list-item>
<v-divider></v-divider>
<v-list-item link title="List Item 1"></v-list-item>
<v-list-item link title="List Item 2"></v-list-item>
<v-list-item link title="List Item 3"></v-list-item>
</v-navigation-drawer>
</template>
<script setup>
import { useTheme } from 'vuetify'
const theme = useTheme()
function toggleTheme () {
theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
}
</script>