1 files changed, 78 insertions, 0 deletions
diff --git a/app.vue b/app.vue
new file mode 100755
index 0000000..84169b9
--- /dev/null
+++ b/app.vue
@@ -0,0 +1,78 @@
+<template>
+	<v-app>
+		<v-app-bar>
+			<v-app-bar-nav-icon
+				@click="drawer == true ? (drawer = false) : (drawer = true)"
+			></v-app-bar-nav-icon>
+			<v-toolbar-title>Freach</v-toolbar-title>
+			<v-spacer></v-spacer>
+			<v-btn icon @click="toggletheme">
+				<v-icon :icon="themeicon"></v-icon>
+			</v-btn>
+		</v-app-bar>
+		<v-navigation-drawer v-model="drawer">
+			<v-list nav color="primary">
+				<v-list-item
+					prepend-icon="mdi-home-outline"
+					title="Home"
+					:to="{ path: '/' }"
+				></v-list-item>
+				<v-list-item
+					prepend-icon="mdi-gift-outline"
+					title="Projects"
+					:to="{ path: '/projects' }"
+				></v-list-item>
+				<v-list-item
+					prepend-icon="mdi-post-outline"
+					title="Blog"
+					:to="{ path: '/blog' }"
+				></v-list-item>
+				<v-list-item
+					prepend-icon="mdi-account-outline"
+					title="About"
+					:to="{ path: '/about' }"
+				></v-list-item>
+			</v-list>
+		</v-navigation-drawer>
+		<v-main>
+			<nuxt-page></nuxt-page>
+		</v-main>
+		<a href="/javascript.html" data-jslicense="1" style="display: none"
+			>JavaScript license information</a
+		>
+	</v-app>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { useTheme } from "vuetify";
+import { onMounted } from "vue";
+const drawer = ref(null);
+const theme = useTheme();
+const toggletheme = () => {
+	if (theme.global.name.value == "hxlight") {
+		theme.global.name.value = "hxdark";
+	} else {
+		theme.global.name.value = "hxlight";
+	}
+};
+const themeicon = computed(() => {
+	if (theme.global.current.value.dark == true) {
+		return "mdi-weather-night";
+	} else {
+		return "mdi-weather-sunset-up";
+	}
+});
+
+onMounted(() => {
+	if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+		console.log(window.matchMedia("(prefers-color-scheme: dark)").matches);
+		theme.global.name.value = "hxdark";
+	}
+});
+
+useHead({
+	title: "Freach",
+	meta: [{ name: "description", content: "Freach's Website" }],
+});
+</script>