From f6167fc92f1281950866aee6989bea2da608a5d3 Mon Sep 17 00:00:00 2001
From: Vasily Kuzin <work@exer7um.com>
Date: Fri, 24 Oct 2025 13:00:55 +0300
Subject: [PATCH 1/3] =?UTF-8?q?=D0=A3=D0=B4=D0=B0=D0=BB=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=B5=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82?=
 =?UTF-8?q?=D0=B0=20`TheHeaderNavigation`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/the-header/TheHeader.vue       |  2 +-
 .../the-header/TheHeaderNavigationMobile.vue  | 29 +++++++++++++++++++
 .../navigation/TheHeaderNavigation.vue        | 12 --------
 .../navigation/TheHeaderNavigationMobile.vue  | 14 ---------
 .../TheHeaderNavigationMobile.spec.ts         |  2 +-
 5 files changed, 31 insertions(+), 28 deletions(-)
 create mode 100644 app/components/the-header/TheHeaderNavigationMobile.vue
 delete mode 100644 app/components/the-header/navigation/TheHeaderNavigation.vue
 delete mode 100644 app/components/the-header/navigation/TheHeaderNavigationMobile.vue

diff --git a/app/components/the-header/TheHeader.vue b/app/components/the-header/TheHeader.vue
index e506f76..b17033d 100644
--- a/app/components/the-header/TheHeader.vue
+++ b/app/components/the-header/TheHeader.vue
@@ -33,7 +33,7 @@ const navigation = computed(() => {
     <div
       class="border-default flex items-center justify-between gap-x-2 rounded-xl border bg-white/60 p-2 shadow backdrop-blur-lg md:rounded-2xl md:px-4 dark:bg-neutral-900/60"
     >
-      <TheHeaderNavigation class="hidden md:flex" :navigation />
+      <UNavigationMenu class="hidden md:flex" :items="navigation" />
       <TheHeaderNavigationMobile class="md:hidden" :navigation />
       <div class="flex justify-between gap-x-2">
         <TheHeaderLocaleSwitch />
diff --git a/app/components/the-header/TheHeaderNavigationMobile.vue b/app/components/the-header/TheHeaderNavigationMobile.vue
new file mode 100644
index 0000000..f343451
--- /dev/null
+++ b/app/components/the-header/TheHeaderNavigationMobile.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { DropdownMenuItem } from "@nuxt/ui"
+
+defineProps<{
+  /** Навигация */
+  navigation: DropdownMenuItem[]
+}>()
+
+const { t } = useI18n({ useScope: "local" })
+</script>
+
+<template>
+  <UDropdownMenu :items="navigation" size="lg">
+    <UButton
+      :aria-label="t('menu')"
+      color="neutral"
+      icon="heroicons:bars-2"
+      size="lg"
+      variant="soft"
+    />
+  </UDropdownMenu>
+</template>
+
+<i18n lang="yaml">
+en:
+  menu: Navigation menu
+ru:
+  menu: Меню навигации
+</i18n>
diff --git a/app/components/the-header/navigation/TheHeaderNavigation.vue b/app/components/the-header/navigation/TheHeaderNavigation.vue
deleted file mode 100644
index 0286157..0000000
--- a/app/components/the-header/navigation/TheHeaderNavigation.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import type { NavigationMenuItem } from "@nuxt/ui"
-
-const { navigation } = defineProps<{
-  /** Навигация */
-  navigation: NavigationMenuItem[]
-}>()
-</script>
-
-<template>
-  <UNavigationMenu :items="navigation" />
-</template>
diff --git a/app/components/the-header/navigation/TheHeaderNavigationMobile.vue b/app/components/the-header/navigation/TheHeaderNavigationMobile.vue
deleted file mode 100644
index 7d6fb3a..0000000
--- a/app/components/the-header/navigation/TheHeaderNavigationMobile.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import type { DropdownMenuItem } from "@nuxt/ui"
-
-defineProps<{
-  /** Навигация */
-  navigation: DropdownMenuItem[]
-}>()
-</script>
-
-<template>
-  <UDropdownMenu :items="navigation" size="lg">
-    <UButton color="neutral" icon="heroicons:bars-2" size="lg" variant="soft" />
-  </UDropdownMenu>
-</template>
diff --git a/app/tests/components/the-header/navigation/TheHeaderNavigationMobile.spec.ts b/app/tests/components/the-header/navigation/TheHeaderNavigationMobile.spec.ts
index b32b0e2..7ef231a 100644
--- a/app/tests/components/the-header/navigation/TheHeaderNavigationMobile.spec.ts
+++ b/app/tests/components/the-header/navigation/TheHeaderNavigationMobile.spec.ts
@@ -4,7 +4,7 @@ import { UButton } from "#components"
 import { mountSuspended } from "@nuxt/test-utils/runtime"
 import { afterEach, beforeEach, describe, expect, test } from "vitest"
 
-import TheHeaderNavigationMobile from "~/components/the-header/navigation/TheHeaderNavigationMobile.vue"
+import TheHeaderNavigationMobile from "~/components/the-header/TheHeaderNavigationMobile.vue"
 import { navigation } from "~/tests/constants/navigation"
 
 describe("Компонент TheHeaderNavigationMobile", () => {

From 11d3188b2bdc03b693a46271421c3ffc74b31eee Mon Sep 17 00:00:00 2001
From: Vasily Kuzin <work@exer7um.com>
Date: Fri, 24 Oct 2025 13:03:49 +0300
Subject: [PATCH 2/3] =?UTF-8?q?=D0=A3=D0=B4=D0=B0=D0=BB=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=B5=20=D0=BB=D0=B8=D1=88=D0=BD=D0=B5=D0=B3=D0=BE=20=D0=BA?=
 =?UTF-8?q?=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../navigation/TheHeaderNavigationMobile.vue  | 29 -------------------
 1 file changed, 29 deletions(-)
 delete mode 100644 app/components/the-header/navigation/TheHeaderNavigationMobile.vue

diff --git a/app/components/the-header/navigation/TheHeaderNavigationMobile.vue b/app/components/the-header/navigation/TheHeaderNavigationMobile.vue
deleted file mode 100644
index f343451..0000000
--- a/app/components/the-header/navigation/TheHeaderNavigationMobile.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import type { DropdownMenuItem } from "@nuxt/ui"
-
-defineProps<{
-  /** Навигация */
-  navigation: DropdownMenuItem[]
-}>()
-
-const { t } = useI18n({ useScope: "local" })
-</script>
-
-<template>
-  <UDropdownMenu :items="navigation" size="lg">
-    <UButton
-      :aria-label="t('menu')"
-      color="neutral"
-      icon="heroicons:bars-2"
-      size="lg"
-      variant="soft"
-    />
-  </UDropdownMenu>
-</template>
-
-<i18n lang="yaml">
-en:
-  menu: Navigation menu
-ru:
-  menu: Меню навигации
-</i18n>

From ba44d6723cba0acb789c3fb2637fcf8e7a1a902a Mon Sep 17 00:00:00 2001
From: Vasily Kuzin <work@exer7um.com>
Date: Fri, 24 Oct 2025 13:19:29 +0300
Subject: [PATCH 3/3] =?UTF-8?q?=D0=9E=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D1=82=D0=B5=D1=81=D1=82=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vscode/settings.json                         |  2 +
 .../components/the-header/TheHeader.spec.ts   | 33 ++++++++++++
 .../TheHeaderNavigationMobile.spec.ts         |  0
 .../__snapshots__/TheHeader.spec.ts.snap      | 51 +++++++++++++++++++
 .../navigation/TheHeaderNavigation.spec.ts    | 45 ----------------
 5 files changed, 86 insertions(+), 45 deletions(-)
 rename app/tests/components/the-header/{navigation => }/TheHeaderNavigationMobile.spec.ts (100%)
 create mode 100644 app/tests/components/the-header/__snapshots__/TheHeader.spec.ts.snap
 delete mode 100644 app/tests/components/the-header/navigation/TheHeaderNavigation.spec.ts

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 7dd98f4..9374991 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,6 +1,8 @@
 {
   "cSpell.language": "en,ru",
   "cSpell.words": [
+    "десктопная",
+    "десктопных",
     "инпута",
     "инпуте",
     "фронтенд",
diff --git a/app/tests/components/the-header/TheHeader.spec.ts b/app/tests/components/the-header/TheHeader.spec.ts
index 3bf1330..2f0b467 100644
--- a/app/tests/components/the-header/TheHeader.spec.ts
+++ b/app/tests/components/the-header/TheHeader.spec.ts
@@ -8,6 +8,11 @@ import TheHeader from "~/components/the-header/TheHeader.vue"
 describe("Компонент TheHeader", () => {
   let wrapper: VueWrapper
 
+  const desktopNavigation = () =>
+    wrapper.findComponent({ name: "UNavigationMenu" })
+  const mobileNavigation = () =>
+    wrapper.findComponent({ name: "TheHeaderNavigationMobile" })
+
   beforeEach(async () => {
     wrapper = await mountSuspended(TheHeader, { shallow: true })
   })
@@ -19,4 +24,32 @@ describe("Компонент TheHeader", () => {
   test("Семантический тег header", () => {
     expect(wrapper.element.tagName).toBe("HEADER")
   })
+
+  describe("Десктопная навигация", () => {
+    test("Отображается", () => {
+      expect(desktopNavigation().exists()).toBeTruthy()
+    })
+
+    test("Передаются элементы навигации", () => {
+      expect(desktopNavigation().props("items")).toMatchSnapshot()
+    })
+
+    test("Отображается на десктопных устройствах", () => {
+      expect(desktopNavigation().classes()).toContain("md:flex")
+    })
+  })
+
+  describe("Мобильная навигация", () => {
+    test("Отображается", () => {
+      expect(mobileNavigation().exists()).toBeTruthy()
+    })
+
+    test("Передаются элементы навигации", () => {
+      expect(mobileNavigation().props("navigation")).toMatchSnapshot()
+    })
+
+    test("Скрывается на десктопных устройствах", () => {
+      expect(mobileNavigation().classes()).toContain("md:hidden")
+    })
+  })
 })
diff --git a/app/tests/components/the-header/navigation/TheHeaderNavigationMobile.spec.ts b/app/tests/components/the-header/TheHeaderNavigationMobile.spec.ts
similarity index 100%
rename from app/tests/components/the-header/navigation/TheHeaderNavigationMobile.spec.ts
rename to app/tests/components/the-header/TheHeaderNavigationMobile.spec.ts
diff --git a/app/tests/components/the-header/__snapshots__/TheHeader.spec.ts.snap b/app/tests/components/the-header/__snapshots__/TheHeader.spec.ts.snap
new file mode 100644
index 0000000..bf882a7
--- /dev/null
+++ b/app/tests/components/the-header/__snapshots__/TheHeader.spec.ts.snap
@@ -0,0 +1,51 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Компонент TheHeader > Десктопная навигация > Передаются элементы навигации 1`] = `
+[
+  {
+    "icon": "heroicons:home",
+    "label": "pages.index",
+    "to": "/",
+  },
+  {
+    "icon": "heroicons:briefcase",
+    "label": "pages.experience",
+    "to": "/experience/",
+  },
+  {
+    "icon": "heroicons:squares-2x2",
+    "label": "pages.projects",
+    "to": "/projects/",
+  },
+  {
+    "icon": "heroicons:user",
+    "label": "pages.about",
+    "to": "/about/",
+  },
+]
+`;
+
+exports[`Компонент TheHeader > Мобильная навигация > Передаются элементы навигации 1`] = `
+[
+  {
+    "icon": "heroicons:home",
+    "label": "pages.index",
+    "to": "/",
+  },
+  {
+    "icon": "heroicons:briefcase",
+    "label": "pages.experience",
+    "to": "/experience/",
+  },
+  {
+    "icon": "heroicons:squares-2x2",
+    "label": "pages.projects",
+    "to": "/projects/",
+  },
+  {
+    "icon": "heroicons:user",
+    "label": "pages.about",
+    "to": "/about/",
+  },
+]
+`;
diff --git a/app/tests/components/the-header/navigation/TheHeaderNavigation.spec.ts b/app/tests/components/the-header/navigation/TheHeaderNavigation.spec.ts
deleted file mode 100644
index 079a4f4..0000000
--- a/app/tests/components/the-header/navigation/TheHeaderNavigation.spec.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import type { VueWrapper } from "@vue/test-utils"
-
-import { mountSuspended } from "@nuxt/test-utils/runtime"
-import { afterEach, beforeEach, describe, expect, test } from "vitest"
-
-import TheHeaderNavigation from "~/components/the-header/navigation/TheHeaderNavigation.vue"
-import { navigation } from "~/tests/constants/navigation"
-
-describe("Компонент TheHeaderNavigation", () => {
-  let wrapper: VueWrapper
-
-  beforeEach(async () => {
-    wrapper = await mountSuspended(TheHeaderNavigation, {
-      props: { navigation },
-    })
-  })
-
-  afterEach(() => {
-    wrapper.unmount()
-  })
-
-  const nav = () => wrapper.find("nav")
-  const navigationLink = () => nav().find("a")
-
-  test("Семантический тег nav", () => {
-    expect(nav().exists()).toBeTruthy()
-  })
-
-  describe("Элементы навигации", () => {
-    test("Правильное количество элементов", () => {
-      /** Количество элементов в навигации */
-      const navigationLinksCount = nav().findAll("a").length
-
-      expect(navigationLinksCount).toBe(navigation.length)
-    })
-
-    test("Семантический тег a", () => {
-      expect(navigationLink().exists()).toBeTruthy()
-    })
-
-    test("Ссылки передаются из навигации", () => {
-      expect(navigationLink().attributes("href")).toBe(navigation[0].to)
-    })
-  })
-})