Work in progress

client/components/open/editors/EditorOptionsPanel.vue

@@ -0,0 +1,46 @@
+<template>
+  <collapse class="p-4 w-full border-b" v-model="show">
+    <template #title>
+      <div class="flex items-center pr-8">
+        <div class="mr-3" :class="{'text-blue-600':show, 'text-gray-500':!show}">
+          <slot name="icon" />
+        </div>
+        <h3 id="v-step-2" class="font-semibold flex-grow">
+          {{ name }}
+        </h3>
+        <pro-tag v-if="hasProTag" />
+      </div>
+    </template>
+
+    <slot />
+  </collapse>
+</template>
+
+<script>
+import Collapse from '~/components/global/Collapse.vue'
+import ProTag from '~/components/global/ProTag.vue'
+
+export default {
+  name: 'EditorOptionsPanel',
+  components: { Collapse, ProTag },
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    hasProTag: {
+      type: Boolean,
+      default: false
+    },
+    alreadyOpened: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      show: this.alreadyOpened
+    }
+  }
+}
+</script>

client/components/open/editors/EditorRightSidebar.vue

@@ -0,0 +1,28 @@
+<template>
+  <transition @leave="(el,done) => motions.slide.leave(done)">
+    <div v-if="show" v-motion-slide-right="'slide'"
+         class="absolute shadow-lg shadow-gray-800/30 top-0 h-[calc(100vh-53px)] right-0 lg:shadow-none lg:relative bg-white w-full md:w-1/2 lg:w-2/5 border-l overflow-y-scroll md:max-w-[20rem] flex-shrink-0 z-50"
+    >
+      <slot />
+    </div>
+  </transition>
+</template>
+
+<script>
+import { useMotions } from '@vueuse/motion'
+
+export default {
+  name: 'EditorRightSidebar',
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup (props) {
+    return {
+      motions: useMotions()
+    }
+  }
+}
+</script>