minor: new nav system (#5)

Co-authored-by: Madison Grubb <madison@elastiflow.com>
Reviewed-on: #5

app/components/BaseModal.vue

@@ -0,0 +1,36 @@
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div
+        v-if="show"
+        class="fixed inset-0 z-[2000] flex items-center justify-center p-4"
+        role="dialog"
+        aria-modal="true"
+        :aria-labelledby="ariaLabelledby"
+        @keydown.escape="$emit('close')"
+      >
+        <button
+          type="button"
+          class="absolute inset-0 bg-black/60 transition-opacity"
+          aria-label="Close"
+          @click="$emit('close')"
+        />
+        <div
+          class="relative w-full"
+          @click.stop
+        >
+          <slot />
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup>
+defineProps({
+  show: Boolean,
+  ariaLabelledby: { type: String, default: undefined },
+})
+
+defineEmits(['close'])
+</script>