Create and use ThemeSwitch and NavMenu components

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>

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>

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>