fix menu

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>