791aebc346
Some checks failed
continuous-integration/drone/push Build is failing
- Complete GGZ Ecademy Nuxt.js user portal - Learning products browser and management - Member management interface - User authentication and roles - Multi-language support (NL/EN) - Vuex store for state management - Component-based architecture
98 lines
2.2 KiB
Vue
98 lines
2.2 KiB
Vue
<template>
|
|
<v-app :dark="setTheme">
|
|
<v-app-bar app clipped-left id="top-navbar" tile flat :dark="setTheme">
|
|
<v-icon @click="drawer = !drawer">icon-menu</v-icon>
|
|
<span class="title ml-3 mr-5">31 10</span>
|
|
|
|
<v-spacer />
|
|
|
|
<v-btn fab text @click="switchDarkMode">
|
|
<v-icon :color="`${darkMode && 'yellow'}`">mdi-brightness-4</v-icon>
|
|
</v-btn>
|
|
|
|
<fullscreen />
|
|
|
|
<div class="mx-4">
|
|
<v-text-field
|
|
dense
|
|
id="search"
|
|
v-model="search"
|
|
append-icon="icon-search"
|
|
hide-details
|
|
placeholder="Search..."
|
|
single-line
|
|
color="#dfdbe3"
|
|
hint="For example, pages, items etc."
|
|
outlined
|
|
></v-text-field>
|
|
</div>
|
|
|
|
<chip-user-logged v-if="$auth.loggedIn" />
|
|
</v-app-bar>
|
|
|
|
<v-navigation-drawer v-model="drawer" app clipped>
|
|
<left-menu></left-menu>
|
|
</v-navigation-drawer>
|
|
|
|
<v-main class="body-content">
|
|
<div class="pa-4">
|
|
<nuxt />
|
|
</div>
|
|
</v-main>
|
|
|
|
<footer-app />
|
|
<global-snackbar />
|
|
</v-app>
|
|
</template>
|
|
|
|
<script>
|
|
import LeftMenu from '~/components/Admin/LeftMenu'
|
|
import FooterApp from '~/components/Admin/3110/Footer'
|
|
import fullscreen from '~/components/UI/FullScreen/FullScreen'
|
|
import chipUserLogged from '~/components/UI/ChipUserLogged/ChipUserLogged'
|
|
import globalSnackbar from '~/components/UI/GlobalSnackbar/GlobalSnackbar'
|
|
|
|
export default {
|
|
middleware: 'auth',
|
|
components: {
|
|
LeftMenu,
|
|
FooterApp,
|
|
fullscreen,
|
|
chipUserLogged,
|
|
globalSnackbar
|
|
},
|
|
props: {
|
|
source: String
|
|
},
|
|
data: () => ({
|
|
drawer: null,
|
|
search: '',
|
|
darkMode: false
|
|
}),
|
|
computed: {
|
|
setTheme() {
|
|
return this.darkMode
|
|
? (this.$vuetify.theme.dark = true)
|
|
: (this.$vuetify.theme.dark = false)
|
|
}
|
|
},
|
|
mounted() {
|
|
this.darkMode = localStorage.getItem('dark-mode') === 'true'
|
|
this.darkMode
|
|
? (this.$vuetify.theme.dark = true)
|
|
: (this.$vuetify.theme.dark = false)
|
|
},
|
|
methods: {
|
|
switchDarkMode() {
|
|
this.darkMode = !this.darkMode
|
|
localStorage.setItem('dark-mode', this.darkMode.toString())
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
#top-navbar {
|
|
border-bottom: 1px solid #dfdbe3 !important;
|
|
}
|
|
</style> |