fix

src/assets/main.css

@@ -28,7 +28,7 @@ body {
 
 .content-block {
   margin-top: 70px;
-  padding: 0;
+  padding: 20px;
 
   /* background-color: #553333; */
 }
@@ -57,4 +57,4 @@ body {
     margin-top: 70px;
     padding: 0;
   }
-}
+}

src/components/HeaderMenu.vue

@@ -8,24 +8,15 @@ const props = defineProps({
     type: Boolean,
     required: false,
   },
-  isFoundKey: {
-    type: Boolean,
-    required: false,
-  },
   active: {
     type: String,
     required: false,
   },
 })
 
-import { DoorOpen } from '@vicons/fa'
-import { Key24Regular } from '@vicons/fluent'
-import { DoorFrontFilled, MenuOutlined } from '@vicons/material'
+import { MenuOutlined } from '@vicons/material'
 import { Icon } from '@vicons/utils'
-import { useMessage } from 'naive-ui'
-import { NIcon } from 'naive-ui'
 import { ref } from 'vue'
-import { h } from 'vue'
 import { useRouter } from 'vue-router'
 
 import { getAuthClient } from '@/api/auth_client'
@@ -36,7 +27,6 @@ authStore.initFromStorage()
 
 const router = useRouter()
 const client = getAuthClient()
-const message = useMessage()
 
 const permissions = ref<string[]>([])
 
@@ -52,13 +42,7 @@ function hasPermission(permission: string): boolean {
 }
 
 const goToLogin = () => {
-  if (props.isFoundKey) {
-    router.push('/login')
-    return
-  }
-  message.create('Дверь закрыта, куда же подевался ключ?', {
-    icon: () => h(NIcon, null, { default: () => h(Key24Regular) }),
-  })
+  router.push('/login')
 }
 
 const goToLogout = () => {
@@ -72,7 +56,7 @@ const openMenu = ref(false)
 
 <template>
   <div class="menu-block">
-    <div @click="openMenu = !openMenu" class="burger-button">
+    <div @click="openMenu = !openMenu" class="burger-button" v-if="authStore.hasRole('user')">
       <Icon class="burger-icon" size="28">
         <MenuOutlined />
       </Icon>
@@ -98,12 +82,6 @@ const openMenu = ref(false)
 
     <div class="right-group">
       <div v-if="props.addLogin" class="menu-item-block right" @click="goToLogin">
-        <Icon v-if="isFoundKey" class="door-icon">
-          <DoorOpen />
-        </Icon>
-        <Icon v-else class="door-icon">
-          <DoorFrontFilled />
-        </Icon>
         Войти
       </div>
       <div v-if="props.addLogout" class="menu-item-block right" @click="goToLogout">Выйти</div>
@@ -144,13 +122,6 @@ const openMenu = ref(false)
   margin-left: auto;
 }
 
-.door-icon {
-  float: left;
-  width: 25px;
-  padding-top: 3px;
-  padding-right: 5px;
-}
-
 .active {
   color: #63e2b7;
 }

src/components/ScenariosPage.vue

@@ -82,7 +82,7 @@ getScenarios()
   flex-flow: row wrap;
   justify-content: center;
   overflow-y: auto;
-  padding: 40px 0;
+  padding: 20px 0;
   height: calc(100vh - 150px);
 
   /* border: 1px solid red; */
@@ -90,7 +90,7 @@ getScenarios()
 
 .scenario-block {
   margin: 10px;
-  width: 150px;
+  width: 160px;
   cursor: pointer;
 
   /* background-color: #553333; */
@@ -101,7 +101,7 @@ getScenarios()
 }
 
 .scenario-image-block {
-  height: 150px;
+  height: 160px;
   border-radius: 10px;
 }
 

src/views/HomeView.vue

@@ -1,17 +1,7 @@
 <script setup lang="ts">
-import { Key24Regular } from '@vicons/fluent'
-import { Icon } from '@vicons/utils'
-import { computed, ref } from 'vue'
 
 import HeaderMenu from '@/components/HeaderMenu.vue'
 
-const isFoundKey = ref(false)
-
-const keyColorClass = computed(() => {
-  return {
-    'gold-color': isFoundKey.value,
-  }
-})
 </script>
 
 <template>
@@ -21,14 +11,11 @@ const keyColorClass = computed(() => {
       <h3 class="font-text">Дело №0</h3>
       <p class="content-text">
         Поиграем?
-        <Icon class="key-icon" :class="keyColorClass" @click="isFoundKey = !isFoundKey">
-          <Key24Regular />
-        </Icon>
       </p>
     </div>
   </div>
 
-  <HeaderMenu :add-login="true" :is-found-key="isFoundKey" />
+  <HeaderMenu :add-login="true" />
 </template>
 
 <style lang="css">
@@ -43,16 +30,6 @@ const keyColorClass = computed(() => {
   float: right;
 }
 
-.key-icon {
-  position: relative;
-  top: 3px;
-  cursor: pointer;
-}
-
-.gold-color {
-  color: gold;
-}
-
 @media (width >=1024px) {
   .font-text {
     position: relative;