From bc60fd3072268d90fb878b6f320000f01c57825d Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Tue, 8 Apr 2025 23:00:09 +0330
Subject: [PATCH] added mobile style

---
 .../profile/global/ProfileSidebar.vue         | 31 ++++++++++++++++---
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/frontend/components/profile/global/ProfileSidebar.vue b/frontend/components/profile/global/ProfileSidebar.vue
index 3b38430..237e644 100644
--- a/frontend/components/profile/global/ProfileSidebar.vue
+++ b/frontend/components/profile/global/ProfileSidebar.vue
@@ -3,6 +3,16 @@
 
 import useGetAccount from "~/composables/api/account/useGetAccount";
 
+// types
+
+type Props = {
+    isShow: boolean;
+};
+
+// props
+
+defineProps<Props>();
+
 // state
 
 const route = useRoute();
@@ -37,6 +47,14 @@ const profileLinks = ref([
     },
 ]);
 
+// queries
+
+const { data: account, suspense } = useGetAccount();
+
+await suspense();
+
+// methods
+
 const isLinkActive = (link: any) => {
     if (link.matchPattern) {
         return link.matchPattern.test(route.name);
@@ -45,15 +63,16 @@ const isLinkActive = (link: any) => {
     }
 };
 
-// queries
+// inject
 
-const { data: account, suspense } = useGetAccount();
-
-await suspense();
+const toggleSidebar = inject("toggleSidebar");
 </script>
 
 <template>
-    <div class="w-3/12 flex flex-col gap-4">
+    <div
+        class="max-lg:absolute max-lg:inset-0 w-full max-lg:bg-white lg:w-3/12 flex flex-col gap-4 z-[99] max-lg:container transition-all duration-[400ms] max-lg:h-[calc(100svh-65px)]"
+        :class="!isShow ? 'max-lg:translate-x-full' : 'translate-x-0'"
+    >
         <div class="w-full rounded-xl bg-slate-50 border border-slate-200 p-4">
             <div class="flex items-center justify-between w-full">
                 <div class="flex flex-col items-start gap-1">
@@ -66,6 +85,7 @@ await suspense();
                     <NuxtLink
                         :to="{ name: 'profile' }"
                         class="text-xs font-semibold text-cyan-500"
+                        @click="toggleSidebar"
                     >
                         ویرایش اطلاعات
                     </NuxtLink>
@@ -97,6 +117,7 @@ await suspense();
                         : '**:fill-black hover:bg-gray-200'
                 "
                 class="flex items-center justify-between transition-all rounded-lg py-4 px-3"
+                @click="toggleSidebar"
             >
                 <span class="flex-center gap-3">
                     <div class="size-5 flex-center">