The_evening_detective/evening_detective_frontend
1
0
Fork 0
generated from VLADIMIR/template_frontend
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
Владимир Фёдоров
2026-10-03 13:54:09 +07:00
parent 0248a77f61
commit 16237d4578
1 changed files with 62 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/HeaderMenu.vue
+62 -25
View File
@@ -46,92 +46,117 @@ const openMenu = ref(false)
<template> <template>
<div class="menu-block"> <div class="menu-block">
<div @click="openMenu = !openMenu" class="burger-button"> <button
type="button"
class="burger-button"
:aria-expanded="openMenu"
:aria-label="openMenu ? 'Закрыть меню' : 'Открыть меню'"
@click="openMenu = !openMenu"
>
<Icon class="burger-icon" size="28"> <Icon class="burger-icon" size="28">
<MenuOutlined /> <MenuOutlined />
</Icon> </Icon>
</div> </button>
<div <div
class="left-group menu-buttons-block" class="left-group menu-buttons-block"
:class="!openMenu ? 'menu-buttons-block-active' : ''" :class="!openMenu ? 'menu-buttons-block-active' : ''"
> >
<div <button
type="button"
class="menu-item-block" class="menu-item-block"
:class="{ active: props.active == 'main' }" :class="{ active: props.active == 'main' }"
@click="router.push('/')" @click="router.push('/')"
> >
Главная Главная
</div> </button>
<div <button
type="button"
class="menu-item-block" class="menu-item-block"
:class="{ active: props.active == 'office' }" :class="{ active: props.active == 'office' }"
v-if="authStore.hasRole('user')" v-if="authStore.hasRole('user')"
@click="router.push('/office')" @click="router.push('/office')"
> >
Кабинет Кабинет
</div> </button>
<div <button
type="button"
class="menu-item-block" class="menu-item-block"
:class="{ active: props.active == 'games' }" :class="{ active: props.active == 'games' }"
v-if="hasPermission('games_page')" v-if="hasPermission('games_page')"
@click="router.push('/games')" @click="router.push('/games')"
> >
Игры Игры
</div> </button>
<div <button
type="button"
class="menu-item-block" class="menu-item-block"
v-if="hasPermission('games_page')" v-if="hasPermission('games_page')"
@click="router.push('/tickets/check')" @click="router.push('/tickets/check')"
> >
Проверка билетов Проверка билетов
</div> </button>
<div <button
type="button"
class="menu-item-block" class="menu-item-block"
v-if="hasPermission('games_page')" v-if="hasPermission('games_page')"
@click="router.push('/screen')" @click="router.push('/screen')"
> >
Экран Экран
</div> </button>
<div <button
type="button"
class="menu-item-block" class="menu-item-block"
:class="{ active: props.active == 'catalog' }" :class="{ active: props.active == 'catalog' }"
@click="router.push('/catalog')" @click="router.push('/catalog')"
> >
Каталог Каталог
</div> </button>
<div <button
type="button"
class="menu-item-block" class="menu-item-block"
:class="{ active: props.active == 'scenarios' }" :class="{ active: props.active == 'scenarios' }"
v-if="hasPermission('scenarios_page')" v-if="hasPermission('scenarios_page')"
@click="router.push('/scenarios')" @click="router.push('/scenarios')"
> >
Мои сценарии Мои сценарии
</div> </button>
<div <button
type="button"
class="menu-item-block" class="menu-item-block"
:class="{ active: props.active == 'users' }" :class="{ active: props.active == 'users' }"
v-if="hasPermission('users_page')" v-if="hasPermission('users_page')"
@click="router.push('/users')" @click="router.push('/users')"
> >
Пользователи Пользователи
</div> </button>
<div <button
type="button"
class="menu-item-block" class="menu-item-block"
:class="{ active: props.active == 'reviews' }" :class="{ active: props.active == 'reviews' }"
v-if="hasPermission('reviews_page')" v-if="hasPermission('reviews_page')"
@click="router.push('/reviews')" @click="router.push('/reviews')"
> >
Отзывы Отзывы
</div> </button>
</div> </div>
<div class="right-group"> <div class="right-group">
<div v-if="!authStore.isAuthenticated" class="menu-item-block right" @click="goToLogin"> <button
v-if="!authStore.isAuthenticated"
type="button"
class="menu-item-block right"
@click="goToLogin"
>
Войти Войти
</div> </button>
<div v-if="authStore.isAuthenticated" class="menu-item-block right" @click="goToLogout"> <button
v-if="authStore.isAuthenticated"
type="button"
class="menu-item-block right"
@click="goToLogout"
>
Выйти Выйти
</div> </button>
</div> </div>
</div> </div>
</template> </template>
@@ -151,8 +176,12 @@ const openMenu = ref(false)
} }
.menu-item-block { .menu-item-block {
background: transparent;
border: 0;
color: inherit;
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
font-family: inherit;
font-size: 1.1em; font-size: 1.1em;
margin-left: 10px; margin-left: 10px;
padding: 5px; padding: 5px;
@@ -171,6 +200,14 @@ const openMenu = ref(false)
color: #63e2b7; color: #63e2b7;
} }
.burger-button {
background: transparent;
border: 0;
color: inherit;
cursor: pointer;
padding: 0;
}
@media (width >=1024px) { @media (width >=1024px) {
.burger-button { .burger-button {
display: none; display: none;
@@ -189,7 +226,7 @@ const openMenu = ref(false)
width: 100%; width: 100%;
} }
.menu-buttons-block div { .menu-buttons-block button {
padding: 15px 5px; padding: 15px 5px;
} }