67 lines
1.6 KiB
Vue
67 lines
1.6 KiB
Vue
<script setup>
|
|
const runtimeConfig = useRuntimeConfig()
|
|
const colorMode = useColorMode()
|
|
const drawer = ref(null)
|
|
const themes = ref([
|
|
{ title: 'Light', value: 'light' },
|
|
{ title: 'Dark', value: 'dark' },
|
|
{ title: 'System', value: 'system'}
|
|
])
|
|
const setTheme = (theme) => {
|
|
colorMode.preference = theme
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<v-app
|
|
:theme="$colorMode.value"
|
|
>
|
|
<v-navigation-drawer
|
|
v-model="drawer"
|
|
>
|
|
<v-list>
|
|
<ModelDialog/>
|
|
</v-list>
|
|
|
|
<template v-slot:append>
|
|
<v-divider></v-divider>
|
|
<v-list>
|
|
<ApiKeyDialog/>
|
|
|
|
<v-menu
|
|
>
|
|
<template v-slot:activator="{ props }">
|
|
<v-list-item
|
|
v-bind="props"
|
|
rounded="xl"
|
|
:prepend-icon="$colorMode.value === 'light' ? 'light_mode' : 'dark_mode'"
|
|
title="Theme mode"
|
|
></v-list-item>
|
|
</template>
|
|
<v-list>
|
|
<v-list-item
|
|
v-for="(theme, idx) in themes"
|
|
:key="idx"
|
|
@click="setTheme(theme.value)"
|
|
>
|
|
<v-list-item-title>{{ theme.title }}</v-list-item-title>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-menu>
|
|
</v-list>
|
|
</template>
|
|
</v-navigation-drawer>
|
|
|
|
<v-app-bar
|
|
class="d-lg-none"
|
|
>
|
|
<v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
|
|
|
|
<v-toolbar-title>{{ runtimeConfig.public.appName }}</v-toolbar-title>
|
|
</v-app-bar>
|
|
|
|
<v-main>
|
|
<NuxtPage/>
|
|
</v-main>
|
|
</v-app>
|
|
</template> |