From ac49090615855547680d0b7ecb10c78b5dc258c4 Mon Sep 17 00:00:00 2001
From: Wroclaw <wroclaw223@outlook.com>
Date: Thu, 21 Dec 2023 03:18:41 +0100
Subject: [PATCH] components/navigation/navigation: add light/dark theme
 switcher

---
 components/navigation/navigation.vue | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/components/navigation/navigation.vue b/components/navigation/navigation.vue
index 512fc15..eed71da 100644
--- a/components/navigation/navigation.vue
+++ b/components/navigation/navigation.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { useDisplay } from "vuetify/lib/framework.mjs";
+import { useDisplay, useTheme } from "vuetify/lib/framework.mjs";
 import { ref } from "vue";
 import { navigateTo, useRoute } from "#app";
 
@@ -8,6 +8,11 @@ const route = useRoute();
 const { mobile } = useDisplay();
 const navOpen = ref(!mobile.value);
 const navSelected = ref([route.path]);
+
+const theme = useTheme();
+function switchTheme() {
+  theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark';
+}
 </script>
 
 <template>
@@ -22,5 +27,11 @@ const navSelected = ref([route.path]);
       <VListItem prepend-icon="mdi-receipt-text" title="Orders" value="/orders" @click="navigateTo('/orders')" />
       <VDivider />
     </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>
 </template>