88 lines
1.5 KiB
Vue
88 lines
1.5 KiB
Vue
<template>
|
|
<VueFinalModal
|
|
:modal-id="modalId"
|
|
class="sidebar"
|
|
content-class="sidebar__content"
|
|
content-transition="sidebar"
|
|
hide-overlay
|
|
background="interactive"
|
|
:click-to-close="false"
|
|
:z-index-fn="({ index }) => 6000 + 2 * index"
|
|
>
|
|
<div class="sidebar__top">
|
|
<UiButton icon="arrow-left" type="outlined" color="secondary" @click="vfm.close(modalId)" />
|
|
|
|
<slot name="top" />
|
|
</div>
|
|
|
|
<div v-if="$slots.default" class="sidebar__middle">
|
|
<slot />
|
|
</div>
|
|
|
|
<div v-if="$slots.bottom" class="sidebar__bottom">
|
|
<slot name="bottom" />
|
|
</div>
|
|
</VueFinalModal>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { VueFinalModal, useVfm } from 'vue-final-modal'
|
|
|
|
const props = defineProps({
|
|
id: {
|
|
type: String,
|
|
},
|
|
})
|
|
|
|
const vfm = useVfm()
|
|
|
|
const modalId = computed(() => {
|
|
if (props.id)
|
|
return `sidebar-${props.id}`
|
|
|
|
return 'sidebar'
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.sidebar {
|
|
&__content {
|
|
width: 353px;
|
|
position: absolute;
|
|
right: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: $clr-white;
|
|
height: 100%;
|
|
gap: 32px;
|
|
padding: 16px;
|
|
}
|
|
|
|
&__top {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
&__middle {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
&-enter-active,
|
|
&-leave-active {
|
|
transition: transform .2s ease-in-out;
|
|
}
|
|
|
|
&-enter-to,
|
|
&-leave-from {
|
|
//transform: rotateZ(360deg);
|
|
}
|
|
|
|
&-enter-from,
|
|
&-leave-to {
|
|
transform: translateX(100%);
|
|
}
|
|
}
|
|
</style>
|