68 lines
2.6 KiB
Vue
68 lines
2.6 KiB
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 menuStore.menu"
|
|
@click="menuStore.navigateToItem(item);"
|
|
: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 class="dark:hidden" src="/logo.png" alt="Frame" />
|
|
<img class="hidden dark:block" src="/logo-dark.png" alt="Frame" />
|
|
<div class="flex items-center gap-[30px]">
|
|
<i class="uil uil-user text-[35px] cursor-pointer"></i>
|
|
<i class="uil uil-shopping-cart text-[35px] cursor-pointer"></i>
|
|
</div>
|
|
<ThemeSwitcher />
|
|
<LangSwitcher />
|
|
<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">
|
|
<i class="uil uil-user text-[35px] cursor-pointer"></i>
|
|
<i class="uil uil-shopping-cart text-[35px] cursor-pointer"></i>
|
|
<ThemeSwitcher />
|
|
<i class="uil uil-apps text-[35px] cursor-pointer"></i>
|
|
</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">
|
|
<i class="uil uil-user text-[35px] cursor-pointer"></i>
|
|
<i class="uil uil-shopping-cart text-[35px] cursor-pointer"></i>
|
|
<i class="uil uil-apps text-[35px] cursor-pointer"></i>
|
|
</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">
|
|
<i class="uil uil-user text-[35px] cursor-pointer"></i>
|
|
<i class="uil uil-apps text-[35px] cursor-pointer"></i>
|
|
</div>
|
|
</div>
|
|
</UContainer>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import LangSwitcher from './langSwitcher.vue';
|
|
|
|
const menuStore = useMenuStore()
|
|
</script>
|