Mamalizz
79 lines
2.1 KiB
Vue
79 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-[90]">
|
|
<div @click="isSideShow = true">
|
|
<slot name="button" />
|
|
</div>
|
|
<div v-show="isSideShow" class="fixed inset-0">
|
|
<Transition name="fade">
|
|
<div
|
|
v-if="isSideShow"
|
|
id="side-overlay"
|
|
class="size-full bg-black/20"
|
|
@click="isSideShow = !isSideShow"
|
|
></div>
|
|
</Transition>
|
|
<Transition name="fade-right">
|
|
<div
|
|
v-if="isSideShow"
|
|
id="side-content"
|
|
class="hidden md:flex w-1/3 bg-white h-full rounded-e-[1.5rem] overflow-hidden absolute top-0 min-md:flex-col"
|
|
>
|
|
<div
|
|
class="w-full flex justify-between items-center py-[2.5rem] px-[3rem]"
|
|
>
|
|
<span class="typo-h-5">
|
|
{{ title }}
|
|
</span>
|
|
|
|
<button
|
|
@click="isSideShow = !isSideShow"
|
|
class="size-[3.5rem] -me-5 flex-center rounded-full cursor-pointer"
|
|
>
|
|
<Icon
|
|
name="ci:close"
|
|
size="24"
|
|
class="**:stroke-black"
|
|
/>
|
|
</button>
|
|
</div>
|
|
|
|
<div
|
|
class="size-full flex flex-col grow overflow-y-auto p-[3rem] pt-0"
|
|
>
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|