<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>