your-gold/components/HeaderBlock.vue

<template>
  <div class="border-border border-b">
    <UContainer
      class="mx-auto w-full max-w-[360px] px-[16px] sm:max-w-[768px] sm:px-[17px] md:max-w-[1000px] md:px-[24px] xl:max-w-[1920px] xl:px-[80px]"
    >
      <div class="hidden h-[120px] w-full items-center justify-between xl:flex">
        <ul class="flex items-center gap-20 whitespace-nowrap">
          <li
            v-for="(item, index) in menu.items"
            :key="index"
            class="hover:text-text-light/80 dark:hover:text-text-dark/70 cursor-pointer text-lg transition-all"
          >
            0{{ index + 1 }} <br />
            {{ item.name }}
          </li>
        </ul>
        <img src="/logo.png" alt="Frame" />
        <div class="flex items-center gap-[30px]">
          <img
            class="h-8 w-8 cursor-pointer"
            src="/icons/Account.svg"
            alt="Account"
          />
          <img
            class="h-8 w-8 cursor-pointer"
            src="/icons/Cart.svg"
            alt="Cart"
          />
        </div>
        <ThemeSwitcher />
        <button
          class="hover:bg-button-hover bg-button cursor-pointer rounded-xl px-6 py-3 font-medium text-white transition-all"
        >
          E-shop
        </button>
      </div>
      <div
        class="hidden h-[116px] w-full items-center justify-between md:flex xl:hidden"
      >
        <img src="/logo.png" alt="Frame" />
        <div class="flex items-center gap-6">
          <img
            class="h-8 w-8 cursor-pointer"
            src="/icons/Account.svg"
            alt="Account"
          />
          <img
            class="h-8 w-8 cursor-pointer"
            src="/icons/Cart.svg"
            alt="Cart"
          />
          <ThemeSwitcher />
          <img
            class="h-8 w-8 cursor-pointer"
            src="/icons/Menu.svg"
            alt="Cart"
          />
        </div>
      </div>
      <div
        class="hidden h-[84px] w-full items-center justify-between sm:flex md:hidden"
      >
        <img src="/logo.png" alt="Frame" />
        <div class="flex items-center gap-6">
          <img
            class="h-8 w-8 cursor-pointer"
            src="/icons/Account.svg"
            alt="Account"
          />
          <img
            class="h-8 w-8 cursor-pointer"
            src="/icons/Cart.svg"
            alt="Cart"
          />
          <img
            class="h-8 w-8 cursor-pointer"
            src="/icons/Menu.svg"
            alt="Cart"
          />
        </div>
      </div>
      <div class="flex h-[84px] w-full items-center justify-between sm:hidden">
        <img src="/logo.png" alt="Frame" />
        <div class="flex items-center gap-6">
          <!-- <img
            class="h-8 w-8 cursor-pointer"
            src="/icons/Account.svg"
            alt="Account"
          /> -->
          <UIcon class="uil uil-user h-8 w-8 cursor-pointer"></UIcon>
          <img
            class="h-8 w-8 cursor-pointer"
            src="/icons/Menu.svg"
            alt="Cart"
          />
        </div>
      </div>
    </UContainer>
  </div>
</template>
<script lang="ts" setup>
const menu = {
  items: [
    {
      active: true,
      created: "2025-04-29 14:21:16.980Z",
      id: "l10y982y139ep7u",
      id_lang: "en",
      id_page: "",
      id_parent: "",
      is_default: false,
      is_root: true,
      link_rewrite: "",
      link_title: "",
      meta_description: "",
      meta_title: "",
      name: "Investice",
      page_name: "",
      position_id: 0,
      updated: "2025-05-09 08:34:06.650Z",
    },
    {
      active: true,
      created: "2025-04-29 14:21:16.980Z",
      id: "l10y982y139ep7u",
      id_lang: "en",
      id_page: "",
      id_parent: "",
      is_default: false,
      is_root: true,
      link_rewrite: "",
      link_title: "",
      meta_description: "",
      meta_title: "",
      name: "O zlotě",
      page_name: "",
      position_id: 0,
      updated: "2025-05-09 08:34:06.650Z",
    },
    {
      active: true,
      created: "2025-04-29 14:21:16.980Z",
      id: "l10y982y139ep7u",
      id_lang: "en",
      id_page: "",
      id_parent: "",
      is_default: false,
      is_root: true,
      link_rewrite: "",
      link_title: "",
      meta_description: "",
      meta_title: "",
      name: "Podnikání",
      page_name: "",
      position_id: 0,
      updated: "2025-05-09 08:34:06.650Z",
    },
    {
      active: true,
      created: "2025-04-29 14:21:16.980Z",
      id: "l10y982y139ep7u",
      id_lang: "en",
      id_page: "",
      id_parent: "",
      is_default: false,
      is_root: true,
      link_rewrite: "",
      link_title: "",
      meta_description: "",
      meta_title: "",
      name: "O Nás",
      page_name: "",
      position_id: 0,
      updated: "2025-05-09 08:34:06.650Z",
    },
    {
      active: true,
      created: "2025-04-29 14:21:16.980Z",
      id: "l10y982y139ep7u",
      id_lang: "en",
      id_page: "",
      id_parent: "",
      is_default: false,
      is_root: true,
      link_rewrite: "",
      link_title: "",
      meta_description: "",
      meta_title: "",
      name: "Kontakt",
      page_name: "",
      position_id: 0,
      updated: "2025-05-09 08:34:06.650Z",
    },
  ],
  page: 1,
  perPage: 50,
  totalItems: 14,
  totalPages: 1,
};
</script>