Added a simple NavBar on some pages

pages/utilities/birthdays.vue

@@ -1,7 +1,42 @@
 <template>
-    <div class="container">
-        <h1 class="title">Birthdays</h1>
-        <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>
-        <h2>Your timezone: {{ Intl.DateTimeFormat().resolvedOptions().timeZone }}</h2>
-    </div>
-</template>
+	<NavBar :links="navLinks" />
+	<div class="container">
+		<h1 class="title">Birthdays</h1>
+		<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>
+		<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
-            title="Birthdays"
-            to="/utilities/birthdays"
-         />
+		<LinkCard title="Birthdays" to="/utilities/birthdays" />
 	</div>
 </template>
+
+<script>
+export default {
+	data() {
+		return {
+			navLinks: [
+				{
+					img: {
+						name: '/icons/home.svg',
+                        alt: 'Home',
+					},
+					to: '/',
+				},
+			],
+		};
+	},
+};
+</script>