slideoutpanel

2023-07-27 11:22:00 +02:00
parent e200b82697
commit 34a445eaa3
1 changed files with 62 additions and 0 deletions
@@ -0,0 +1,62 @@
 <template>
     <div class="slideout-overlay" :class="{'open': props.modelValue}" @click="$emit('update:modelValue', false)">
        <div :class="{'slideout-wrapper': true, 'open': props.modelValue}" >
            <div class="slideout-panel" @click="testClick">
                <slot></slot>
            </div>
        </div>
     </div>
 </template>
 <script setup>
 import { inject, watchEffect } from "vue";
 const props = defineProps({
 	modelValue: Boolean,
 });
 defineEmits(["update:modelValue"]);
 const showPanel = inject("showPanel");
 console.log("showPanel.value", showPanel);
 const isMobile = inject("isMobile");
 function testClick(e) {
 	e.preventDefault();
 	e.stopPropagation();
 }
 </script>
 <style lang="sass">
 .slideout-overlay
    background-color: rgba(0,0,0,.5)
    z-index: 100
    &.open
        height: 100%
        width: 100%
        position: fixed
    .slideout-wrapper
        z-index: 100
        height: 100vh
        right: 0
        position: fixed
        display: flex
        border: 1px solid rgba(152, 161, 192, 0.24)
        box-shadow: rgba(0, 0, 0, 0.24) 12px 16px 24px, rgba(0, 0, 0, 0.24) 12px 8px 12px, rgba(0, 0, 0, 0.32) 4px 4px 8px
        transition: margin-right 250ms ease 0s
        margin-right: -300px
        background-color: #2D2D2D
        &.open
            margin-right: 0
        .slideout-panel
            width: 300px
            height: 100%
            padding: 24px
            .slideout-icon
                cursor: pointer
                &:hover, &:active, &:focus
                    background-color: lighten(#2D2D2D, 20%)
                svg
                    font-size: 30px
 </style>