added mobile style

frontend/layouts/Profile.vue

@@ -2,12 +2,47 @@
 // 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) => {
+        console.log(nv);
+
+        isScrollLocked.value = nv ? true : false;
+    },
+    {
+        immediate: true,
+    }
+);
 </script>
 
 <template>
@@ -17,10 +52,10 @@ await suspense();
     >
         <Header />
         <main
-            class="w-full overflow-x-hidden container flex items-start gap-8 lg:gap-6 min-h-svh"
+            class="w-full overflow-x-hidden container flex items-start gap-8 lg:gap-6 min-h-svh relative"
         >
-            <ProfileSidebar />
-            <div class="w-9/12">
+            <ProfileSidebar v-model:isShow="isSidebarShow" />
+            <div class="w-full lg:w-9/12">
                 <NuxtPage />
             </div>
         </main>