added side modal

2025-01-07 18:13:27 +03:30
parent 8d047c7e63
commit e2d45888cb
1 changed files with 90 additions and 0 deletions
@@ -0,0 +1,90 @@
 <script setup lang="ts">
 // types
 type Props = {
    title: string;
 };
 defineProps<Props>();
 // state
 const { $gsap: gsap } = useNuxtApp();
 const isSideShow = ref(false);
 const tl = gsap.timeline();
 // methods
 const enterAnimation = () => {
    tl.to("#side-overlay", { opacity: 1 }).fromTo(
        "#side-content",
        {
            right: "-100%",
            opacity: 0,
        },
        {
            right: 0,
            opacity: 1,
        },
        "<"
    );
 };
 const closeAnimation = () => {
    tl.reverse().then(() => (isSideShow.value = false));
 };
 // watch
 watch(
    () => isSideShow.value,
    (newValue) => {
        newValue ? enterAnimation() : null;
    }
 );
 </script>
 <template>
    <div class="relative z-[90]">
        <div @click="isSideShow = true">
            <slot name="button" />
        </div>
        <div v-show="isSideShow" class="fixed inset-0">
            <div
                id="side-overlay"
                class="size-full bg-black/20"
                @click="closeAnimation"
            ></div>
            <div
                id="side-content"
                class="hidden md:flex w-1/3 lg:w-2/5 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="closeAnimation"
                        class="size-[3.5rem] flex-center rounded-full border border-transparent hover:border-slate-200 transition-all"
                    >
                        <Icon
                            name="ci:close"
                            size="24"
                            class="**:stroke-black"
                        />
                    </button>
                </div>
                <div class="size-full flex flex-col grow bg-red-400">
                    <slot />
                </div>
            </div>
        </div>
    </div>
 </template>
 <style scoped></style>