Updated design of dialog and its logic and made overlay dimmer

src/renderer/components/Dialog.vue

@@ -18,13 +18,29 @@ export default {
 
 <style scoped lang="sass">
 .dialog-wrapper.open
+    position: absolute
+    left: 0
+    top: 0
+    width: 100vw
+    height: 100vh
+    display: flex
+    align-items: center
+    justify-content: center 
     .overlay
         position: absolute
         left: 0
         top: 0
-        width: 100vw
+        width: 100%
-        height: 100vh
+        height: 100%
-        background: rgba(black,0.1)
+        background: rgba(black,0.3)
         z-index: 1400
-    display: block
+    .dialog
+        position: relative
+        padding: 1rem
+        background: white
+        border-radius: 1rem
+        max-width: 250px
+        min-width: 250px
+        z-index: 1400
+        box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12)
 </style>

src/renderer/layouts/DockableSidebar.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <Dialog />
+        <Dialog open="true" />
         <section class="handle" :class="{'open': menuStatus}">
             <div @click="toggleMenuStatus" class="icon">
                 <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 384.97 384.97" style="enable-background:new 0 0 384.97 384.97;" xml:space="preserve">