84 lines
2.2 KiB
Vue
84 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import { useTheme } from 'vuetify/lib/framework.mjs';
|
|
import { i18n } from './plugins/i18n';
|
|
import { watch } from 'vue';
|
|
import navigationAppendItems from './components/navigation/navigationAppendItems.vue';
|
|
import navigationPrependItems from './components/navigation/navigationPrependItems.vue';
|
|
import { usePreferencesStore } from './stores/preferences.store';
|
|
import { useFeedbackStore } from './stores/feedback.store';
|
|
import footerItems from './components/navigation/footerItems.vue';
|
|
import urlBar from './components/navigation/urlBar.vue';
|
|
|
|
const preferencesStore = usePreferencesStore()
|
|
const feedbackStore = useFeedbackStore()
|
|
const theme = useTheme()
|
|
|
|
theme.global.name.value = preferencesStore.theme
|
|
|
|
|
|
// Global watcher
|
|
watch(() => preferencesStore.language, () => {
|
|
i18n.global.locale = preferencesStore.language
|
|
}, { immediate: true })
|
|
</script>
|
|
|
|
<template>
|
|
<v-app>
|
|
<url-bar />
|
|
|
|
<v-app-bar
|
|
height="80"
|
|
color="primary"
|
|
class="px-5"
|
|
elevation="0"
|
|
>
|
|
<template #prepend>
|
|
<navigation-prepend-items />
|
|
</template>
|
|
|
|
<template #append>
|
|
<navigation-append-items />
|
|
</template>
|
|
</v-app-bar>
|
|
|
|
|
|
<v-main>
|
|
<!-- Snackbar in the top right corner for user feedback -->
|
|
<v-snackbar
|
|
v-model="feedbackStore.showBanner"
|
|
timeout="3000"
|
|
location="top right"
|
|
:color="feedbackStore.color"
|
|
close
|
|
>
|
|
<v-icon :icon="feedbackStore.icon" />
|
|
{{ feedbackStore.title }}
|
|
|
|
<template v-slot:actions>
|
|
<v-btn
|
|
variant="text"
|
|
@click="feedbackStore.showBanner = false"
|
|
icon="mdi-close"
|
|
/>
|
|
</template>
|
|
</v-snackbar>
|
|
|
|
<!-- Here changes the router the content -->
|
|
<v-container max-width="1400" class="py-0" height="100%">
|
|
<v-sheet color="sheet" height="100%">
|
|
<v-sheet color="primary" >
|
|
<v-breadcrumbs class="position-absolute">
|
|
<v-breadcrumbs-item />
|
|
</v-breadcrumbs>
|
|
</v-sheet>
|
|
|
|
<router-view></router-view>
|
|
</v-sheet>
|
|
</v-container>
|
|
|
|
<v-footer color="secondary">
|
|
<footer-items />
|
|
</v-footer>
|
|
</v-main>
|
|
</v-app>
|
|
</template> |