added profile side bar

frontend/components/profile/ProfileSidebar.vue

@@ -3,6 +3,33 @@
 
 import useGetAccount from "~/composables/api/account/useGetAccount";
 
+// state
+
+const route = useRoute();
+
+const profileLinks = ref([
+    {
+        icon: "bi:person-vcard",
+        title: "پروفایل",
+        path: { name: "profile" },
+    },
+    {
+        icon: "bi:map",
+        title: "آدرس ها",
+        path: { name: "profile-addresses" },
+    },
+    {
+        icon: "bi:cart",
+        title: "خرید ها و سفارش ها",
+        path: { name: "profile-purchases-and-orders" },
+    },
+    {
+        icon: "bi:ticket",
+        title: "تیکت ها",
+        path: { name: "profile-tickets" },
+    },
+]);
+
 // queries
 
 const { data: account, suspense } = useGetAccount();
@@ -30,6 +57,31 @@ await suspense();
                 />
             </div>
         </div>
+
+        <div
+            class="w-full flex flex-col gap-2 rounded-xl bg-slate-50 border border-slate-200 p-4"
+        >
+            <NuxtLink
+                v-for="(link, index) in profileLinks"
+                :key="index"
+                :to="{ ...link.path }"
+                :class="
+                    route.name == link.path.name
+                        ? 'bg-black text-slate-100 **:fill-slate-100 '
+                        : '**:fill-black '
+                "
+                class="flex items-center justify-between transition-all rounded-lg py-4 px-3"
+            >
+                <span class="flex-center gap-3">
+                    <div class="size-5 flex-center">
+                        <Icon :name="link.icon" />
+                    </div>
+                    <span class="text-sm">{{ link.title }}</span>
+                </span>
+
+                <Icon name="bi:chevron-left" class="transition-all" />
+            </NuxtLink>
+        </div>
     </div>
 </template>