<script setup lang="ts">
// imports

import useGetAccount from "~/composables/api/account/useGetAccount";
import { useRatio } from "~/composables/global/useRatio";

// queries

const { suspense } = useGetAccount();

await suspense();

// state

const { isMobile } = useRatio();

const isSidebarShow = ref(isMobile.value);

const isScrollLocked = useScrollLock(window);

// methods

const toggleSidebar = () => {
    if (isMobile.value) {
        isSidebarShow.value = !isSidebarShow.value;
    }
};

// provide

provide("toggleSidebar", toggleSidebar);

// watch

watch(
    () => isSidebarShow.value,
    (nv) => {
        if (isMobile.value) {
            isScrollLocked.value = nv ? true : false;
        }
    },
    {
        immediate: true,
    }
);
</script>

<template>
    <div
        class="w-full flex flex-col-center persian-number font-iran-yekan-x"
        dir="rtl"
    >
        <Header />
        <main class="w-full overflow-x-hidden container flex items-start gap-8 lg:gap-6 min-h-svh relative">
            <ProfileSidebar v-model:isShow="isSidebarShow" />
            <div class="w-full lg:w-9/12">
                <NuxtPage />
            </div>
        </main>
        <div class="w-full flex-col flex mt-20">
            <Footer />
        </div>
    </div>
</template>

<style scoped></style>
