Added a simple NavBar on some pages

build_number

@@ -1 +1 @@
-6
+8

components/NavBar.vue

@@ -0,0 +1,35 @@
+<template>
+	<nav>
+		<div v-for="link in links" :key="link">
+			<NuxtLink :to="link.to" class="nav-button">
+				<img :src="link.img.name" :alt="link.img.alt" />
+			</NuxtLink>
+		</div>
+	</nav>
+</template>
+
+<style lang="scss" scoped>
+nav {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+.nav-button {
+    padding: .25rem;
+	margin: .25rem;
+}
+</style>
+
+<script>
+const NavBar = resolveComponent('NavBar');
+
+export default {
+	props: {
+		links: {
+			type: Array,
+			required: true,
+		},
+	},
+};
+</script>

pages/index.vue

@@ -1,7 +1,3 @@
-<script>
-import '@/assets/styles/index.scss';
-</script>
-
 <template>
 	<div class="container">
 		<h1 class="title">Vänner Bästa</h1>
@@ -32,3 +28,7 @@ import '@/assets/styles/index.scss';
 		</div>
 	</div>
 </template>
+
+<script>
+import '@/assets/styles/index.scss';
+</script>

pages/utilities/birthdays.vue

@@ -1,7 +1,42 @@
 <template>
-    <div class="container">
+	<NavBar :links="navLinks" />
-        <h1 class="title">Birthdays</h1>
+	<div class="container">
-        <p>Discord bots are changing. <br> This means that we can no longer provide you with the command to set your birthday. <br> Instead, this page now gives you your timezone for use with Discord bots.</p>
+		<h1 class="title">Birthdays</h1>
-        <h2>Your timezone: {{ Intl.DateTimeFormat().resolvedOptions().timeZone }}</h2>
+		<p>
-    </div>
+			Discord bots are changing. <br />
-</template>
+			This means that we can no longer provide you with the command to set
+			your birthday. <br />
+			Instead, this page now gives you your timezone for use with Discord
+			bots.
+		</p>
+		<h2>
+			Your timezone:
+			{{ Intl.DateTimeFormat().resolvedOptions().timeZone }}
+		</h2>
+	</div>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			navLinks: [
+				{
+					img: {
+						name: '/icons/arrow-left.svg',
+						alt: 'Back to Utilities',
+					},
+					to: '/utilities',
+				},
+				{
+					img: {
+						name: '/icons/home.svg',
+						alt: 'Home',
+					},
+					to: '/',
+				},
+			],
+		};
+	},
+};
+</script>

pages/utilities/index.vue

@@ -1,9 +1,25 @@
 <template>
+	<NavBar :links="navLinks" />
 	<div class="container">
 		<h1 class="title">Utilities for the Discord Server</h1>
-        <LinkCard
+		<LinkCard title="Birthdays" to="/utilities/birthdays" />
-            title="Birthdays"
-            to="/utilities/birthdays"
-         />
 	</div>
 </template>
+
+<script>
+export default {
+	data() {
+		return {
+			navLinks: [
+				{
+					img: {
+						name: '/icons/home.svg',
+                        alt: 'Home',
+					},
+					to: '/',
+				},
+			],
+		};
+	},
+};
+</script>

public/icons/arrow-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>

public/icons/home.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>

tsconfig.json

@@ -1,10 +1,7 @@
 {
-  // https://v3.nuxtjs.org/concepts/typescript
+	// https://v3.nuxtjs.org/concepts/typescript
-  "extends": "./.nuxt/tsconfig.json",
+	"extends": "./.nuxt/tsconfig.json",
-  "compilerOptions": {
+	"compilerOptions": {
-    "types": [
+		"types": ["@nuxt/types", "@nuxtjs/i18n"]
-      "@nuxt/types",
+	}
-      "@nuxtjs/i18n",
-    ]
-  }
 }