banu-front/src/components/HeaderBlock.vue

<template>
  <div class="header-block">
    <div class="header-block__row">
      <div class="header-block__menu">
        <button type="button" class="header-block__menu-btn" @click="ui.toggleSidebar">
          <SvgIcon name="menu" :size="24" color="#9a9a9a" />
        </button>
      </div>
      <div class="header-block__logo">
        <a :href="MAIN_SITE_URL">
          <img :src="logo" alt="logo" />
        </a>
      </div>
      <div class="header-block__title">
        <slot>
          <div v-if="pageTitle || pageSubtitle" class="header-block__heading">
            <span v-if="pageSubtitle" class="header-block__heading-eyebrow">{{ pageTitle }}</span>
            <span>{{ pageSubtitle || pageTitle }}</span>
          </div>
        </slot>
      </div>
      <div class="header-block__icons">
        <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="var(--header-icon-color)" />
              <span v-if="item.count" class="header-block__icon-badge">{{ item.count }}</span>
            </button>
          </li>
        </ul>
      </div>
    </div>
    <div class="header-block__title-mobile">
      <slot>
        <div v-if="pageTitle || pageSubtitle" class="header-block__heading">
          <span v-if="pageSubtitle" class="header-block__heading-eyebrow">{{ pageTitle }}</span>
          <span>{{ pageSubtitle || pageTitle }}</span>
        </div>
      </slot>
    </div>

    <DropdownMenu
      v-model="userMenuOpen"
      :reference="userMenuTrigger"
      :items="userMenuItems"
      placement="bottom-end"
      align="center"
      min-width="9rem"
    />
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUIStore } from '@/store/ui'
import { MAIN_SITE_URL } from '@/enums'
import { gallery } from '@/utils/gallery'
import useAuth from '@/composables/useAuth'
import SvgIcon from '@/components/icons/SvgIcon.vue'
import DropdownMenu from '@/components/DropdownMenu.vue'
import { useLogoutMutation } from '@/services/query/auth'

defineProps({
  pageTitle: { type: String, default: '' },
  pageSubtitle: { type: String, default: '' },
})

const ui = useUIStore()
const router = useRouter()
const { role, 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 = computed(() => [
  ...(role.value === 'student'
    ? [{ 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: openUserMenu },
]
</script>

<style lang="scss" scoped>
.header-block {
  &__row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
  }

  &__menu {
    flex-basis: 33.33%;

    @media (min-width: 1024px) {
      display: none;
    }
  }

  &__menu-btn {
    border: none;
    background: transparent;
    border-radius: 9999px;
    padding: 0;
    cursor: pointer;
  }

  &__logo {
    flex-basis: 33.33%;

    @media (min-width: 1024px) {
      display: none;
    }

    a {
      display: block;
    }

    img {
      display: block;
      margin: 0 auto;
      height: 3.5rem;
      object-fit: contain;
    }
  }

  &__title {
    display: none;
    text-align: right;
    font-family: var(--font-family-fa);
    font-weight: 500;
    font-size: 1.125rem;

    @media (min-width: 1024px) {
      display: block;
      flex: 1 1 auto;
    }
  }

  &__title-mobile {
    margin-top: 2.5rem;
    flex: 1 1 auto;
    text-align: right;
    font-family: var(--font-family-fa);
    font-weight: 500;
    font-size: 1.125rem;

    @media (min-width: 1024px) {
      display: none;
    }
  }

  &__heading {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  &__heading-eyebrow {
    font-size: 0.75rem;
    font-weight: 400;
    color: #a7a7a7;
  }

  &__icons {
    flex-basis: 33.33%;

    ul {
      list-style: none;
      display: flex;
      align-items: center;
      gap: 0.625rem;
      justify-content: flex-end;
      margin: 0;
      padding: 0;
    }
  }

  &__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 {
    position: absolute;
    top: -0.125rem;
    right: -0.125rem;
    padding-top: 0.125rem;
    height: 1rem;
    width: 1rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-family-number-fa);
    font-size: 0.6875rem;
  }
}
</style>