From 8ce2d9a509631e9ebc76dfcc1a259077525654af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20P=C4=99dzich?= <contact@maciejpedzi.ch>
Date: Sat, 23 Sep 2023 12:45:14 +0200
Subject: [PATCH] Set up page boilerplate

---
 app.vue               | 17 +++++++++++-
 components/NavBar.vue | 60 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 76 insertions(+), 1 deletion(-)
 create mode 100644 components/NavBar.vue

diff --git a/app.vue b/app.vue
index a495b75..e8a12ea 100644
--- a/app.vue
+++ b/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>
diff --git a/components/NavBar.vue b/components/NavBar.vue
new file mode 100644
index 0000000..12732fc
--- /dev/null
+++ b/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>