evening_detective_frontend/src/components/HeaderMenu.vue

<script setup lang="ts">
import { MenuOutlined } from '@vicons/material'
import { Icon } from '@vicons/utils'
import { useMessage } from 'naive-ui'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

import { getAuthClient } from '@/api/auth_client'
import { useAuthStore } from '@/stores/auth'

const props = defineProps<{ active?: string }>()
const authStore = useAuthStore()

const router = useRouter()
const client = getAuthClient()
const message = useMessage()

const permissions = ref<string[]>([])

async function getPermissions() {
  permissions.value = []
  try {
    const res = await client.GetPermissions({})
    permissions.value = res.permissions || []
  } catch (err) {
    message.error('Не удалось загрузить права доступа')
    console.error('Failed to load permissions:', err)
  }
}
getPermissions()

function hasPermission(permission: string): boolean {
  return permissions.value.includes(permission)
}

const goToLogin = () => {
  router.push('/login')
}

const goToLogout = () => {
  authStore.logout()
  router.push('/login')
}

const openMenu = ref(false)
</script>

<template>
  <div class="menu-block">
    <button
      type="button"
      class="burger-button"
      :aria-expanded="openMenu"
      :aria-label="openMenu ? 'Закрыть меню' : 'Открыть меню'"
      @click="openMenu = !openMenu"
    >
      <Icon class="burger-icon" size="28">
        <MenuOutlined />
      </Icon>
    </button>
    <div
      class="left-group menu-buttons-block"
      :class="!openMenu ? 'menu-buttons-block-active' : ''"
    >
      <button
        type="button"
        class="menu-item-block"
        :class="{ active: props.active == 'main' }"
        @click="router.push('/')"
      >
        Главная
      </button>
      <button
        type="button"
        class="menu-item-block"
        :class="{ active: props.active == 'office' }"
        v-if="authStore.hasRole('user')"
        @click="router.push('/office')"
      >
        Кабинет
      </button>
      <button
        type="button"
        class="menu-item-block"
        :class="{ active: props.active == 'games' }"
        v-if="hasPermission('games_page')"
        @click="router.push('/games')"
      >
        Игры
      </button>
      <button
        type="button"
        class="menu-item-block"
        v-if="hasPermission('games_page')"
        @click="router.push('/tickets/check')"
      >
        Проверка билетов
      </button>
      <button
        type="button"
        class="menu-item-block"
        v-if="hasPermission('games_page')"
        @click="router.push('/screen')"
      >
        Экран
      </button>
      <button
        type="button"
        class="menu-item-block"
        :class="{ active: props.active == 'catalog' }"
        @click="router.push('/catalog')"
      >
        Каталог
      </button>
      <button
        type="button"
        class="menu-item-block"
        :class="{ active: props.active == 'scenarios' }"
        v-if="hasPermission('scenarios_page')"
        @click="router.push('/scenarios')"
      >
        Сценарии
      </button>
      <button
        type="button"
        class="menu-item-block"
        :class="{ active: props.active == 'users' }"
        v-if="hasPermission('users_page')"
        @click="router.push('/users')"
      >
        Пользователи
      </button>
      <button
        type="button"
        class="menu-item-block"
        :class="{ active: props.active == 'reviews' }"
        v-if="hasPermission('reviews_page')"
        @click="router.push('/reviews')"
      >
        Отзывы
      </button>
    </div>

    <div class="right-group">
      <button
        v-if="!authStore.isAuthenticated"
        type="button"
        class="menu-item-block right"
        @click="goToLogin"
      >
        Войти
      </button>
      <button
        v-if="authStore.isAuthenticated"
        type="button"
        class="menu-item-block right"
        @click="goToLogout"
      >
        Выйти
      </button>
    </div>
  </div>
</template>

<style scoped>
.menu-block {
  align-items: center;
  background-color: #222;
  display: flex;
  height: 70px;
  justify-content: space-between;
  left: 0;
  padding: 20px;
  position: fixed;
  top: 0;
  width: 100%;
}

.menu-item-block {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-block;
  font-family: inherit;
  font-size: 1.1em;
  margin-left: 10px;
  padding: 5px;
}

.menu-item-block:hover {
  color: #63e2b7;
  opacity: 0.8;
}

.right {
  margin-left: auto;
}

.active {
  color: #63e2b7;
}

.burger-button {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: 0;
}

@media (width >=1024px) {
  .burger-button {
    display: none;
  }
}

@media (width < 1024px) {
  .menu-buttons-block {
    background-color: #222;
    display: flex;
    flex-direction: column;
    left: 0;
    padding-bottom: 5px;
    position: fixed;
    top: 70px;
    width: 100%;
  }

  .menu-buttons-block button {
    padding: 15px 5px;
  }

  .menu-buttons-block-active {
    position: relative;
    top: -1000px;
  }

  .burger-icon {
    position: relative;
    top: 5px;
  }
}
</style>