main pages/styles
This commit is contained in:
parent
9246f80857
commit
2ffd64da98
@ -18,10 +18,13 @@
|
||||
|
||||
--color-bg-block: #E8E7E0;
|
||||
|
||||
--color-accent-green: #004F3D;
|
||||
|
||||
/* button */
|
||||
--color-button: #9a7f62;
|
||||
--color-button-hover: #b7946d;
|
||||
--color-button-disabled: #c5c5c5;
|
||||
--color-button-white: #E8E7E0;
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
@ -29,12 +32,20 @@
|
||||
@apply font-bounded text-[24px] leading-[140%] font-bold uppercase md:text-[48px] xl:text-[64px];
|
||||
}
|
||||
|
||||
.h4-uppercase {
|
||||
.h2-bold-bounded {
|
||||
@apply font-bounded text-[24px] leading-[80%] font-bold sm:text-[36px] md:text-[40px];
|
||||
}
|
||||
|
||||
.h4-uppercase-bold-inter {
|
||||
@apply font-inter text-base leading-[150%] font-bold uppercase sm:text-[20px] md:text-[24px];
|
||||
}
|
||||
|
||||
.text-inter {
|
||||
@apply font-inter text-sm sm:text-lg;
|
||||
@apply font-inter text-sm sm:text-lg leading-[150%];
|
||||
}
|
||||
|
||||
.text-bold-24 {
|
||||
@apply font-inter text-[17px] sm:text-[21px] md:text-2xl leading-[150%] font-bold;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
<template>
|
||||
<div class="group flex cursor-pointer items-center justify-start gap-2">
|
||||
<div class="group flex cursor-pointer items-center justify-start gap-2 whitespace-nowrap">
|
||||
<button
|
||||
:class="[
|
||||
'text-inter h-[40px] cursor-pointer rounded-[10px] px-[22px] transition-all sm:h-[50px] md:h-[65px] md:rounded-[15px] md:px-[42px]',
|
||||
type === 'fill'
|
||||
? 'bg-button text-text-dark group-hover:bg-button-hover'
|
||||
: 'border-button text-button group-hover:border-button-hover group-hover:text-button-hover border',
|
||||
: 'border-button text-button dark:border-button-white dark:text-button-white group-hover:border-button-hover group-hover:text-button-hover border',
|
||||
|
||||
]"
|
||||
>
|
||||
<slot />
|
||||
@ -15,7 +16,7 @@
|
||||
'flex h-[40px] w-[40px] items-center justify-center rounded-[10px] p-2.5 transition-all sm:h-[50px] sm:w-[50px] md:h-[65px] md:w-[65px] md:rounded-[15px]',
|
||||
type === 'fill'
|
||||
? 'bg-button text-text-dark group-hover:bg-button-hover'
|
||||
: 'border-button text-button group-hover:border-button-hover group-hover:text-button-hover border',
|
||||
: 'border-button text-button dark:border-button-white dark:text-button-white group-hover:border-button-hover group-hover:text-button-hover border',
|
||||
]"
|
||||
>
|
||||
<!-- <UIcon
|
||||
|
||||
@ -1,13 +1,15 @@
|
||||
<template>
|
||||
<div class="border-t border-border pt-[75px]">
|
||||
<UiContainer class="flex flex-col gap-24">
|
||||
<div class="grid sm:grid-cols-2 sm:gap-[75px] xl:gap-0 xl:grid-flow-col auto-cols-max justify-between">
|
||||
<div
|
||||
class="grid grid-cols-1 md:grid-cols-2 gap-[75px] xl:gap-0 xl:grid-cols-none xl:grid-flow-col auto-cols-max justify-between"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in menuStore.footerItems?.items[0].data"
|
||||
:key="index"
|
||||
class="flex flex-col gap-7 max-w-[280px]"
|
||||
class="flex flex-col gap-[25px] sm:gap-8 max-w-[280px]"
|
||||
>
|
||||
<h3 class="h4-uppercase">{{ item.title }}</h3>
|
||||
<h3 class="h4-uppercase-bold-inter">{{ item.title }}</h3>
|
||||
<div
|
||||
class="text-inter cursor-pointer hover:text-text-light/80 dark:hover:text-text-dark/70 transition-all"
|
||||
v-for="(el, indexEl) in item.items"
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- xl -->
|
||||
<div class="w-full border-border border-b">
|
||||
<div class="w-full border-b border-border">
|
||||
<UiContainer>
|
||||
<div
|
||||
class="hidden h-[120px] w-full items-center justify-between xl:flex"
|
||||
>
|
||||
<ul class="flex items-center gap-20 whitespace-nowrap">
|
||||
<div class="hidden h-[120px] w-full items-center gap-[145px] xl:flex">
|
||||
<ul
|
||||
class="flex items-center justify-between whitespace-nowrap w-full"
|
||||
>
|
||||
<li
|
||||
v-for="(item, index) in menuStore.menu"
|
||||
@click="menuStore.navigateToItem(item)"
|
||||
@ -17,19 +17,27 @@
|
||||
{{ 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>
|
||||
<ClientOnly v-if="!colorMode?.forced">
|
||||
<img
|
||||
class="cursor-pointer"
|
||||
:src="isDark ? '/logo-dark.png' : '/logo.png'"
|
||||
alt="logo"
|
||||
@click="menuStore.navigateToItem()"
|
||||
/>
|
||||
</ClientOnly>
|
||||
<div class="w-full flex items-center justify-between">
|
||||
<div class="flex items-center gap-[30px]">
|
||||
<i class="uil uil-user text-[31px] cursor-pointer"></i>
|
||||
<i class="uil uil-shopping-cart text-[31px] cursor-pointer"></i>
|
||||
</div>
|
||||
<LangSwitcher />
|
||||
<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>
|
||||
<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>
|
||||
@ -40,8 +48,14 @@
|
||||
>
|
||||
<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" />
|
||||
<ClientOnly v-if="!colorMode?.forced">
|
||||
<img
|
||||
class="cursor-pointer"
|
||||
:src="isDark ? '/logo-dark.png' : '/logo.png'"
|
||||
alt="logo"
|
||||
@click="menuStore.navigateToItem()"
|
||||
/>
|
||||
</ClientOnly>
|
||||
<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>
|
||||
@ -65,7 +79,12 @@
|
||||
<UiContainer class="flex flex-col gap-[30px]">
|
||||
<div
|
||||
v-for="(item, index) in menuStore.menu"
|
||||
@click="menuStore.navigateToItem(item)"
|
||||
@click="
|
||||
() => {
|
||||
menuStore.navigateToItem(item);
|
||||
open = false;
|
||||
}
|
||||
"
|
||||
:key="index"
|
||||
class="flex items-center justify-between transition-all hover:text-text-light/80 dark:hover:text-text-dark/70 cursor-pointer"
|
||||
>
|
||||
@ -100,8 +119,14 @@
|
||||
>
|
||||
<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" />
|
||||
<ClientOnly v-if="!colorMode?.forced">
|
||||
<img
|
||||
class="cursor-pointer"
|
||||
:src="isDark ? '/logo-dark.png' : '/logo.png'"
|
||||
alt="logo"
|
||||
@click="menuStore.navigateToItem()"
|
||||
/>
|
||||
</ClientOnly>
|
||||
<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>
|
||||
@ -124,7 +149,12 @@
|
||||
<UiContainer class="flex flex-col gap-[30px]">
|
||||
<div
|
||||
v-for="(item, index) in menuStore.menu"
|
||||
@click="menuStore.navigateToItem(item)"
|
||||
@click="
|
||||
() => {
|
||||
menuStore.navigateToItem(item);
|
||||
open = false;
|
||||
}
|
||||
"
|
||||
:key="index"
|
||||
class="flex items-center justify-between transition-all hover:text-text-light/80 dark:hover:text-text-dark/70 cursor-pointer"
|
||||
>
|
||||
@ -157,8 +187,14 @@
|
||||
<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" />
|
||||
<ClientOnly v-if="!colorMode?.forced">
|
||||
<img
|
||||
class="cursor-pointer"
|
||||
:src="isDark ? '/logo-dark.png' : '/logo.png'"
|
||||
alt="logo"
|
||||
@click="menuStore.navigateToItem()"
|
||||
/>
|
||||
</ClientOnly>
|
||||
<div class="flex items-center gap-6">
|
||||
<i class="uil uil-shopping-cart text-[35px] cursor-pointer"></i>
|
||||
<i
|
||||
@ -180,7 +216,12 @@
|
||||
<UiContainer class="flex flex-col gap-[30px]">
|
||||
<div
|
||||
v-for="(item, index) in menuStore.menu"
|
||||
@click="menuStore.navigateToItem(item)"
|
||||
@click="
|
||||
() => {
|
||||
menuStore.navigateToItem(item);
|
||||
open = false;
|
||||
}
|
||||
"
|
||||
:key="index"
|
||||
class="flex items-center justify-between transition-all hover:text-text-light/80 dark:hover:text-text-dark/70 cursor-pointer"
|
||||
>
|
||||
@ -214,5 +255,16 @@
|
||||
import LangSwitcher from "./LangSwitcher.vue";
|
||||
|
||||
const menuStore = useMenuStore();
|
||||
const store = useStore();
|
||||
const open = ref(false);
|
||||
const colorMode = useColorMode();
|
||||
|
||||
const isDark = computed({
|
||||
get() {
|
||||
return colorMode.value === "dark";
|
||||
},
|
||||
set(_isDark) {
|
||||
colorMode.preference = _isDark ? "dark" : "light";
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,3 +1,20 @@
|
||||
<template>
|
||||
<ClientOnly v-if="!colorMode?.forced">
|
||||
<div class="flex h-8 w-8 cursor-pointer items-center justify-center">
|
||||
<i
|
||||
@click="isDark = !isDark"
|
||||
:class="[
|
||||
'uil text-[32px] cursor-pointer',
|
||||
isDark ? 'uil-moon' : 'uil-sun',
|
||||
]"
|
||||
></i>
|
||||
</div>
|
||||
<template #fallback>
|
||||
<div class="size-20" />
|
||||
</template>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const colorMode = useColorMode();
|
||||
|
||||
@ -10,14 +27,3 @@ const isDark = computed({
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ClientOnly v-if="!colorMode?.forced">
|
||||
<div class="flex h-8 w-8 cursor-pointer items-center justify-center">
|
||||
<i @click="isDark = !isDark" :class="['uil text-[35px] cursor-pointer', isDark ? 'uil-moon' : 'uil-sun']"></i>
|
||||
</div>
|
||||
<template #fallback>
|
||||
<div class="size-20" />
|
||||
</template>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
|
||||
59
components/section/main-page/MainBlocks.vue
Normal file
59
components/section/main-page/MainBlocks.vue
Normal file
@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<UiContainer
|
||||
class="flex flex-wrap items-center justify-between gap-[30px] sm:gap-y-[55px] xl:gap-y-[100px] mb-[55px] sm:mb-[100px]"
|
||||
>
|
||||
<div
|
||||
class="w-full flex flex-col gap-[25px] xl:max-w-[48%] md:mx-10 xl:m-0"
|
||||
v-for="(item, index) in component.section_lang_data"
|
||||
:key="index"
|
||||
>
|
||||
<!-- xl -->
|
||||
<div class="hidden xl:flex xl:h-[330px] flex-col justify-between">
|
||||
<div class="space-y-[55px]">
|
||||
<h2 class="h2-bold-bounded">{{ item.title }}</h2>
|
||||
<p class="text-inter">{{ item.description }}</p>
|
||||
</div>
|
||||
<h4 class="h4-uppercase-bold-inter">{{ item.sub_title }}</h4>
|
||||
</div>
|
||||
|
||||
<!-- sm/md -->
|
||||
<div class="xl:hidden flex flex-col gap-y-[25px] sm:gap-y-[55px]">
|
||||
<h2 class="h2-bold-bounded">{{ item.title }}</h2>
|
||||
<p class="text-inter">{{ item.description }}</p>
|
||||
<h4 class="h4-uppercase-bold-inter">{{ item.sub_title }}</h4>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="h-[235px] sm:h-[350px] w-full rounded-[20px] bg-cover bg-center transition-transform duration-300 group-hover:scale-105 xl:block relative"
|
||||
:style="{
|
||||
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[index]}?thumb=640x0')`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="hidden sm:block absolute bottom-0 right-0 pt-2 pl-2 bg-bg-light dark:bg-bg-dark rounded-tl-2xl"
|
||||
>
|
||||
<ButtonArrow>{{ item.title }}</ButtonArrow>
|
||||
</div>
|
||||
</div>
|
||||
<ButtonArrow class="sm:hidden mx-auto">{{ item.title }}</ButtonArrow>
|
||||
</div>
|
||||
</UiContainer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const props = defineProps<{ component: Component }>();
|
||||
type Component = {
|
||||
image_collection: string;
|
||||
section_id: string;
|
||||
section_img: string;
|
||||
section_lang_data: [
|
||||
{
|
||||
title: string;
|
||||
description: string;
|
||||
sub_title: string;
|
||||
}
|
||||
];
|
||||
};
|
||||
</script>
|
||||
@ -1,37 +1,31 @@
|
||||
<template>
|
||||
<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="">
|
||||
<div class="py-[75px] space-y-[30px] sm:space-y-[53px]">
|
||||
<h1 class="h1">
|
||||
{{ component.section_lang_data.title }}
|
||||
</h1>
|
||||
<div
|
||||
class="hidden h-[509px] w-full rounded-[20px] bg-cover bg-center transition-transform duration-300 group-hover:scale-105 xl:block"
|
||||
:style="{
|
||||
backgroundImage: `url('/header-hero-desc.png')`,
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
class="h-[465px] w-full rounded-[20px] bg-cover bg-center transition-transform duration-300 group-hover:scale-105 sm:h-[509px] xl:hidden"
|
||||
:style="{
|
||||
backgroundImage: `url('/header-hero.png')`,
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
class="flex flex-col items-center space-y-[30px] sm:flex-row sm:items-start md:space-y-0 xl:items-center"
|
||||
>
|
||||
<h3 class="h4-uppercase sm:min-w-[45%]">
|
||||
{{ component.section_lang_data.title_second }}
|
||||
</h3>
|
||||
<div class="flex w-full items-start justify-center sm:justify-end">
|
||||
<ButtonArrow type="fill">{{ component.section_lang_data.button }}</ButtonArrow>
|
||||
</div>
|
||||
<UiContainer>
|
||||
<div class="space-y-[30px] sm:space-y-[53px] mb-[55px] sm:mb-[100px]">
|
||||
<h1 class="h1">
|
||||
{{ component.section_lang_data.title }}
|
||||
</h1>
|
||||
<div
|
||||
class="h-[465px] sm:h-[509px] xl:h-[509px] w-full rounded-[20px] bg-cover bg-center transition-transform duration-300 group-hover:scale-105 xl:block"
|
||||
:style="{
|
||||
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=1200x0')`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
class="flex flex-col items-center space-y-[30px] sm:flex-row sm:items-start md:space-y-0 xl:items-center"
|
||||
>
|
||||
<h3 class="h4-uppercase-bold-inter sm:min-w-[45%]">
|
||||
{{ component.section_lang_data.title_second }}
|
||||
</h3>
|
||||
<div class="flex w-full items-start justify-center sm:justify-end">
|
||||
<ButtonArrow type="fill">{{
|
||||
component.section_lang_data.button
|
||||
}}</ButtonArrow>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UContainer>
|
||||
</UiContainer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@ -46,4 +40,4 @@ type Component = {
|
||||
button: string;
|
||||
};
|
||||
};
|
||||
</script>
|
||||
</script>
|
||||
|
||||
82
components/section/main-page/MainProducts.vue
Normal file
82
components/section/main-page/MainProducts.vue
Normal file
@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<UiContainer class="space-y-[40px] sm:space-y-[55px] md:space-y-[75px]">
|
||||
<div
|
||||
:class="[
|
||||
'sm:mx-[50px] md:mx-0 xl:mx-[92px] flex items-center',
|
||||
itemCount === 1 ? 'justify-center' : 'justify-between',
|
||||
]"
|
||||
>
|
||||
<div
|
||||
v-for="item in itemCount"
|
||||
:key="item"
|
||||
class="w-[200px] sm:w-[260px] md:w-[290px] py-[15px] px-[10px] sm:py-5 sm:px-[14px] bg-button-white rounded-2xl flex flex-col items-center gap-5 sm:gap-7"
|
||||
>
|
||||
<img src="/pics.png" alt="pics" class="max-w-[150px]" />
|
||||
<div class="flex flex-col gap-[10px] sm:gap-[15px] w-full">
|
||||
<h3 class="text-[13px] sm:text-[16px] text-xl font-bold">
|
||||
50g Zlatý slitek: PAMP Suisse
|
||||
</h3>
|
||||
<p class="text-[10px] sm:text-[12px] text-sm text-bg-dark">
|
||||
Osvobozená sazba DPH PL
|
||||
</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="text-accent-green text-bold-24">€ 4,825.44</p>
|
||||
<button
|
||||
class="w-9 h-9 md:w-12 md:h-12 rounded-xl bg-button cursor-pointer hover:bg-button-hover transition-all flex items-center justify-center"
|
||||
>
|
||||
<i
|
||||
class="uil uil-shopping-cart text-[25px] md:text-[24px] text-bg-light"
|
||||
></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-6 md:flex-row items-center justify-between">
|
||||
<h3
|
||||
class="h4-uppercase-bold-inter w-full text-center md:text-start xl:max-w-[50%]"
|
||||
>
|
||||
Zlato je jistota, která nepodléhá času. Udělejte dnes rozhodnutí, které
|
||||
vás ochrání zítra
|
||||
</h3>
|
||||
<ButtonArrow type="fill">E-shop</ButtonArrow>
|
||||
</div>
|
||||
</UiContainer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, onBeforeUnmount } from "vue";
|
||||
|
||||
const props = defineProps<{ component: Component }>();
|
||||
type Component = {
|
||||
image_collection: string;
|
||||
section_id: string;
|
||||
section_img: string;
|
||||
section_lang_data: [
|
||||
{
|
||||
title: string;
|
||||
description: string;
|
||||
sub_title: string;
|
||||
}
|
||||
];
|
||||
};
|
||||
|
||||
const itemCount = ref(1);
|
||||
|
||||
function updateItemCount() {
|
||||
const width = window.innerWidth;
|
||||
if (width >= 1280) itemCount.value = 5;
|
||||
else if (width >= 768) itemCount.value = 3;
|
||||
else if (width >= 640) itemCount.value = 2;
|
||||
else itemCount.value = 1;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
updateItemCount();
|
||||
window.addEventListener("resize", updateItemCount);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener("resize", updateItemCount);
|
||||
});
|
||||
</script>
|
||||
@ -3,7 +3,7 @@
|
||||
class="bg-bg-light dark:bg-bg-dark text-text-light dark:text-text-dark font-inter flex min-h-screen flex-col overflow-hidden"
|
||||
>
|
||||
<HeaderBlock />
|
||||
<div class="flex-1">
|
||||
<div class="flex-1 py-[25px] sm:py-[55px] md:py-[75px]">
|
||||
<slot />
|
||||
</div>
|
||||
<FooterBlock />
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 829 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 496 KiB |
BIN
public/pics.png
Normal file
BIN
public/pics.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
@ -1,2 +0,0 @@
|
||||
User-Agent: *
|
||||
Disallow:
|
||||
@ -45,9 +45,9 @@ export const useMenuStore = defineStore("menuStore", () => {
|
||||
filter: `id_lang="${$i18n.locale.value}"&&active=true`,
|
||||
sort: "position_id",
|
||||
})) as MenuListResponse;
|
||||
|
||||
const root = menuItems.value.items.find((item) => item.is_root);
|
||||
defaultMenu.value = menuItems.value.items.find((item) => item.is_default);
|
||||
|
||||
const root = menuItems.value.items.find((item) => item.is_root);
|
||||
defaultMenu.value = menuItems.value.items.find((item) => item.is_default);
|
||||
|
||||
if (root) {
|
||||
menu.value = buildTreeRecursive(menuItems.value.items, root.id);
|
||||
@ -102,11 +102,9 @@ export const useMenuStore = defineStore("menuStore", () => {
|
||||
let img = "";
|
||||
for (const s in store.components) {
|
||||
store.components[s].section_img.map((item) => {
|
||||
img = `${req?.headers.get("x-forwarded-proto") || url.protocol}://${
|
||||
req?.headers.get("x-forwarded-host") || req?.headers.get("host")
|
||||
}/api/files/${store.components[s].image_collection}/${
|
||||
store.components[s].section_id
|
||||
}/${item}?thumb=400x0`;
|
||||
img = `${req?.headers.get("x-forwarded-proto") || url.protocol}://${req?.headers.get("x-forwarded-host") || req?.headers.get("host")
|
||||
}/api/files/${store.components[s].image_collection}/${store.components[s].section_id
|
||||
}/${item}?thumb=400x0`;
|
||||
});
|
||||
if (img.length > 0) return img;
|
||||
}
|
||||
|
||||
@ -7,6 +7,7 @@ export const useStore = defineStore("store", () => {
|
||||
const pb = usePB();
|
||||
const { $i18n } = useNuxtApp();
|
||||
const menuStore = useMenuStore()
|
||||
const colorMode = useColorMode()
|
||||
|
||||
const components = ref({} as PBPageItem[]);
|
||||
const getSections = async (id: string) => {
|
||||
@ -60,9 +61,19 @@ export const useStore = defineStore("store", () => {
|
||||
return [];
|
||||
}
|
||||
|
||||
const isDark = computed({
|
||||
get() {
|
||||
return colorMode.value === "dark";
|
||||
},
|
||||
set(_isDark) {
|
||||
colorMode.preference = _isDark ? "dark" : "light";
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
currentPageID,
|
||||
components,
|
||||
isDark,
|
||||
getComponents,
|
||||
getSections,
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user