add menu

src/views/HomeView.vue

@@ -1,16 +1,8 @@
 <script setup lang="ts">
-import { DoorFrontFilled } from '@vicons/material'
-import { DoorOpen } from '@vicons/fa'
 import { Key24Regular } from '@vicons/fluent'
 import { Icon } from '@vicons/utils'
 import { computed, ref } from 'vue';
-import { useRouter } from 'vue-router'
-import { NIcon, useMessage } from 'naive-ui'
-import { h } from 'vue'
-
-const router = useRouter()
-
-const message = useMessage()
+import HeaderMenu from '@/components/HeaderMenu.vue'
 
 const isFoundKey = ref(false)
 
@@ -19,38 +11,10 @@ const keyColorClass = computed(() => {
     'gold-color': isFoundKey.value
   }
 })
-
-
-const goToLogin = () => {
-  if (isFoundKey.value) {
-    router.push('/login')
-    return
-  }
-  message.create(
-    "Дверь закрыта, куда же подевался ключ?",
-    {
-      icon: () => h(NIcon, null, { default: () => h(Key24Regular) })
-    }
-  )
-}
 </script>
 
-<!-- Главная страница -->
 <template>
-  <header class="header">
-    <p @click="goToLogin" class="btn-login">
-
-      <Icon v-if="isFoundKey" class="door-icon">
-        <DoorOpen />
-      </Icon>
-      <Icon v-else class="door-icon">
-        <DoorFrontFilled />
-      </Icon>
-
-      Войти
-    </p>
-  </header>
-
+  <HeaderMenu :add-login="true" :is-found-key="isFoundKey"/>
   <main>
     <h1 class="font-text">
       Вечерний детектив
@@ -68,23 +32,6 @@ const goToLogin = () => {
 </template>
 
 <style lang="css">
-.header {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 40px;
-}
-
-.btn-login {
-  position: fixed;
-  top: 0;
-  right: 0;
-  padding: 8px 14px;
-  cursor: pointer;
-  user-select: none;
-}
-
 .font-text {
   font-family: font_old_typer;
 }
@@ -101,11 +48,6 @@ const goToLogin = () => {
   cursor: pointer;
 }
 
-.door-icon {
-  position: relative;
-  top: 3px;
-}
-
 .gold-color {
   color: gold;
 }