header/footer/styles
This commit is contained in:
@ -1,3 +0,0 @@
|
|||||||
{
|
|
||||||
"plugins": ["prettier-plugin-tailwindcss"]
|
|
||||||
}
|
|
||||||
@ -16,6 +16,8 @@
|
|||||||
--color-text-light: #1a1a1a;
|
--color-text-light: #1a1a1a;
|
||||||
--color-text-dark: #fffefb;
|
--color-text-dark: #fffefb;
|
||||||
|
|
||||||
|
--color-bg-block: #E8E7E0;
|
||||||
|
|
||||||
/* button */
|
/* button */
|
||||||
--color-button: #9a7f62;
|
--color-button: #9a7f62;
|
||||||
--color-button-hover: #b7946d;
|
--color-button-hover: #b7946d;
|
||||||
@ -30,11 +32,10 @@
|
|||||||
.h4-uppercase {
|
.h4-uppercase {
|
||||||
@apply font-inter text-base leading-[150%] font-bold uppercase sm:text-[20px] md:text-[24px];
|
@apply font-inter text-base leading-[150%] font-bold uppercase sm:text-[20px] md:text-[24px];
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.text-inter {
|
.text-inter {
|
||||||
font-family: var(--font-inter);
|
@apply font-inter text-sm sm:text-lg;
|
||||||
line-height: 150%;
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.main {
|
.main {
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
<div class="group flex cursor-pointer items-center justify-start gap-2">
|
<div class="group flex cursor-pointer items-center justify-start gap-2">
|
||||||
<button
|
<button
|
||||||
:class="[
|
:class="[
|
||||||
'text-inter h-[40px] cursor-pointer rounded-[10px] px-[22px] text-lg transition-all sm:h-[50px] md:h-[65px] md:rounded-[15px] md:px-[42px]',
|
'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'
|
type === 'fill'
|
||||||
? 'bg-button text-text-dark group-hover:bg-button-hover'
|
? '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 group-hover:border-button-hover group-hover:text-button-hover border',
|
||||||
|
|||||||
32
components/FooterBlock.vue
Normal file
32
components/FooterBlock.vue
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
<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
|
||||||
|
v-for="(item, index) in menuStore.footerItems?.items[0].data"
|
||||||
|
:key="index"
|
||||||
|
class="flex flex-col gap-7 max-w-[280px]"
|
||||||
|
>
|
||||||
|
<h3 class="h4-uppercase">{{ 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"
|
||||||
|
:key="indexEl"
|
||||||
|
>
|
||||||
|
{{ el }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<img
|
||||||
|
class="w-[70%] sm:w-[50%] xl:w-[30%]"
|
||||||
|
src="/public/logo-footer.svg"
|
||||||
|
alt="logo-footer"
|
||||||
|
/>
|
||||||
|
</UiContainer>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
const menuStore = useMenuStore();
|
||||||
|
</script>
|
||||||
@ -1,67 +1,218 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="border-border border-b">
|
<div>
|
||||||
<UContainer
|
<!-- xl -->
|
||||||
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="w-full border-border border-b">
|
||||||
>
|
<UiContainer>
|
||||||
<div class="hidden h-[120px] w-full items-center justify-between xl:flex">
|
<div
|
||||||
<ul class="flex items-center gap-20 whitespace-nowrap">
|
class="hidden h-[120px] w-full items-center justify-between xl:flex"
|
||||||
<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
|
<ul class="flex items-center gap-20 whitespace-nowrap">
|
||||||
</button>
|
<li
|
||||||
</div>
|
v-for="(item, index) in menuStore.menu"
|
||||||
<div
|
@click="menuStore.navigateToItem(item)"
|
||||||
class="hidden h-[116px] w-full items-center justify-between md:flex xl:hidden"
|
:key="index"
|
||||||
>
|
class="hover:text-text-light/80 dark:hover:text-text-dark/70 cursor-pointer text-lg transition-all"
|
||||||
<img src="/logo.png" alt="Frame" />
|
>
|
||||||
<div class="flex items-center gap-6">
|
0{{ index + 1 }} <br />
|
||||||
<i class="uil uil-user text-[35px] cursor-pointer"></i>
|
{{ item.name }}
|
||||||
<i class="uil uil-shopping-cart text-[35px] cursor-pointer"></i>
|
</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 />
|
<ThemeSwitcher />
|
||||||
<i class="uil uil-apps text-[35px] cursor-pointer"></i>
|
<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>
|
||||||
|
</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>
|
</div>
|
||||||
<div
|
<UCollapsible
|
||||||
class="hidden h-[84px] w-full items-center justify-between sm:flex md:hidden"
|
:ui="{ content: 'w-full' }"
|
||||||
|
v-model:open="open"
|
||||||
|
class="w-full"
|
||||||
>
|
>
|
||||||
<img src="/logo.png" alt="Frame" />
|
<template #content>
|
||||||
<div class="flex items-center gap-6">
|
<div class="w-full border-border border-b pt-6 pb-8">
|
||||||
<i class="uil uil-user text-[35px] cursor-pointer"></i>
|
<UiContainer class="flex flex-col gap-[30px]">
|
||||||
<i class="uil uil-shopping-cart text-[35px] cursor-pointer"></i>
|
<div
|
||||||
<i class="uil uil-apps text-[35px] cursor-pointer"></i>
|
v-for="(item, index) in menuStore.menu"
|
||||||
</div>
|
@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>
|
</div>
|
||||||
<div class="flex h-[84px] w-full items-center justify-between sm:hidden">
|
<UCollapsible
|
||||||
<img src="/logo.png" alt="Frame" />
|
:ui="{ content: 'w-full' }"
|
||||||
<div class="flex items-center gap-6">
|
v-model:open="open"
|
||||||
<i class="uil uil-user text-[35px] cursor-pointer"></i>
|
class="w-full"
|
||||||
<i class="uil uil-apps text-[35px] cursor-pointer"></i>
|
>
|
||||||
</div>
|
<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>
|
</div>
|
||||||
</UContainer>
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import LangSwitcher from './langSwitcher.vue';
|
import LangSwitcher from "./LangSwitcher.vue";
|
||||||
|
|
||||||
const menuStore = useMenuStore()
|
const menuStore = useMenuStore();
|
||||||
|
const open = ref(false);
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
52
components/LangSwitcher.vue
Normal file
52
components/LangSwitcher.vue
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
<template>
|
||||||
|
<USelect
|
||||||
|
v-model="selectedLocaleCode"
|
||||||
|
:items="locales"
|
||||||
|
value-key="code"
|
||||||
|
:searchable="false"
|
||||||
|
:ui="{
|
||||||
|
base: 'bg-inherit ring-0 cursor-pointer w-auto focus:ring-0 outline-none focus-visible:ring-0',
|
||||||
|
trailing: 'hidden',
|
||||||
|
viewport: 'ring-0',
|
||||||
|
content: 'bg-bg-light dark:bg-bg-dark w-auto ring-0 border border-button',
|
||||||
|
leading:
|
||||||
|
'left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 p-0',
|
||||||
|
group: 'px-[5px] py-[10px]',
|
||||||
|
item: 'hover:bg-bg-block dark:hover:bg-button rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50',
|
||||||
|
}"
|
||||||
|
@update:model-value="setLocale"
|
||||||
|
>
|
||||||
|
<template #leading="{ modelValue }">
|
||||||
|
<div class="flex items-center gap-2 text-xl font-medium">
|
||||||
|
{{ locales.find((item) => item.code === modelValue)?.name }}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #item="{ item }">
|
||||||
|
<div class="flex items-center gap-2 cursor-pointer w-full">
|
||||||
|
<UIcon
|
||||||
|
:name="item.icon as string"
|
||||||
|
class="size-5 rounded-full border border-button/40"
|
||||||
|
/>
|
||||||
|
<p class="text-xl font-medium">{{ item.name }}</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</USelect>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { useI18n } from "#imports";
|
||||||
|
|
||||||
|
const { locale, locales, setLocale } = useI18n();
|
||||||
|
|
||||||
|
const selectedLocaleCode = ref(locale.value);
|
||||||
|
const selectedIcon = ref(
|
||||||
|
locales.value.find((item) => item.code === locale.value)?.icon
|
||||||
|
);
|
||||||
|
|
||||||
|
watch(selectedLocaleCode, async (newCode) => {
|
||||||
|
if (newCode !== locale.value) {
|
||||||
|
await setLocale(newCode);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@ -1,41 +0,0 @@
|
|||||||
<template>
|
|
||||||
<USelectMenu
|
|
||||||
v-model="selectedLocale"
|
|
||||||
:items="locales"
|
|
||||||
label-key="name"
|
|
||||||
:search-input="{ icon: 'i-lucide-search' }"
|
|
||||||
placeholder="Select country"
|
|
||||||
class="w-48 bg-block-light dark:bg-block-dark border-border-light dark:border-border-dark"
|
|
||||||
@update:model-value="setLocaleManually($event)"
|
|
||||||
>
|
|
||||||
<template #leading="{ modelValue, ui }">
|
|
||||||
<span v-if="modelValue" class="size-5 text-center">
|
|
||||||
<UIcon
|
|
||||||
:name="(modelValue?.icon as string) || 'i-lucide-earth'"
|
|
||||||
:class="[ui.leadingIcon(), 'border border-border-light dark:border-border-dark rounded-full']"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
<template #item-leading="{ item }">
|
|
||||||
<span class="size-5 text-center">
|
|
||||||
<!-- {{ item.name }} -->
|
|
||||||
<UIcon :name="item.icon as string" class="size-5 text-accent" />
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</USelectMenu>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import type { LocaleObject } from "@nuxtjs/i18n";
|
|
||||||
const { setLocale, locales, locale } = useI18n();
|
|
||||||
|
|
||||||
const selectedLocale = ref(
|
|
||||||
locales.value.find((item) => item.code === locale.value)
|
|
||||||
);
|
|
||||||
|
|
||||||
function setLocaleManually(newLocale: LocaleObject) {
|
|
||||||
locale.value = newLocale.code;
|
|
||||||
locales.value.find((item) => item.code === locale.value);
|
|
||||||
setLocale(newLocale.code);
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -3,7 +3,7 @@
|
|||||||
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]"
|
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="">
|
||||||
<div class="mt-[75px] space-y-[30px] sm:space-y-[53px]">
|
<div class="py-[75px] space-y-[30px] sm:space-y-[53px]">
|
||||||
<h1 class="h1">
|
<h1 class="h1">
|
||||||
{{ component.section_lang_data.title }}
|
{{ component.section_lang_data.title }}
|
||||||
</h1>
|
</h1>
|
||||||
|
|||||||
8
components/ui/Container.vue
Normal file
8
components/ui/Container.vue
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
<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]">
|
||||||
|
<slot />
|
||||||
|
</UContainer>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup></script>
|
||||||
@ -6,7 +6,7 @@
|
|||||||
<div class="flex-1">
|
<div class="flex-1">
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
<!-- <footer-block /> -->
|
<FooterBlock />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -14,4 +14,4 @@
|
|||||||
useHead({
|
useHead({
|
||||||
link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.png" }],
|
link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.png" }],
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -20,9 +20,9 @@ export default defineNuxtConfig({
|
|||||||
|
|
||||||
i18n: {
|
i18n: {
|
||||||
locales: [
|
locales: [
|
||||||
{ code: "pl", name: "Polski", icon: "emojione:flag-for-poland" },
|
{ code: "pl", name: "Pl", icon: "circle-flags:pl" },
|
||||||
{ code: "en", name: "English", icon: "emojione:flag-for-united-kingdom" },
|
{ code: "en", name: "EN", icon: "circle-flags:gb" },
|
||||||
{ code: "cs", name: "Čeština", icon: "emojione:flag-for-chechia" },
|
{ code: "cs", name: "CZR", icon: "circle-flags:cz" }
|
||||||
],
|
],
|
||||||
lazy: true,
|
lazy: true,
|
||||||
defaultLocale: "en",
|
defaultLocale: "en",
|
||||||
|
|||||||
@ -17,7 +17,7 @@
|
|||||||
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
|
|
||||||
route.params.id = menuStore.defaultMenu.id
|
route.params.id = menuStore.defaultMenu.id_page
|
||||||
route.params.slug = menuStore.defaultMenu.link_rewrite
|
route.params.slug = menuStore.defaultMenu.link_rewrite
|
||||||
|
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
|
|||||||
10
public/logo-footer.svg
Normal file
10
public/logo-footer.svg
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
<svg width="596" height="94" viewBox="0 0 596 94" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M12.2667 1.5L24.4266 27.124L35.7334 1.5H48L29.8668 40.5766V72.5H18.4533V40.3615L0 1.5H12.2667Z" fill="#FFFEFB"/>
|
||||||
|
<path d="M142 37.0003C142 47.0421 137.547 56.9797 130.02 64.0624C123.129 70.6173 114.329 74 104.258 74C83.9024 74 68 57.8248 68 36.7896C68 27.6972 71.8164 18.2898 78.4958 11.0999C84.9627 4.12274 94.6103 0 104.682 0C125.143 0 142 16.7038 142 37.0003ZM80.298 37.0003C80.298 45.3519 83.0546 51.8002 88.6732 56.6625C93.232 60.6797 99.1691 62.9001 104.894 62.9001C118.888 62.9001 129.596 51.6937 129.596 37.211C129.596 22.7284 118.782 11.0999 105 11.0999C91.2178 11.0999 80.298 22.3047 80.298 37.0003Z" fill="#FFFEFB"/>
|
||||||
|
<path d="M173.212 1V47.9736C173.212 52.853 173.529 55.0802 174.481 56.8824C176.173 60.38 179.558 62.289 183.788 62.289C188.442 62.289 191.933 60.0618 193.519 56.0324C194.577 53.3825 194.683 52.2166 194.683 45.3237V1H206V46.7009C206 53.7007 205.471 57.4119 203.885 60.6981C200.394 68.3342 192.884 73 184.106 73C175.327 73 167.5 68.0161 164.01 60.1686C162.423 56.7756 162 53.5938 162 46.4896V1H173.212Z" fill="#FFFEFB"/>
|
||||||
|
<path d="M242.113 1.5C248.88 1.5 253.607 2.45412 257.367 4.57337C263.918 8.17616 267.679 14.6413 267.679 22.2703C267.679 32.2317 261.556 40.0719 251.243 43.6763L268 66.2474L258.656 72.5L237.601 44.0987V71.8641H226V1.5H242.113ZM242.113 33.8216C245.98 33.8216 247.162 33.7148 248.773 33.0789C252.854 31.4891 255.325 27.3555 255.325 22.1635C255.325 15.6997 251.028 11.8852 243.724 11.8852H237.708V33.7148H242.113V33.8216Z" fill="#FFFEFB"/>
|
||||||
|
<path d="M378 32.5663V64.5535C370.792 70.149 362.736 73 354.043 73C333.9 73 318 57.0573 318 36.7884C318 16.5196 333.69 1 353.724 1C360.192 1 367.081 2.79497 372.277 5.7509L370.05 16.8363C365.492 13.9854 358.282 11.9795 352.559 11.9795C340.155 11.9795 330.401 23.4863 330.401 37.6324C330.401 51.7785 340.578 62.7592 353.724 62.7592C359.024 62.7592 364.324 61.3858 366.87 59.2747V42.8071H349.483L351.71 32.5663H378Z" fill="#9A7F62"/>
|
||||||
|
<path d="M472 37.0003C472 47.0421 467.546 56.9797 460.019 64.0624C453.129 70.6173 444.33 74 434.257 74C413.904 74 398 57.8248 398 36.7896C398 27.6972 401.818 18.2898 408.497 11.0999C414.963 4.12274 424.611 0 434.684 0C455.144 0 472 16.7038 472 37.0003ZM410.298 37.0003C410.298 45.3519 413.055 51.8002 418.674 56.6625C423.232 60.6797 429.171 62.9001 434.895 62.9001C448.888 62.9001 459.595 51.6937 459.595 37.211C459.595 22.7284 448.782 11.0999 435.001 11.0999C421.218 11.0999 410.298 22.3047 410.298 37.0003Z" fill="#9A7F62"/>
|
||||||
|
<path d="M503.571 1.5V62.0358H524V72.5H492V1.60709H503.571V1.5Z" fill="#9A7F62"/>
|
||||||
|
<path d="M559.868 1.5C566.085 1.5 570.695 2.35658 575.304 4.49821C587.744 10.1738 596 23.3463 596 37.5879C596 51.8318 587.206 65.4308 573.805 70.1428C568.98 71.8574 564.799 72.5 559.01 72.5H544V1.60673H559.868V1.5ZM557.937 61.7907C561.796 61.7907 564.371 61.4693 567.051 60.6132C577.236 57.5078 583.99 48.0838 583.99 37.2666C583.99 25.5956 576.27 15.7423 565.227 12.9583C562.654 12.3158 560.834 12.1017 557.078 12.1017H555.472L555.364 61.7907H557.937Z" fill="#9A7F62"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.0 KiB |
@ -6,16 +6,16 @@ export const useStore = defineStore("store", () => {
|
|||||||
const currentPageID = ref("");
|
const currentPageID = ref("");
|
||||||
const pb = usePB();
|
const pb = usePB();
|
||||||
const { $i18n } = useNuxtApp();
|
const { $i18n } = useNuxtApp();
|
||||||
|
const menuStore = useMenuStore()
|
||||||
|
|
||||||
const components = ref({} as PBPageItem[]);
|
const components = ref({} as PBPageItem[]);
|
||||||
const getSections = async (id: string) => {
|
const getSections = async (id: string) => {
|
||||||
pb.cancelRequest("menu_view");
|
pb.cancelRequest("menu_view");
|
||||||
components.value = (
|
components.value = (
|
||||||
await pb.collection<PBPageItem>("page_view").getList(1, 50, {
|
await pb.collection<PBPageItem>("page_view").getList(1, 50, {
|
||||||
filter: `page_id="${id}"&&(section_lang_id_lang="${
|
filter: `id="${id}"&&(section_lang_id_lang="${$i18n.locale.value
|
||||||
$i18n.locale.value
|
}"||section_is_no_lang=${true})`,
|
||||||
}"||section_is_no_lang=${true})`,
|
sort: "page_section_id_position",
|
||||||
sort: "page_section_id_position",
|
|
||||||
})
|
})
|
||||||
).items as PBPageItem[];
|
).items as PBPageItem[];
|
||||||
};
|
};
|
||||||
|
|||||||
186
types/index.ts
186
types/index.ts
@ -1,93 +1,97 @@
|
|||||||
export interface ListResponse {
|
export interface ListResponse {
|
||||||
page: number;
|
page: number;
|
||||||
perPage: number;
|
perPage: number;
|
||||||
totalItems: number;
|
totalItems: number;
|
||||||
totalPages: number;
|
totalPages: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface PBMenuItem {
|
|
||||||
page: number;
|
|
||||||
page_name: string;
|
|
||||||
perPage: number;
|
|
||||||
totalItems: number;
|
|
||||||
totalPages: number;
|
|
||||||
is_root: boolean;
|
|
||||||
is_default: boolean;
|
|
||||||
id_page: string;
|
|
||||||
id: string;
|
|
||||||
id_parent: string;
|
|
||||||
url: string;
|
|
||||||
name: string;
|
|
||||||
link_rewrite: string;
|
|
||||||
active: boolean;
|
|
||||||
collectionId: string;
|
|
||||||
collectionName: string;
|
|
||||||
created: string;
|
|
||||||
link_title: string;
|
|
||||||
meta_description: string;
|
|
||||||
meta_title: string;
|
|
||||||
position_id: number;
|
|
||||||
updated: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface PBFooterItem {
|
|
||||||
id: string;
|
|
||||||
id_lang: string;
|
|
||||||
address: string;
|
|
||||||
phone: string;
|
|
||||||
email: string;
|
|
||||||
contact_info: Array<{
|
|
||||||
field: keyof PBFooterItem;
|
|
||||||
title: string;
|
|
||||||
}>;
|
|
||||||
company_info: Array<{
|
|
||||||
data: string;
|
|
||||||
title: string;
|
|
||||||
}>;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface PBPageItem {
|
|
||||||
collectionId: string;
|
|
||||||
collectionName: string;
|
|
||||||
component_name: string;
|
|
||||||
id: string;
|
|
||||||
image_collection: string;
|
|
||||||
page_created: string;
|
|
||||||
page_id: string;
|
|
||||||
page_name: string;
|
|
||||||
page_section_id_position: number;
|
|
||||||
page_updated: string;
|
|
||||||
section_id: string;
|
|
||||||
section_img: string[];
|
|
||||||
section_lang_created: string;
|
|
||||||
section_lang_data: SectionLangData;
|
|
||||||
section_lang_id_lang: string;
|
|
||||||
section_name: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
import type { DefineComponent } from "vue";
|
|
||||||
export interface SectionLangData {
|
|
||||||
title: string;
|
|
||||||
description: string;
|
|
||||||
button: string;
|
|
||||||
button_call: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface UIMenuItem extends PBMenuItem {
|
export interface PBMenuItem {
|
||||||
children?: UIMenuItem[];
|
page: number;
|
||||||
}
|
page_name: string;
|
||||||
|
perPage: number;
|
||||||
export interface MenuListResponse extends ListResponse {
|
totalItems: number;
|
||||||
items: PBMenuItem[];
|
totalPages: number;
|
||||||
}
|
is_root: boolean;
|
||||||
|
is_default: boolean;
|
||||||
export interface FooterListResponse extends ListResponse {
|
id_page: string;
|
||||||
items: PBFooterItem[];
|
id: string;
|
||||||
}
|
id_parent: string;
|
||||||
|
url: string;
|
||||||
export type componentsListType = {
|
name: string;
|
||||||
name: string;
|
link_rewrite: string;
|
||||||
component: PBPageItem;
|
active: boolean;
|
||||||
componentInstance: DefineComponent;
|
collectionId: string;
|
||||||
data: SectionLangData;
|
collectionName: string;
|
||||||
};
|
created: string;
|
||||||
|
link_title: string;
|
||||||
|
meta_description: string;
|
||||||
|
meta_title: string;
|
||||||
|
position_id: number;
|
||||||
|
updated: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface PBFooterItem {
|
||||||
|
id: string;
|
||||||
|
id_lang: string;
|
||||||
|
address: string;
|
||||||
|
phone: string;
|
||||||
|
email: string;
|
||||||
|
contact_info: Array<{
|
||||||
|
field: keyof PBFooterItem;
|
||||||
|
title: string;
|
||||||
|
}>;
|
||||||
|
data: Array<{
|
||||||
|
title: string;
|
||||||
|
items: Array<string>
|
||||||
|
}>;
|
||||||
|
company_info: Array<{
|
||||||
|
data: string;
|
||||||
|
title: string;
|
||||||
|
}>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface PBPageItem {
|
||||||
|
collectionId: string;
|
||||||
|
collectionName: string;
|
||||||
|
component_name: string;
|
||||||
|
id: string;
|
||||||
|
image_collection: string;
|
||||||
|
page_created: string;
|
||||||
|
page_id: string;
|
||||||
|
page_name: string;
|
||||||
|
page_section_id_position: number;
|
||||||
|
page_updated: string;
|
||||||
|
section_id: string;
|
||||||
|
section_img: string[];
|
||||||
|
section_lang_created: string;
|
||||||
|
section_lang_data: SectionLangData;
|
||||||
|
section_lang_id_lang: string;
|
||||||
|
section_name: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
import type { DefineComponent } from "vue";
|
||||||
|
export interface SectionLangData {
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
button: string;
|
||||||
|
button_call: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UIMenuItem extends PBMenuItem {
|
||||||
|
children?: UIMenuItem[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface MenuListResponse extends ListResponse {
|
||||||
|
items: PBMenuItem[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface FooterListResponse extends ListResponse {
|
||||||
|
items: PBFooterItem[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export type componentsListType = {
|
||||||
|
name: string;
|
||||||
|
component: PBPageItem;
|
||||||
|
componentInstance: DefineComponent;
|
||||||
|
data: SectionLangData;
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user