fix menu

src/components/GamesPage.vue

@@ -3,9 +3,9 @@ import HeaderMenu from '@/components/HeaderMenu.vue'
 </script>
 
 <template>
-  <HeaderMenu :add-logout="true" active="games" />
-
   <div class="center-block-custom content-block">Игры</div>
+
+  <HeaderMenu :add-logout="true" active="games" />
 </template>
 
 <style scoped></style>

src/components/HeaderMenu.vue

@@ -20,7 +20,7 @@ const props = defineProps({
 
 import { DoorOpen } from '@vicons/fa'
 import { Key24Regular } from '@vicons/fluent'
-import { DoorFrontFilled } from '@vicons/material'
+import { DoorFrontFilled, MenuOutlined } from '@vicons/material'
 import { Icon } from '@vicons/utils'
 import { useMessage } from 'naive-ui'
 import { NIcon } from 'naive-ui'
@@ -65,41 +65,33 @@ const goToLogout = () => {
   authStore.logout()
   router.push('/login')
 }
+
+const openMenu = ref(false)
+
 </script>
 
 <template>
   <div class="menu-block">
-    <div class="left-group">
-      <div
-        class="menu-item-block"
-        :class="{ active: props.active == 'office' }"
-        v-if="authStore.hasRole('user')"
-        @click="router.push('/office')"
-      >
+    <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 == '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 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 == 'scenarios' }"
-        v-if="hasPermission('scenarios_page')"
-        @click="router.push('/scenarios')"
-      >
+      <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 class="menu-item-block" :class="{ active: props.active == 'users' }" v-if="hasPermission('users_page')"
+        @click="router.push('/users')">
         Пользователи
       </div>
     </div>
@@ -127,7 +119,7 @@ const goToLogout = () => {
   width: 100%;
   height: 70px;
 
-  /* background-color: brown; */
+  background-color: #222;
 
   padding: 20px;
   display: flex;
@@ -162,4 +154,37 @@ const goToLogout = () => {
 .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>

src/components/OfficePage.vue

@@ -20,8 +20,6 @@ getPermissions()
 </script>
 
 <template>
-  <HeaderMenu :add-logout="true" active="office" />
-
   <div class="center-block-custom content-block">
     <p>Доброго времени суток, {{ authStore.username }}.</p>
     <p>
@@ -30,6 +28,8 @@ getPermissions()
 
     {{ permissions }}
   </div>
+
+  <HeaderMenu :add-logout="true" active="office" />
 </template>
 
 <style scoped></style>

src/components/ScenariosEditorPage.vue

@@ -197,8 +197,6 @@ async function deletePlace(place: Place) {
 </script>
 
 <template>
-  <HeaderMenu :add-logout="true" active="scenarios" />
-
   <div class="center-block-custom-big content-block">
     <div class="places-container">
       <div class="settings-block">
@@ -269,6 +267,8 @@ async function deletePlace(place: Place) {
       <template #footer> </template>
     </n-card>
   </n-modal>
+
+  <HeaderMenu :add-logout="true" active="scenarios" />
 </template>
 
 <style scoped>

src/components/ScenariosPage.vue

@@ -42,8 +42,6 @@ getScenarios()
 </script>
 
 <template>
-  <HeaderMenu :add-logout="true" active="scenarios" />
-
   <div class="center-block-custom-big content-block">
     <div class="scenarios-container">
       <div class="scenario-block" @click="showAddScenarioModal = true">
@@ -51,16 +49,9 @@ getScenarios()
         <p class="scenario-title">Создать новый сценарий</p>
       </div>
 
-      <div
-        class="scenario-block"
-        v-for="scenario in scenarios"
-        @click="toScenarioEditor(scenario.id!)"
-        v-bind:key="scenario.id"
-      >
-        <div
-          class="scenario-image-block scenario-image"
-          :style="{ backgroundImage: `url(${scenario.image})` }"
-        ></div>
+      <div class="scenario-block" v-for="scenario in scenarios" @click="toScenarioEditor(scenario.id!)"
+        v-bind:key="scenario.id">
+        <div class="scenario-image-block scenario-image" :style="{ backgroundImage: `url(${scenario.image})` }"></div>
         <p class="scenario-title">{{ scenario.name }}</p>
       </div>
     </div>
@@ -68,22 +59,12 @@ getScenarios()
 
   <!-- Окно создания сценария -->
   <n-modal v-model:show="showAddScenarioModal">
-    <n-card
-      style="width: 600px"
-      title="Создание сценария"
-      :bordered="false"
-      size="huge"
-      role="dialog"
-      aria-modal="true"
-    >
+    <n-card style="width: 600px" title="Создание сценария" :bordered="false" size="huge" role="dialog"
+      aria-modal="true">
       <template #header-extra>
         <n-button @click="showAddScenarioModal = false"> x </n-button>
       </template>
-      <n-input
-        v-model:value="newScenarioName"
-        type="text"
-        placeholder='Дело №0 "Следствие ведут овечки"'
-      />
+      <n-input v-model:value="newScenarioName" type="text" placeholder='Дело №0 "Следствие ведут овечки"' />
       <template #footer>
         <n-button @click="addScenario(newScenarioName)" :disabled="newScenarioName.length == 0">
           Создать
@@ -91,6 +72,8 @@ getScenarios()
       </template>
     </n-card>
   </n-modal>
+
+  <HeaderMenu :add-logout="true" active="scenarios" />
 </template>
 
 <style scoped>
@@ -144,7 +127,7 @@ getScenarios()
   padding: 5px 0;
 }
 
-@media (width >= 1024px) {
+@media (width >=1024px) {
   .scenarios-container {
     height: calc(100vh - 70px);
   }

src/components/UsersPage.vue

@@ -3,9 +3,9 @@ import HeaderMenu from '@/components/HeaderMenu.vue'
 </script>
 
 <template>
-  <HeaderMenu :add-logout="true" active="users" />
-
   <div class="center-block-custom content-block">Пользователи</div>
+
+  <HeaderMenu :add-logout="true" active="users" />
 </template>
 
 <style scoped></style>

src/views/HomeView.vue

@@ -15,7 +15,6 @@ const keyColorClass = computed(() => {
 </script>
 
 <template>
-  <HeaderMenu :add-login="true" :is-found-key="isFoundKey" />
   <div class="center-block-custom content-block center-middle-block-custom height80">
     <div>
       <h1 class="font-text">Вечерний детектив</h1>
@@ -28,6 +27,8 @@ const keyColorClass = computed(() => {
       </p>
     </div>
   </div>
+
+  <HeaderMenu :add-login="true" :is-found-key="isFoundKey" />
 </template>
 
 <style lang="css">
@@ -52,7 +53,7 @@ const keyColorClass = computed(() => {
   color: gold;
 }
 
-@media (width >= 1024px) {
+@media (width >=1024px) {
   .font-text {
     position: relative;
     left: -50px;