product page and linter
This commit is contained in:
@ -4,26 +4,58 @@
|
||||
<div class="w-full border-b border-border">
|
||||
<UiContainer class="relative">
|
||||
<div class="hidden h-[120px] w-full items-center gap-[145px] xl:flex">
|
||||
<ul class="flex items-center justify-between gap-5 whitespace-nowrap w-full">
|
||||
<li v-for="(item, index) in menuStore.menu" @click="menuStore.navigateToItem(item)" :key="item.id"
|
||||
:class="['hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer text-lg transition-all text-inter',
|
||||
route.params.id == item.id.toString() ? 'text-accent-green-light dark:text-accent-green-dark font-bold underline' : false]">
|
||||
0{{ index + 1 }} <br />
|
||||
<ul
|
||||
class="flex items-center justify-between gap-5 whitespace-nowrap w-full"
|
||||
>
|
||||
<li
|
||||
v-for="(item, index) in menuStore.menu"
|
||||
:key="item.id"
|
||||
:class="[
|
||||
'hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer text-lg transition-all text-inter',
|
||||
route.params.id == item.id.toString()
|
||||
? 'text-accent-green-light dark:text-accent-green-dark font-bold underline'
|
||||
: false,
|
||||
]"
|
||||
@click="menuStore.navigateToItem(item)"
|
||||
>
|
||||
0{{ index + 1 }} <br>
|
||||
{{ item.front_menu_lang[0].name }}
|
||||
</li>
|
||||
</ul>
|
||||
<ClientOnly v-if="!colorMode?.forced">
|
||||
<img class="cursor-pointer" :src="isDark ? '/logo-dark.svg' : '/logo.svg'" alt="logo"
|
||||
@click="menuStore.navigateToItem()" />
|
||||
<img
|
||||
class="cursor-pointer"
|
||||
:src="isDark ? '/logo-dark.svg' : '/logo.svg'"
|
||||
alt="logo"
|
||||
@click="menuStore.navigateToItem()"
|
||||
>
|
||||
</ClientOnly>
|
||||
<div class="w-full flex items-center justify-between">
|
||||
<div class="flex items-center gap-[30px]">
|
||||
<p @click="menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 13))" class="cursor-pointer">button</p>
|
||||
<p
|
||||
class="cursor-pointer"
|
||||
@click="
|
||||
menuStore.navigateToItem(
|
||||
menuStore.menuItems?.find((item) => item.id === 13),
|
||||
)
|
||||
"
|
||||
>
|
||||
button
|
||||
</p>
|
||||
<div>
|
||||
<i v-if="!userStore.isLogged"
|
||||
@click="menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 11))"
|
||||
class="uil uil-user text-[31px] cursor-pointer"></i>
|
||||
<div v-else class="py-[6px] px-3 border border-block rounded-sm">
|
||||
<i
|
||||
v-if="!userStore.isLogged"
|
||||
class="uil uil-user text-[31px] cursor-pointer"
|
||||
@click="
|
||||
menuStore.navigateToItem(
|
||||
menuStore.menuItems?.find((item) => item.id === 11),
|
||||
)
|
||||
"
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
class="py-[6px] px-3 border border-block rounded-sm"
|
||||
>
|
||||
{{ userStore.user }}
|
||||
</div>
|
||||
</div>
|
||||
@ -34,13 +66,16 @@
|
||||
<CountryCurrencySelector />
|
||||
</div>
|
||||
<ThemeSwitcher />
|
||||
<button @click="menuStore.navigateToShop" :class="[
|
||||
'cursor-pointer transition-all text-inter whitespace-nowrap',
|
||||
route.params.id == '5'
|
||||
? 'text-accent-green-light dark:text-accent-green-dark font-bold pb-1 border-b-2'
|
||||
: 'hover:bg-button-hover bg-button text-white font-medium rounded-xl px-6 py-3'
|
||||
]">
|
||||
{{ $t('eshop') }}
|
||||
<button
|
||||
:class="[
|
||||
'cursor-pointer transition-all text-inter whitespace-nowrap',
|
||||
route.params.id == '5'
|
||||
? 'text-accent-green-light dark:text-accent-green-dark font-bold pb-1 border-b-2'
|
||||
: 'hover:bg-button-hover bg-button text-white font-medium rounded-xl px-6 py-3',
|
||||
]"
|
||||
@click="menuStore.navigateToShop"
|
||||
>
|
||||
{{ $t("eshop") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -48,20 +83,35 @@
|
||||
</div>
|
||||
|
||||
<!-- md -->
|
||||
<div class="hidden w-full md:flex md:flex-col xl:hidden items-center justify-center">
|
||||
<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">
|
||||
<ClientOnly v-if="!colorMode?.forced">
|
||||
<img class="cursor-pointer" :src="isDark ? '/logo-dark.svg' : '/logo.svg'" alt="logo"
|
||||
@click="menuStore.navigateToItem()" />
|
||||
<img
|
||||
class="cursor-pointer"
|
||||
:src="isDark ? '/logo-dark.svg' : '/logo.svg'"
|
||||
alt="logo"
|
||||
@click="menuStore.navigateToItem()"
|
||||
>
|
||||
</ClientOnly>
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="flex items-center gap-[30px]">
|
||||
<div>
|
||||
<i v-if="!userStore.isLogged"
|
||||
@click="menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 11))"
|
||||
class="uil uil-user text-[31px] cursor-pointer"></i>
|
||||
<div v-else class="py-[6px] px-3 border border-block rounded-sm">
|
||||
<i
|
||||
v-if="!userStore.isLogged"
|
||||
class="uil uil-user text-[31px] cursor-pointer"
|
||||
@click="
|
||||
menuStore.navigateToItem(
|
||||
menuStore.menuItems?.find((item) => item.id === 11),
|
||||
)
|
||||
"
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
class="py-[6px] px-3 border border-block rounded-sm"
|
||||
>
|
||||
{{ userStore.user }}
|
||||
</div>
|
||||
</div>
|
||||
@ -72,26 +122,54 @@
|
||||
<CountryCurrencySelector />
|
||||
</div>
|
||||
<ThemeSwitcher />
|
||||
<i variant="subtle" block class="uil uil-apps text-[33px] cursor-pointer" @click="open = !open"></i>
|
||||
<i
|
||||
variant="subtle"
|
||||
block
|
||||
class="uil uil-apps text-[33px] cursor-pointer"
|
||||
@click="open = !open"
|
||||
/>
|
||||
</div>
|
||||
</UiContainer>
|
||||
</div>
|
||||
<UCollapsible :ui="{ content: 'w-full' }" v-model:open="open" class="w-full">
|
||||
<UCollapsible
|
||||
v-model:open="open"
|
||||
:ui="{ content: 'w-full' }"
|
||||
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" :key="index"
|
||||
:class="['flex items-center justify-between transition-all hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer', route.params.slug === item.front_menu_lang[0].link_rewrite && 'text-accent-green-light dark:text-accent-green-dark font-bold underline']"
|
||||
@click="() => { menuStore.navigateToItem(item); open = false; }">
|
||||
<div
|
||||
v-for="(item, index) in menuStore.menu"
|
||||
:key="index"
|
||||
:class="[
|
||||
'flex items-center justify-between transition-all hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer',
|
||||
route.params.slug === item.front_menu_lang[0].link_rewrite
|
||||
&& 'text-accent-green-light dark:text-accent-green-dark font-bold underline',
|
||||
]"
|
||||
@click="
|
||||
() => {
|
||||
menuStore.navigateToItem(item);
|
||||
open = false;
|
||||
}
|
||||
"
|
||||
>
|
||||
<div class="leading-[70%] text-inter">
|
||||
<span class="mr-4">0{{ index + 1 }}</span>
|
||||
{{ item.front_menu_lang[0].name }}
|
||||
</div>
|
||||
<!-- <i class="uil uil-arrow-up-right text-[35px]"></i> -->
|
||||
<svg width="20" height="20" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg
|
||||
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" />
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</UiContainer>
|
||||
@ -101,49 +179,88 @@
|
||||
</div>
|
||||
|
||||
<!-- sm -->
|
||||
<div class="hidden w-full items-center justify-between sm:flex sm:flex-col md:hidden">
|
||||
<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">
|
||||
<ClientOnly v-if="!colorMode?.forced">
|
||||
<img class="cursor-pointer" :src="isDark ? '/logo-dark.svg' : '/logo.svg'" alt="logo"
|
||||
@click="menuStore.navigateToItem()" />
|
||||
<img
|
||||
class="cursor-pointer"
|
||||
:src="isDark ? '/logo-dark.svg' : '/logo.svg'"
|
||||
alt="logo"
|
||||
@click="menuStore.navigateToItem()"
|
||||
>
|
||||
</ClientOnly>
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="flex items-center gap-[30px]">
|
||||
<div>
|
||||
<i v-if="!userStore.isLogged"
|
||||
@click="menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 11))"
|
||||
class="uil uil-user text-[31px] cursor-pointer"></i>
|
||||
<div v-else class="py-[6px] px-3 border border-block rounded-sm">
|
||||
<i
|
||||
v-if="!userStore.isLogged"
|
||||
class="uil uil-user text-[31px] cursor-pointer"
|
||||
@click="
|
||||
menuStore.navigateToItem(
|
||||
menuStore.menuItems?.find((item) => item.id === 11),
|
||||
)
|
||||
"
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
class="py-[6px] px-3 border border-block rounded-sm"
|
||||
>
|
||||
{{ userStore.user }}
|
||||
</div>
|
||||
</div>
|
||||
<CartPopup />
|
||||
</div>
|
||||
<i variant="subtle" block class="uil uil-apps text-[30px] cursor-pointer" @click="open = !open"></i>
|
||||
<i
|
||||
variant="subtle"
|
||||
block
|
||||
class="uil uil-apps text-[30px] cursor-pointer"
|
||||
@click="open = !open"
|
||||
/>
|
||||
</div>
|
||||
</UiContainer>
|
||||
</div>
|
||||
<UCollapsible :ui="{ content: 'w-full' }" v-model:open="open" class="w-full">
|
||||
<UCollapsible
|
||||
v-model:open="open"
|
||||
:ui="{ content: 'w-full' }"
|
||||
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);
|
||||
open = false;
|
||||
}
|
||||
" :key="index"
|
||||
:class="['flex items-center justify-between transition-all hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer', route.params.slug === item.front_menu_lang[0].link_rewrite && 'text-accent-green-light dark:text-accent-green-dark font-bold underline']">
|
||||
<div
|
||||
v-for="(item, index) in menuStore.menu"
|
||||
:key="index"
|
||||
:class="[
|
||||
'flex items-center justify-between transition-all hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer',
|
||||
route.params.slug === item.front_menu_lang[0].link_rewrite
|
||||
&& 'text-accent-green-light dark:text-accent-green-dark font-bold underline',
|
||||
]"
|
||||
@click="
|
||||
() => {
|
||||
menuStore.navigateToItem(item);
|
||||
open = false;
|
||||
}
|
||||
"
|
||||
>
|
||||
<div class="leading-[70%] text-inter">
|
||||
<span class="mr-4">0{{ index + 1 }}</span>
|
||||
{{ item.front_menu_lang[0].name }}
|
||||
</div>
|
||||
<!-- <i class="uil uil-arrow-up-right text-[35px]"></i> -->
|
||||
<svg width="20" height="20" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg
|
||||
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" />
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
@ -175,39 +292,74 @@
|
||||
<div class="w-full border-border border-b">
|
||||
<UiContainer class="h-[84px] flex items-center justify-between">
|
||||
<ClientOnly v-if="!colorMode?.forced">
|
||||
<img class="cursor-pointer" :src="isDark ? '/logo-dark.svg' : '/logo.svg'" alt="logo"
|
||||
@click="menuStore.navigateToItem()" />
|
||||
<img
|
||||
class="cursor-pointer"
|
||||
:src="isDark ? '/logo-dark.svg' : '/logo.svg'"
|
||||
alt="logo"
|
||||
@click="menuStore.navigateToItem()"
|
||||
>
|
||||
</ClientOnly>
|
||||
<div class="flex items-center gap-6">
|
||||
<div>
|
||||
<i @click="!userStore.isLogged && menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 11))"
|
||||
class="uil uil-user text-[30px] cursor-pointer"></i>
|
||||
<i
|
||||
class="uil uil-user text-[30px] cursor-pointer"
|
||||
@click="
|
||||
!userStore.isLogged
|
||||
&& menuStore.navigateToItem(
|
||||
menuStore.menuItems?.find((item) => item.id === 11),
|
||||
)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<CartPopup />
|
||||
<i variant="subtle" block class="uil uil-apps text-[30px] cursor-pointer" @click="open = !open"></i>
|
||||
<i
|
||||
variant="subtle"
|
||||
block
|
||||
class="uil uil-apps text-[30px] cursor-pointer"
|
||||
@click="open = !open"
|
||||
/>
|
||||
</div>
|
||||
</UiContainer>
|
||||
</div>
|
||||
<UCollapsible :ui="{ content: 'w-full' }" v-model:open="open" class="w-full">
|
||||
<UCollapsible
|
||||
v-model:open="open"
|
||||
:ui="{ content: 'w-full' }"
|
||||
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);
|
||||
open = false;
|
||||
}
|
||||
" :key="index"
|
||||
:class="['flex items-center justify-between transition-all hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer', route.params.slug === item.front_menu_lang[0].link_rewrite && 'text-accent-green-light dark:text-accent-green-dark font-bold underline']">
|
||||
<div
|
||||
v-for="(item, index) in menuStore.menu"
|
||||
:key="index"
|
||||
:class="[
|
||||
'flex items-center justify-between transition-all hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer',
|
||||
route.params.slug === item.front_menu_lang[0].link_rewrite
|
||||
&& 'text-accent-green-light dark:text-accent-green-dark font-bold underline',
|
||||
]"
|
||||
@click="
|
||||
() => {
|
||||
menuStore.navigateToItem(item);
|
||||
open = false;
|
||||
}
|
||||
"
|
||||
>
|
||||
<div class="leading-[70%] text-inter">
|
||||
<span class="mr-4">0{{ index + 1 }}</span>
|
||||
{{ item.front_menu_lang[0].name }}
|
||||
</div>
|
||||
<!-- <i class="uil uil-arrow-up-right text-[35px]"></i> -->
|
||||
<svg width="20" height="20" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg
|
||||
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" />
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
@ -235,26 +387,27 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import CartPopup from "./CartPopup.vue";
|
||||
import CountryCurrencySelector from "./CountryCurrencySelector.vue";
|
||||
import LangSwitcher from "./LangSwitcher.vue";
|
||||
|
||||
const menuStore = useMenuStore();
|
||||
const userStore = useUserStore();
|
||||
const productStore = useProductStore();
|
||||
const open = ref(false);
|
||||
const colorMode = useColorMode();
|
||||
<script lang="ts" setup>
|
||||
import CartPopup from './CartPopup.vue'
|
||||
import CountryCurrencySelector from './CountryCurrencySelector.vue'
|
||||
import LangSwitcher from './LangSwitcher.vue'
|
||||
|
||||
const menuStore = useMenuStore()
|
||||
const userStore = useUserStore()
|
||||
const productStore = useProductStore()
|
||||
const open = ref(false)
|
||||
const colorMode = useColorMode()
|
||||
|
||||
productStore.getCart()
|
||||
|
||||
const route = useRoute()
|
||||
const isDark = computed({
|
||||
get() {
|
||||
return colorMode.value === "dark";
|
||||
return colorMode.value === 'dark'
|
||||
},
|
||||
set(_isDark) {
|
||||
colorMode.preference = _isDark ? "dark" : "light";
|
||||
colorMode.preference = _isDark ? 'dark' : 'light'
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user