From 9713b47b65f2ceab1141d40ebb786015b6ba9247 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20P=C4=99dzich?= <contact@maciejpedzi.ch>
Date: Thu, 25 May 2023 17:11:37 +0200
Subject: [PATCH] Create and use ThemeSwitch and NavMenu components

---
 src/App.vue                       |  7 ++++--
 src/components/ui/NavMenu.vue     | 40 +++++++++++++++++++++++++++++++
 src/components/ui/ThemeSwitch.vue | 40 +++++++++++++++++++++++++++++++
 3 files changed, 85 insertions(+), 2 deletions(-)
 create mode 100644 src/components/ui/NavMenu.vue
 create mode 100644 src/components/ui/ThemeSwitch.vue

diff --git a/src/App.vue b/src/App.vue
index 3c63330..528b09f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,12 @@
+<script setup lang="ts">
+import NavMenu from './components/ui/NavMenu.vue';
+</script>
+
 <template>
   <v-app>
+    <NavMenu />
     <v-main>
       <RouterView />
     </v-main>
   </v-app>
 </template>
-
-<script setup lang="ts"></script>
diff --git a/src/components/ui/NavMenu.vue b/src/components/ui/NavMenu.vue
new file mode 100644
index 0000000..f340fe4
--- /dev/null
+++ b/src/components/ui/NavMenu.vue
@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import ThemeSwitch from './ThemeSwitch.vue';
+
+const showDrawer = ref(false);
+</script>
+
+<template>
+  <v-app-bar class="bg-primary text-white">
+    <v-app-bar-nav-icon
+      @click.stop="showDrawer = !showDrawer"
+    ></v-app-bar-nav-icon>
+    <v-app-bar-title>RaceMash</v-app-bar-title>
+    <v-spacer></v-spacer>
+    <ThemeSwitch />
+  </v-app-bar>
+  <v-navigation-drawer v-model="showDrawer" temporary>
+    <v-list density="compact" nav>
+      <v-list-item
+        title="Home"
+        prepend-icon="mdi-home"
+        link
+        to="/"
+      ></v-list-item>
+      <v-list-item
+        title="Vote"
+        prepend-icon="mdi-vote"
+        link
+        to="/vote"
+      ></v-list-item>
+      <v-list-item
+        title="Log in"
+        prepend-icon="mdi-login"
+        link
+        to="/log-in"
+      ></v-list-item>
+      <v-list-item title="Log out" prepend-icon="mdi-logout"></v-list-item>
+    </v-list>
+  </v-navigation-drawer>
+</template>
diff --git a/src/components/ui/ThemeSwitch.vue b/src/components/ui/ThemeSwitch.vue
new file mode 100644
index 0000000..f81c440
--- /dev/null
+++ b/src/components/ui/ThemeSwitch.vue
@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import { computed, onMounted } from 'vue';
+import { useTheme } from 'vuetify';
+
+const theme = useTheme();
+
+const themeSwitchIcon = computed(() =>
+  theme.global.name.value === 'light'
+    ? 'mdi-moon-waxing-crescent'
+    : 'mdi-white-balance-sunny'
+);
+
+const tooltipText = computed(() =>
+  theme.global.name.value === 'light'
+    ? 'Switch to dark theme'
+    : 'Switch to light theme'
+);
+
+const toggleTheme = () => {
+  theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark';
+  localStorage.setItem('theme', theme.global.name.value);
+};
+
+onMounted(() => {
+  const defaultTheme = window.matchMedia?.('(prefers-color-scheme: dark)')
+    .matches
+    ? 'dark'
+    : 'light';
+
+  theme.global.name.value = localStorage.getItem('theme') || defaultTheme;
+});
+</script>
+
+<template>
+  <v-tooltip :text="tooltipText" location="bottom" :open-delay="300">
+    <template v-slot:activator="{ props }">
+      <v-btn :icon="themeSwitchIcon" @click="toggleTheme" v-bind="props" />
+    </template>
+  </v-tooltip>
+</template>