c1

www/first.loc/src/components/UI/DialogMenu.vue

@@ -0,0 +1,59 @@
+<template>
+
+  <div class="dialog" v-if="show"  @click.stop="hideDialog"  >
+
+
+    <div @click.stop class="dialog__content">
+        <svg @click="hideDialog" class="dialog__close"   >
+            <title>Закрыть</title>
+            <use xlink:href="@/assets/images/sprite.svg#close"></use>
+        </svg>
+
+        <slot></slot>
+
+    </div>
+
+  </div>
+
+</template>
+
+<script>
+import toggleMixin from "@/mixins/toggleMixin";
+export default {
+  name: "dialog-menu",
+  mixins:[toggleMixin],
+
+
+
+}
+</script>
+
+<style scoped>
+
+.dialog__content{
+  position:absolute;
+  top:0px;
+  height:100vh;
+  background: white;
+  border-right: 1px solid #afafaf;
+  width:80%;
+}
+.dialog {
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0);
+  position: fixed;
+  display: flex;
+}
+.dialog__close{
+    width:16px;height:16px;
+    cursor: pointer;
+    position: absolute;
+    top:10px;
+    right: 10px;
+}
+
+
+</style>