added settings and profile pages

src/components/common/navigation/navbar.vue

@@ -0,0 +1,31 @@
+<template>
+  <div
+    class="grid grid-rows-2 text-center sm:text-left sm:grid-rows-none sm:grid-cols-2 my-5 navbar w-full"
+  >
+    <NuxtLink class="block" to="/admin">
+      <h1 class="block site-title bloodseeker">Cinema Corona</h1>
+    </NuxtLink>
+
+    <ul
+      class="mt-3 sm:mt-0 justify-self-center sm:justify-self-end inline-flex space-x-5 bloodseeker leading-10"
+    >
+      <li>
+        <NuxtLink class="text-xl header-link" to="/lists">Lists</NuxtLink>
+      </li>
+      <li>
+        <NuxtLink class="text-xl header-link" to="/schedule">Schedule</NuxtLink>
+      </li>
+      <li>
+        <ProfileMenu />
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "navbar",
+};
+</script>
+
+<style scoped></style>

src/components/common/ui/FormButton.vue

@@ -0,0 +1,9 @@
+<script lang="ts" setup></script>
+
+<template>
+  <button class="btn p-3 mt-5" type="button">
+    <slot> </slot>
+  </button>
+</template>
+
+<style scoped></style>

src/components/common/ui/Modal.vue

@@ -0,0 +1,25 @@
+<template>
+  <div v-show="visible" id="movie-modal" class="movie-modal movie-card">
+    <div class="max-w-4xl mx-auto flex flex-col px-2 sm:px-0">
+      <span
+        class="hover-pointer font-bold self-end pr-1 sm:pr-5 pt-5 pb-5 sm:pb-0"
+        @click="toggleModal()"
+      >
+        <span class="bg-red-600 p-2 rounded">X</span>
+      </span>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const visible = ref(false);
+
+const toggleModal = () => {
+  visible.value = !visible.value;
+};
+
+defineExpose({ toggleModal });
+</script>
+
+<style scoped></style>