74 lines
1.8 KiB
Vue
74 lines
1.8 KiB
Vue
<template>
|
|
<div class="slideout-overlay" :class="{ open: props.modelValue }" @click="showPanel = 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");
|
|
|
|
function testClick(e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}
|
|
</script>
|
|
|
|
<style lang="sass">
|
|
.slideout-overlay
|
|
z-index: 100
|
|
&.open
|
|
height: 100%
|
|
width: 100%
|
|
position: fixed
|
|
background-color: rgb(15, 15, 15, 0.7)
|
|
.slideout-wrapper
|
|
z-index: 100
|
|
height: 100svh
|
|
position: fixed
|
|
display: flex
|
|
background-color: var(--midnight-black, #0F0F0F)
|
|
border-radius: 16px
|
|
transition: margin-bottom 250ms ease 0s
|
|
width: 100%
|
|
margin-bottom: -100vh
|
|
bottom: 0
|
|
overflow: auto
|
|
@media (min-width: 992px)
|
|
margin-right: -400px
|
|
transition: margin-right 250ms ease 0s
|
|
width: auto
|
|
right: -30px
|
|
top: 0
|
|
&.open
|
|
margin-bottom: -82px
|
|
@media (min-width: 992px)
|
|
margin-right: 30px
|
|
.slideout-panel
|
|
width: 100%
|
|
height: 100%
|
|
padding: 24px 24px 16px 24px
|
|
overflow: scroll
|
|
height: calc( 100svh - 82px )
|
|
@media (min-width: 992px)
|
|
width: 400px
|
|
overflow: unset
|
|
.slideout-icon
|
|
cursor: pointer
|
|
&:hover, &:active, &:focus
|
|
background-color: lighten(#2D2D2D, 20%)
|
|
svg
|
|
font-size: 30px
|
|
</style>
|