feat: slideover menus, minor ui fixes

components/app/SlideOver.vue

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <transition
+      enter-class="opacity-0"
+      enter-active-class="ease-out transition"
+      enter-to-class="opacity-100"
+      leave-class="opacity-100"
+      leave-active-class="ease-out transition"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-show="show"
+        class="inset-0 transition-opacity z-10 fixed"
+        @keydown.esc="close()"
+      >
+        <div
+          class="bg-black opacity-25 inset-0 absolute"
+          tabindex="0"
+          @click="close()"
+        ></div>
+      </div>
+    </transition>
+    <aside
+      class="
+        bg-primary
+        h-full
+        max-w-full
+        shadow-xl
+        transform
+        transition
+        top-0
+        ease-in-out
+        right-0
+        w-96
+        z-30
+        duration-300
+        fixed
+        overflow-auto
+      "
+      :class="show ? 'translate-x-0' : 'translate-x-full'"
+    >
+      <slot name="content"></slot>
+    </aside>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    show: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+  },
+  watch: {
+    show: {
+      immediate: true,
+      handler(show) {
+        if (process.client) {
+          if (show) document.body.style.setProperty("overflow", "hidden")
+          else document.body.style.removeProperty("overflow")
+        }
+      },
+    },
+  },
+  mounted() {
+    document.addEventListener("keydown", (e) => {
+      if (e.keyCode === 27 && this.show) this.close()
+    })
+  },
+  methods: {
+    close() {
+      this.$emit("close")
+    },
+  },
+}
+</script>