Mamalizz
77 lines
2.1 KiB
Vue
77 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
// types
|
|
|
|
type Props = {
|
|
title: string;
|
|
};
|
|
|
|
defineProps<Props>();
|
|
|
|
// state
|
|
|
|
const isSideShow = ref(false);
|
|
|
|
const isLocked = useScrollLock(window);
|
|
|
|
// watch
|
|
|
|
watch(
|
|
() => isSideShow.value,
|
|
(newValue) => {
|
|
if (newValue) {
|
|
isLocked.value = true;
|
|
}
|
|
}
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="relative z-1000">
|
|
<div @click="isSideShow = true">
|
|
<slot name="button" />
|
|
</div>
|
|
<div>
|
|
<Transition name="fade">
|
|
<div
|
|
v-if="isSideShow"
|
|
class="size-full fixed inset-0 bg-black/20"
|
|
@click="isSideShow = !isSideShow"
|
|
></div>
|
|
</Transition>
|
|
<Transition name="fade-right">
|
|
<div
|
|
v-show="isSideShow"
|
|
class="flex flex-col w-full lg:w-1/3 bg-white h-full lg:rounded-e-[1.5rem] overflow-hidden fixed top-0 right-0 min-md:flex-col"
|
|
>
|
|
<div
|
|
class="w-full flex justify-between items-center py-[1.5rem] lg:py-[2.5rem] px-[1.5rem] lg:px-[3rem]"
|
|
>
|
|
<span class="typo-h-5">
|
|
{{ title }}
|
|
</span>
|
|
|
|
<button
|
|
@click="isSideShow = !isSideShow"
|
|
class="cursor-pointer size-[3.5rem] -me-5 flex-center rounded-full"
|
|
>
|
|
<Icon
|
|
name="ci:close"
|
|
size="24"
|
|
class="**:stroke-black"
|
|
/>
|
|
</button>
|
|
</div>
|
|
|
|
<div
|
|
class="size-full flex flex-col grow overflow-y-auto py-[1.5rem] lg:py-[2.5rem] px-[1.5rem] lg:px-[3rem] pt-0"
|
|
>
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|