evening_detective_frontend/src/components/HeaderMenu.vue

<script setup lang="ts">
const props = defineProps({
  active: {
    type: String,
    required: false,
  },
})

import { MenuOutlined } from '@vicons/material'
import { Icon } from '@vicons/utils'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

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

const authStore = useAuthStore()
authStore.initFromStorage()

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

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

async function getPermissions() {
  permissions.value = []
  const res = await client.GetPermissions({})
  permissions.value = res.permissions!
}
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">
    <div @click="openMenu = !openMenu" class="burger-button">
      <Icon class="burger-icon" size="28">
        <MenuOutlined />
      </Icon>
    </div>
    <div class="left-group menu-buttons-block" :class="!openMenu ? 'menu-buttons-block-active' : ''">
      <div class="menu-item-block" :class="{ active: props.active == 'main' }" @click="router.push('/')">
        Главная
      </div>
      <div class="menu-item-block" :class="{ active: props.active == 'office' }" v-if="authStore.hasRole('user')"
        @click="router.push('/office')">
        Кабинет
      </div>
      <div class="menu-item-block" :class="{ active: props.active == 'games' }" v-if="hasPermission('games_page')"
        @click="router.push('/games')">
        Игры
      </div>
      <div class="menu-item-block" :class="{ active: props.active == 'catalog' }" @click="router.push('/catalog')">
        Каталог
      </div>
      <div class="menu-item-block" :class="{ active: props.active == 'scenarios' }" v-if="hasPermission('scenarios_page')" @click="router.push('/scenarios')">
        Мои сценарии
      </div>
      <div class="menu-item-block" :class="{ active: props.active == 'users' }" v-if="hasPermission('users_page')"
        @click="router.push('/users')">
        Пользователи
      </div>
    </div>

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

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

.menu-item-block {
  display: inline-block;
  margin-left: 10px;
  cursor: pointer;
  padding: 5px;
  font-size: 1.1em;
}

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

.right {
  margin-left: auto;
}

.active {
  color: #63e2b7;
}

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

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

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

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

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