Updated

frontend/components/global/Header.vue

@@ -3,6 +3,7 @@
 
 import useGetAccount from "~/composables/api/account/useGetAccount";
 import { useAuth } from "~/composables/api/auth/useAuth";
+import useBaseUrl from "~/composables/global/useBaseUrl";
 
 // types
 
@@ -15,6 +16,7 @@ type NavLink = {
 
 const { data: account } = useGetAccount();
 const { logout } = useAuth();
+const baseUrl = useBaseUrl();
 
 const nav_links = ref<NavLink[]>([
     {
@@ -45,45 +47,44 @@ const nav_links = ref<NavLink[]>([
         <div
             class="size-full flex items-center justify-between container py-[2.25rem]"
         >
-            <div
-                v-if="!!account"
-                class="w-2/12 flex items-center justify-start"
-            >
-                <span class="size-[2rem] bg-black rounded-full"></span>
-                <button @click="() => logout(true)">خروج از وبسایت</button>
-            </div>
+            <div class="flex items-center gap-16">
+                <div class="flex items-center justify-end gap-[1.5rem]">
+                    <button
+                        v-if="!!account"
+                        :title="account.first_name + ' ' + account.last_name"
+                        @click="() => logout(true)"
+                        class="size-[1.5rem] relative overflow-hidden rounded-full bg-slate-300"
+                    >
+                        <img :src="baseUrl + account.profile_photo" alt="" />
+                    </button>
+                    <NuxtLink to="/signin" v-else class="flex-center">
+                        <Icon name="ci:profile" size="20px" class="**:stroke-black" />
+                    </NuxtLink>
+                    <button class="flex-center">
+                        <Icon name="ci:search" size="18px" class="**:stroke-black" />
+                    </button>
+                    <button class="flex-center">
+                        <Icon name="ci:cart" size="20px" class="**:stroke-black" />
+                    </button>
+                </div>
 
-            <button
-                @click="navigateTo('/signin')"
-                class="cursor-pointer"
-                v-else
-            >
-                وارد شوید
-            </button>
-
-            <nav
-                class="flex-center gap-[2.5rem] w-8/12 typo-label-sm text-slate-500"
-            >
-                <NuxtLink
-                    v-for="(link, index) in nav_links"
-                    :key="index"
-                    :to="link.path"
+                <nav
+                    class="flex-center gap-[2.5rem] typo-label-sm text-slate-600"
                 >
-                    {{ link.title }}
-                </NuxtLink>
-            </nav>
-
-            <div class="w-2/12 flex items-center justify-end gap-[1.5rem]">
-                <button class="size-[1.5rem] flex-center">
-                    <Icon name="ci:search" class="**:stroke-black" />
-                </button>
-                <button class="size-[1.5rem] flex-center">
-                    <Icon name="ci:profile" class="**:stroke-black" />
-                </button>
-                <button class="size-[1.5rem] flex-center">
-                    <Icon name="ci:cart" class="**:stroke-black" />
-                </button>
+                    <NuxtLink
+                        v-for="(link, index) in nav_links"
+                        :key="index"
+                        :to="link.path"
+                    >
+                        {{ link.title }}
+                    </NuxtLink>
+                </nav>
             </div>
+
+            <div>
+                LOGO
+            </div>
+
         </div>
     </header>
 </template>