marzban-dev
67 lines
1.3 KiB
Vue
67 lines
1.3 KiB
Vue
<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>
|