Wroclaw/WorkshopTasker
2
1
Fork 1
Code Issues Pull requests Activity Actions

components/navigation/navigation: add light/dark theme switcher
All checks were successful
Build dev / build (push) Successful in 1m13s
Details

Browse source
This commit is contained in:
Wroclaw 2023-12-21 03:18:41 +01:00
parent 187e432182
commit ac49090615
1 changed files with 12 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
components/navigation/navigation.vue
View file

@ -1,5 +1,5 @@
<script setup> <script setup>
import { useDisplay } from "vuetify/lib/framework.mjs"; import { useDisplay, useTheme } from "vuetify/lib/framework.mjs";
import { ref } from "vue"; import { ref } from "vue";
import { navigateTo, useRoute } from "#app"; import { navigateTo, useRoute } from "#app";
@ -8,6 +8,11 @@ const route = useRoute();
const { mobile } = useDisplay(); const { mobile } = useDisplay();
const navOpen = ref(!mobile.value); const navOpen = ref(!mobile.value);
const navSelected = ref([route.path]); const navSelected = ref([route.path]);
const theme = useTheme();
function switchTheme() {
theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark';
}
</script> </script>
<template> <template>
@ -22,5 +27,11 @@ const navSelected = ref([route.path]);
<VListItem prepend-icon="mdi-receipt-text" title="Orders" value="/orders" @click="navigateTo('/orders')" /> <VListItem prepend-icon="mdi-receipt-text" title="Orders" value="/orders" @click="navigateTo('/orders')" />
<VDivider /> <VDivider />
</VList> </VList>
<template #append>
<VList density="compact" nav>
<VDivider />
<VListItem prepend-icon="mdi-theme-light-dark" title="Switch theme" class="mx-auto" @click="switchTheme()" />
</VList>
</template>
</VNavigationDrawer> </VNavigationDrawer>
</template> </template>