fix: bugs

src/components/HeaderBlock.vue

@@ -18,7 +18,7 @@
         <ul>
           <li v-for="item in iconList" :key="item.icon">
             <button type="button" class="header-block__icon-btn" @click="item.action">
-              <SvgIcon :name="item.icon" :size="24" color="#9a9a9a" />
+              <SvgIcon :name="item.icon" :size="24" color="var(--header-icon-color)" />
               <span v-if="item.count" class="header-block__icon-badge">{{ item.count }}</span>
             </button>
           </li>
@@ -30,14 +30,27 @@
         <div v-if="!hasSlotContent && pageTitle">{{ pageTitle }}</div>
       </slot>
     </div>
+
+    <DropdownMenu
+      v-model="userMenuOpen"
+      :reference="userMenuTrigger"
+      :items="userMenuItems"
+      placement="bottom-end"
+      align="center"
+      min-width="9rem"
+    />
   </div>
 </template>
 
 <script setup>
+import { useRouter } from 'vue-router'
 import { useUIStore } from '@/store/ui'
-import { computed, useSlots } from 'vue'
 import { gallery } from '@/utils/gallery'
+import useAuth from '@/composables/useAuth'
+import { computed, ref, useSlots } from 'vue'
 import SvgIcon from '@/components/icons/SvgIcon.vue'
+import DropdownMenu from '@/components/DropdownMenu.vue'
+import { useLogoutMutation } from '@/services/query/auth'
 
 defineProps({
   pageTitle: { type: String, default: '' },
@@ -47,13 +60,55 @@ const slots = useSlots()
 const hasSlotContent = computed(() => !!slots.default)
 
 const ui = useUIStore()
+const router = useRouter()
+const { clearSession } = useAuth()
+const logoutMutation = useLogoutMutation()
 
 const logo = gallery.authLogo
 
+const userMenuOpen = ref(false)
+const userMenuTrigger = ref(null)
+
+const openUserMenu = (event) => {
+  const trigger = event.currentTarget
+  if (userMenuOpen.value && userMenuTrigger.value === trigger) {
+    userMenuOpen.value = false
+    return
+  }
+  userMenuTrigger.value = trigger
+  userMenuOpen.value = true
+}
+
+const goEditProfile = () => {
+  router.push({ name: 'student-profile' }).catch(() => {})
+}
+
+const onLogout = async () => {
+  try {
+    await logoutMutation.mutateAsync()
+  } catch {
+    /* ignore */
+  } finally {
+    clearSession()
+    router.push({ name: 'login' })
+  }
+}
+
+const userMenuItems = [
+  { key: 'edit-profile', label: 'ویرایش پروفایل', icon: 'pencil', onClick: goEditProfile },
+  {
+    key: 'logout',
+    label: 'خروج',
+    icon: 'heart',
+    color: 'var(--color-primary)',
+    onClick: onLogout,
+  },
+]
+
 const iconList = [
-  { icon: 'chat', action: () => {} },
-  { icon: 'bell', action: () => {}, count: 5 },
-  { icon: 'user', action: () => {} },
+  // { icon: 'chat', action: () => {} },
+  // { icon: 'bell', action: () => {}, count: 5 },
+  { icon: 'user', action: openUserMenu },
 ]
 </script>
 
@@ -136,12 +191,18 @@ const iconList = [
   }
 
   &__icon-btn {
+    --header-icon-color: #9a9a9a;
+
     position: relative;
     border: none;
     background: transparent;
     border-radius: 9999px;
     padding: 0;
     cursor: pointer;
+
+    &:hover {
+      --header-icon-color: var(--color-primary);
+    }
   }
 
   &__icon-badge {