Move over to iconify-icon, wrap around

components/blocks/Options.vue

@@ -1,40 +1,74 @@
 <script setup lang="ts">
-import Dialog from '~/components/ui/Dialog.vue'
 import cogIcon from '~/assets/images/icons/cog.png'
 import pearlIcon from '~/assets/images/icons/pearl.gif'
 
-function optionsMenu() {}
+const active = ref(false)
 </script>
 
 <template>
-  <div class="options-layout pass-through">
-    <div class="options clickable" @click="optionsMenu()">
-      <img
-        class="logo user-select-none"
-        draggable="false"
-        :src="cogIcon"
-        alt="Options"
-      />
-    </div>
-  </div>
+  <VDialog>
+    <template #activator="{ props }">
+      <div v-bind="props" class="options clickable">
+        <img
+          class="logo user-select-none"
+          draggable="false"
+          :src="cogIcon"
+          alt="Options"
+        />
+      </div>
+    </template>
+    <template #default="{ isActive }">
+      <VCard title="Dialog">
+        <VCardText>
+          <div class="overlay background"></div>
+          <div class="overlay content">
+            <img
+              class="icon-badge user-select-none"
+              draggable="false"
+              :src="pearlIcon"
+              alt="Pearl"
+            />
+            <div>
+              <h3 class="alex text-align-center">Site options</h3>
+              <div class="row">
+                <div class="col-12 col-sm-6">
+                  <p>
+                    <strong>Theme</strong><br />
+                    Available in all flavors, vanilla and chocolate.
+                  </p>
+                </div>
+                <div class="col-12 col-sm-6">
+                  <p>
+                    <strong>Animation</strong><br />
+                    Some computers may have issues rendering that gorgeous
+                    background animation. Enabling it substantially increases
+                    power consumption.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </VCardText>
+        Report a bug
+        <VCardActions>
+          <VSpacer></VSpacer>
+
+          <VBtn text="Close Dialog" @click="isActive.value = false"></VBtn>
+        </VCardActions>
+      </VCard>
+    </template>
+  </VDialog>
 </template>
 
 <style scoped lang="scss">
 .options {
   display: flex;
-  flex-direction: row;
+  position: fixed;
 
-  justify-content: center;
-  align-items: center;
+  top: 0;
+  right: 0;
 
   padding: 10px;
-
-  &-layout {
-    position: fixed;
-
-    top: 0;
-    right: 0;
-  }
 }
 
 .logo {