219 lines
8.9 KiB
Vue
219 lines
8.9 KiB
Vue
<template>
|
|
<div>
|
|
<!-- xl -->
|
|
<div class="w-full border-border border-b">
|
|
<UiContainer>
|
|
<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="logo" />
|
|
<img class="hidden dark:block" src="/logo-dark.png" alt="logo-dark" />
|
|
<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>
|
|
</UiContainer>
|
|
</div>
|
|
|
|
<!-- md -->
|
|
<div
|
|
class="hidden w-full md:flex md:flex-col xl:hidden items-center justify-center"
|
|
>
|
|
<div class="w-full border-border border-b">
|
|
<UiContainer class="h-[116px] flex items-center justify-between">
|
|
<img class="dark:hidden" src="/logo.png" alt="logo" />
|
|
<img class="hidden dark:block" src="/logo-dark.png" alt="logo-dark" />
|
|
<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
|
|
variant="subtle"
|
|
block
|
|
class="uil uil-apps text-[35px] cursor-pointer"
|
|
@click="open = !open"
|
|
></i>
|
|
</div>
|
|
</UiContainer>
|
|
</div>
|
|
<UCollapsible
|
|
:ui="{ content: 'w-full' }"
|
|
v-model:open="open"
|
|
class="w-full"
|
|
>
|
|
<template #content>
|
|
<div class="w-full border-border border-b pt-6 pb-8">
|
|
<UiContainer class="flex flex-col gap-[30px]">
|
|
<div
|
|
v-for="(item, index) in menuStore.menu"
|
|
@click="menuStore.navigateToItem(item)"
|
|
:key="index"
|
|
class="flex items-center justify-between transition-all hover:text-text-light/80 dark:hover:text-text-dark/70 cursor-pointer"
|
|
>
|
|
<div class="text-inter leading-[70%] text-lg">
|
|
<span class="mr-4">0{{ index + 1 }}</span>
|
|
{{ item.name }}
|
|
</div>
|
|
<!-- <i class="uil uil-arrow-up-right text-[35px]"></i> -->
|
|
<svg
|
|
class=""
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 26 26"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M25.1274 1.87258C25.1274 1.3203 24.6797 0.872582 24.1274 0.872584L15.1274 0.872583C14.5751 0.872583 14.1274 1.3203 14.1274 1.87258C14.1274 2.42487 14.5751 2.87258 15.1274 2.87258L23.1274 2.87258L23.1274 10.8726C23.1274 11.4249 23.5751 11.8726 24.1274 11.8726C24.6797 11.8726 25.1274 11.4249 25.1274 10.8726L25.1274 1.87258ZM1.5 24.5L2.20711 25.2071L24.8345 2.57969L24.1274 1.87258L23.4203 1.16548L0.792893 23.7929L1.5 24.5Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</UiContainer>
|
|
</div>
|
|
</template>
|
|
</UCollapsible>
|
|
</div>
|
|
|
|
<!-- sm -->
|
|
<div
|
|
class="hidden w-full items-center justify-between sm:flex sm:flex-col md:hidden"
|
|
>
|
|
<div class="w-full border-border border-b">
|
|
<UiContainer class="h-[84px] flex items-center justify-between">
|
|
<img class="dark:hidden" src="/logo.png" alt="logo" />
|
|
<img class="hidden dark:block" src="/logo-dark.png" alt="logo-dark" />
|
|
<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
|
|
variant="subtle"
|
|
block
|
|
class="uil uil-apps text-[35px] cursor-pointer"
|
|
@click="open = !open"
|
|
></i>
|
|
</div>
|
|
</UiContainer>
|
|
</div>
|
|
<UCollapsible
|
|
:ui="{ content: 'w-full' }"
|
|
v-model:open="open"
|
|
class="w-full"
|
|
>
|
|
<template #content>
|
|
<div class="w-full border-border border-b pt-6 pb-8">
|
|
<UiContainer class="flex flex-col gap-[30px]">
|
|
<div
|
|
v-for="(item, index) in menuStore.menu"
|
|
@click="menuStore.navigateToItem(item)"
|
|
:key="index"
|
|
class="flex items-center justify-between transition-all hover:text-text-light/80 dark:hover:text-text-dark/70 cursor-pointer"
|
|
>
|
|
<div class="text-inter leading-[70%] text-lg">
|
|
<span class="mr-4">0{{ index + 1 }}</span>
|
|
{{ item.name }}
|
|
</div>
|
|
<!-- <i class="uil uil-arrow-up-right text-[35px]"></i> -->
|
|
<svg
|
|
class=""
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 26 26"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M25.1274 1.87258C25.1274 1.3203 24.6797 0.872582 24.1274 0.872584L15.1274 0.872583C14.5751 0.872583 14.1274 1.3203 14.1274 1.87258C14.1274 2.42487 14.5751 2.87258 15.1274 2.87258L23.1274 2.87258L23.1274 10.8726C23.1274 11.4249 23.5751 11.8726 24.1274 11.8726C24.6797 11.8726 25.1274 11.4249 25.1274 10.8726L25.1274 1.87258ZM1.5 24.5L2.20711 25.2071L24.8345 2.57969L24.1274 1.87258L23.4203 1.16548L0.792893 23.7929L1.5 24.5Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</UiContainer>
|
|
</div>
|
|
</template>
|
|
</UCollapsible>
|
|
</div>
|
|
|
|
<!-- smallest one -->
|
|
<div class="w-full items-center justify-between flex flex-col sm:hidden">
|
|
<div class="w-full border-border border-b">
|
|
<UiContainer class="h-[84px] flex items-center justify-between">
|
|
<img class="dark:hidden" src="/logo.png" alt="logo" />
|
|
<img class="hidden dark:block" src="/logo-dark.png" alt="logo-dark" />
|
|
<div class="flex items-center gap-6">
|
|
<i class="uil uil-shopping-cart text-[35px] cursor-pointer"></i>
|
|
<i
|
|
variant="subtle"
|
|
block
|
|
class="uil uil-apps text-[35px] cursor-pointer"
|
|
@click="open = !open"
|
|
></i>
|
|
</div>
|
|
</UiContainer>
|
|
</div>
|
|
<UCollapsible
|
|
:ui="{ content: 'w-full' }"
|
|
v-model:open="open"
|
|
class="w-full"
|
|
>
|
|
<template #content>
|
|
<div class="w-full border-border border-b pt-6 pb-8">
|
|
<UiContainer class="flex flex-col gap-[30px]">
|
|
<div
|
|
v-for="(item, index) in menuStore.menu"
|
|
@click="menuStore.navigateToItem(item)"
|
|
:key="index"
|
|
class="flex items-center justify-between transition-all hover:text-text-light/80 dark:hover:text-text-dark/70 cursor-pointer"
|
|
>
|
|
<div class="text-inter leading-[70%] text-lg">
|
|
<span class="mr-4">0{{ index + 1 }}</span>
|
|
{{ item.name }}
|
|
</div>
|
|
<!-- <i class="uil uil-arrow-up-right text-[35px]"></i> -->
|
|
<svg
|
|
class=""
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 26 26"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M25.1274 1.87258C25.1274 1.3203 24.6797 0.872582 24.1274 0.872584L15.1274 0.872583C14.5751 0.872583 14.1274 1.3203 14.1274 1.87258C14.1274 2.42487 14.5751 2.87258 15.1274 2.87258L23.1274 2.87258L23.1274 10.8726C23.1274 11.4249 23.5751 11.8726 24.1274 11.8726C24.6797 11.8726 25.1274 11.4249 25.1274 10.8726L25.1274 1.87258ZM1.5 24.5L2.20711 25.2071L24.8345 2.57969L24.1274 1.87258L23.4203 1.16548L0.792893 23.7929L1.5 24.5Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</UiContainer>
|
|
</div>
|
|
</template>
|
|
</UCollapsible>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import LangSwitcher from "./LangSwitcher.vue";
|
|
|
|
const menuStore = useMenuStore();
|
|
const open = ref(false);
|
|
</script>
|