Set up page boilerplate

app.vue

@@ -1,5 +1,20 @@
 <template>
   <div>
-    <NuxtWelcome />
+    <header class="fixed w-full top-0 left-0">
+      <NavBar />
+    </header>
+    <main class="w-screen h-screen">
+      <RouterView />
+    </main>
+    <footer
+      class="p-4 flex flex-column items-center text-center gap-2 surface-card border-top-1 surface-border"
+    >
+      <p class="m-0">
+        &copy; {{ new Date().getFullYear() }} Mack Ward, Maciej Pędzich
+      </p>
+      <p class="m-0">
+        This project is not associated with Spotify AB or any of its partners
+      </p>
+    </footer>
   </div>
 </template>

components/NavBar.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import Menubar from 'primevue/menubar';
+
+import { MenuItem } from 'primevue/menuitem';
+
+const menuItems = ref<(MenuItem & { route?: string })[]>([
+  {
+    label: 'Add a playlist',
+    icon: 'pi pi-plus',
+    route: '/playlists/add'
+  },
+  {
+    label: "Get playlist's ID from URL",
+    icon: 'pi pi-link',
+    route: '/get-playlist-id'
+  },
+  {
+    label: 'Source code',
+    icon: 'pi pi-code',
+    url: 'https://github.com/maciejpedzich/spotifyplaylistarchive.com'
+  }
+]);
+</script>
+
+<template>
+  <Menubar :model="menuItems" aria-label="Main menu">
+    <template #start>
+      <RouterLink
+        id="nav-brand"
+        class="md:px-4 px-2 no-underline text-color font-bold"
+        to="/"
+      >
+        Spotify Playlist Archive
+      </RouterLink>
+    </template>
+    <template #item="{ label, item, props }">
+      <RouterLink
+        v-if="item.route"
+        v-slot="routerProps"
+        :to="item.route"
+        custom
+      >
+        <a :href="routerProps.href" v-bind="props.action">
+          <span v-bind="props.icon" />
+          <span>{{ label }}</span>
+        </a>
+      </RouterLink>
+      <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+        <span v-bind="props.icon" />
+        <span>{{ label }}</span>
+      </a>
+    </template>
+  </Menubar>
+</template>
+
+<style scoped>
+#nav-brand:hover {
+  opacity: 0.5;
+}
+</style>