yakovenko_arina/your-gold
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

add paegs/icons/routing/stores

Browse Source
This commit is contained in:
Arina Yakovenko
2025-05-29 15:25:24 +02:00
parent 6eeff429e7
commit 837eea76a5
23 changed files with 2581 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/main.css
View File

@ -1,6 +1,6 @@
@import "@nuxt/ui";
@import "tailwindcss";
/* @import '@iconscout/unicons/css/line.css'; */
@import '@iconscout/unicons/css/line.css';
@theme {
/* fonts */

170
components/HeaderBlock.vue
View File

@ -6,7 +6,8 @@
<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 menu.items"
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"
>
@ -14,21 +15,14 @@
{{ item.name }}
</li>
</ul>
<img src="/logo.png" alt="Frame" />
<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]">
<img
class="h-8 w-8 cursor-pointer"
src="/icons/Account.svg"
alt="Account"
/>
<i class="uil uil-user h-8 w-8 text-text-light cursor-pointer"></i>
<img
class="h-8 w-8 cursor-pointer"
src="/icons/Cart.svg"
alt="Cart"
/>
<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"
>
@ -40,22 +34,10 @@
>
<img src="/logo.png" alt="Frame" />
<div class="flex items-center gap-6">
<img
class="h-8 w-8 cursor-pointer"
src="/icons/Account.svg"
alt="Account"
/>
<img
class="h-8 w-8 cursor-pointer"
src="/icons/Cart.svg"
alt="Cart"
/>
<i class="uil uil-user text-[35px] cursor-pointer"></i>
<i class="uil uil-shopping-cart text-[35px] cursor-pointer"></i>
<ThemeSwitcher />
<img
class="h-8 w-8 cursor-pointer"
src="/icons/Menu.svg"
alt="Cart"
/>
<i class="uil uil-apps text-[35px] cursor-pointer"></i>
</div>
</div>
<div
@ -63,139 +45,23 @@
>
<img src="/logo.png" alt="Frame" />
<div class="flex items-center gap-6">
<img
class="h-8 w-8 cursor-pointer"
src="/icons/Account.svg"
alt="Account"
/>
<img
class="h-8 w-8 cursor-pointer"
src="/icons/Cart.svg"
alt="Cart"
/>
<img
class="h-8 w-8 cursor-pointer"
src="/icons/Menu.svg"
alt="Cart"
/>
<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">
<!-- <img
class="h-8 w-8 cursor-pointer"
src="/icons/Account.svg"
alt="Account"
/> -->
<i class="uil uil-user h-8 w-8 cursor-pointer"></i>
<img
class="h-8 w-8 cursor-pointer"
src="/icons/Menu.svg"
alt="Cart"
/>
<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>
const menu = {
items: [
{
active: true,
created: "2025-04-29 14:21:16.980Z",
id: "l10y982y139ep7u",
id_lang: "en",
id_page: "",
id_parent: "",
is_default: false,
is_root: true,
link_rewrite: "",
link_title: "",
meta_description: "",
meta_title: "",
name: "Investice",
page_name: "",
position_id: 0,
updated: "2025-05-09 08:34:06.650Z",
},
{
active: true,
created: "2025-04-29 14:21:16.980Z",
id: "l10y982y139ep7u",
id_lang: "en",
id_page: "",
id_parent: "",
is_default: false,
is_root: true,
link_rewrite: "",
link_title: "",
meta_description: "",
meta_title: "",
name: "O zlotě",
page_name: "",
position_id: 0,
updated: "2025-05-09 08:34:06.650Z",
},
{
active: true,
created: "2025-04-29 14:21:16.980Z",
id: "l10y982y139ep7u",
id_lang: "en",
id_page: "",
id_parent: "",
is_default: false,
is_root: true,
link_rewrite: "",
link_title: "",
meta_description: "",
meta_title: "",
name: "Podnikání",
page_name: "",
position_id: 0,
updated: "2025-05-09 08:34:06.650Z",
},
{
active: true,
created: "2025-04-29 14:21:16.980Z",
id: "l10y982y139ep7u",
id_lang: "en",
id_page: "",
id_parent: "",
is_default: false,
is_root: true,
link_rewrite: "",
link_title: "",
meta_description: "",
meta_title: "",
name: "O Nás",
page_name: "",
position_id: 0,
updated: "2025-05-09 08:34:06.650Z",
},
{
active: true,
created: "2025-04-29 14:21:16.980Z",
id: "l10y982y139ep7u",
id_lang: "en",
id_page: "",
id_parent: "",
is_default: false,
is_root: true,
link_rewrite: "",
link_title: "",
meta_description: "",
meta_title: "",
name: "Kontakt",
page_name: "",
position_id: 0,
updated: "2025-05-09 08:34:06.650Z",
},
],
page: 1,
perPage: 50,
totalItems: 14,
totalPages: 1,
};
import LangSwitcher from './langSwitcher.vue';
const menuStore = useMenuStore()
</script>

7
components/ThemeSwitcher.vue
View File

@ -14,13 +14,8 @@ const isDark = computed({
<template>
<ClientOnly v-if="!colorMode?.forced">
<div class="flex h-8 w-8 cursor-pointer items-center justify-center">
<img
class="h-8 w-8"
:src="`/icons/${isDark ? 'Moon' : 'Light'}.svg`"
@click="isDark = !isDark"
/>
<i @click="isDark = !isDark" :class="['uil text-[35px] cursor-pointer', isDark ? 'uil-moon' : 'uil-sun']"></i>
</div>
<template #fallback>
<div class="size-20" />
</template>

41
components/langSwitcher.vue Normal file
View File

@ -0,0 +1,41 @@
<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>

21
components/sections/main-page/MainHero.vue → components/section/main-page/MainHero.vue
View File

@ -5,7 +5,7 @@
<div class="">
<div class="mt-[75px] space-y-[30px] sm:space-y-[53px]">
<h1 class="h1">
{{ data.title }}
{{ 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"
@ -23,10 +23,10 @@
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%]">
{{ data.title_second }}
{{ component.section_lang_data.title_second }}
</h3>
<div class="flex w-full items-start justify-center sm:justify-end">
<ButtonArrow type="fill">Začít investovat</ButtonArrow>
<ButtonArrow type="fill">{{ component.section_lang_data.button }}</ButtonArrow>
</div>
</div>
</div>
@ -35,10 +35,15 @@
</template>
<script lang="ts" setup>
const data = {
title: "INVESTUJTE CHYTŘE. CHRAŇTE SVÉ PENÍZE ZLATEM",
button: "Začít investovat",
title_second:
"Spoření i jednorázová investice do zlata jednoduše a bezpečně s YourGold",
const props = defineProps<{ component: Component }>();
type Component = {
image_collection: string;
section_id: string;
section_img: string;
section_lang_data: {
title: string;
title_second: string;
button: string;
};
};
</script>

3
i18n/locales/cs.json Normal file
View File

@ -0,0 +1,3 @@
{
"welcome": "Welcome to Nuxt 3"
}

9
layouts/default.vue
View File

@ -4,8 +4,6 @@
>
<HeaderBlock />
<div class="flex-1">
<MainHero />
{{ $t("button_contact") }}
<slot />
</div>
<!-- <footer-block /> -->
@ -13,12 +11,7 @@
</template>
<script setup lang="ts">
import MainHero from "~/components/sections/main-page/MainHero.vue";
useHead({
link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.png" }],
});
</script>
<style>
</style>
</script>

24
nuxt.config.ts
View File

@ -6,17 +6,17 @@ export default defineNuxtConfig({
// app: {
// pageTransition: { name: "page", mode: "out-in" },
// },
// nitro: {
// routeRules: {
// "/api/**": {
// proxy: {
// to: `${process.env.POCKETBASE_URL || "http://127.0.0.1:8090"}/api/**`,
// },
// },
// },
// },
nitro: {
routeRules: {
"/api/**": {
proxy: {
to: `${process.env.POCKETBASE_URL || "http://127.0.0.1:8090"}/api/**`,
},
},
},
},
modules: ["@pinia/nuxt", "@nuxt/eslint", "@nuxt/ui", "@nuxtjs/i18n"],
modules: ["@pinia/nuxt", "@nuxt/eslint", "@nuxt/ui", "@nuxtjs/i18n", "@pinia/nuxt"],
i18n: {
locales: [
@ -47,9 +47,9 @@ export default defineNuxtConfig({
typescript: {
tsConfig: {
compilerOptions: {
typeRoots: ["./ts", "./node_modules/@types"],
typeRoots: ["./types", "./node_modules/@types"],
},
include: ["./ts"],
include: ["./types"],
},
},
ui: {},

1
package.json
View File

@ -10,6 +10,7 @@
"postinstall": "nuxt prepare"
},
"dependencies": {
"@iconscout/unicons": "^4.2.0",
"@nuxt/eslint": "^1.4.1",
"@nuxt/ui": "^3.1.3",
"@nuxtjs/i18n": "^9.5.4",

24
pages/[id]/[slug].vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<div>
<KeepAlive>
<component :is="component.componentInstance" v-for="component in componentsList" :key="component.name" :component="component.component" />
</KeepAlive>
</div>
</template>
<script setup>
import { useStore } from "@/stores/store";
const route = useRoute();
const store = useStore();
const menuStore = useMenuStore();
await store.getSections(route.params.id);
onMounted(() => {
menuStore.openMenu = false;
});
useHead(menuStore.headMeta);
const componentsList = await store.getComponents(route.params.id);
</script>

32
pages/index.vue Normal file
View File

@ -0,0 +1,32 @@
<template>
<div>
<KeepAlive>
<component
:is="component.componentInstance"
v-for="component in componentsList"
:key="component.name"
:component="component.component"
/>
</KeepAlive>
</div>
</template>
<script setup>
import { useStore } from "@/stores/store";
const menuStore = useMenuStore();
const route = useRoute();
route.params.id = menuStore.defaultMenu.id
route.params.slug = menuStore.defaultMenu.link_rewrite
const store = useStore();
await store.getSections(route.params.id);
onMounted(()=> {
menuStore.openMenu = false
})
useHead(menuStore.headMeta);
const componentsList = await store.getComponents(route.params.id);
</script>

7
plugins/initLoad.ts Normal file
View File

@ -0,0 +1,7 @@
import { defineNuxtPlugin } from "#app";
export default defineNuxtPlugin(async () => {
const menuStore = useMenuStore();
await menuStore.loadMenu();
await menuStore.loadFooter();
});

2115
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

10
public/icons/Account.svg
View File

@ -1,10 +0,0 @@
<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_655_26407)">
<path d="M21.2558 16.5994C22.7829 15.4046 23.8976 13.766 24.4447 11.9118C24.9918 10.0575 24.9442 8.07977 24.3085 6.25369C23.6727 4.4276 22.4805 2.84399 20.8976 1.72315C19.3148 0.602316 17.42 0 15.4769 0C13.5338 0 11.639 0.602316 10.0562 1.72315C8.47329 2.84399 7.28106 4.4276 6.64533 6.25369C6.0096 8.07977 5.96199 10.0575 6.50911 11.9118C7.05624 13.766 8.17089 15.4046 9.698 16.5994C7.08126 17.6421 4.79807 19.3713 3.09182 21.6029C1.38558 23.8345 0.320246 26.4848 0.00939552 29.2711C-0.0131054 29.4746 0.00490408 29.6804 0.0623953 29.8769C0.119887 30.0734 0.215734 30.2568 0.344465 30.4164C0.604449 30.7389 0.982592 30.9455 1.39571 30.9906C1.80882 31.0358 2.22307 30.916 2.54732 30.6574C2.87157 30.3989 3.07926 30.0228 3.1247 29.6119C3.46674 26.5837 4.91863 23.787 7.20298 21.7561C9.48733 19.7252 12.444 18.6025 15.5081 18.6025C18.5721 18.6025 21.5288 19.7252 23.8131 21.7561C26.0975 23.787 27.5494 26.5837 27.8914 29.6119C27.9337 29.9926 28.1164 30.3441 28.404 30.5987C28.6917 30.8534 29.064 30.993 29.449 30.9906H29.6204C30.0287 30.9439 30.4019 30.7386 30.6587 30.4194C30.9154 30.1002 31.0349 29.6931 30.9911 29.2866C30.6788 26.4924 29.6077 23.8353 27.8927 21.6003C26.1777 19.3653 23.8834 17.6365 21.2558 16.5994ZM15.4769 15.4996C14.2446 15.4996 13.04 15.1362 12.0154 14.4553C10.9907 13.7744 10.1921 12.8067 9.72056 11.6744C9.24898 10.5422 9.12559 9.29628 9.366 8.09429C9.60641 6.8923 10.1998 5.7882 11.0712 4.92162C11.9426 4.05503 13.0527 3.46488 14.2614 3.22579C15.47 2.9867 16.7228 3.10941 17.8612 3.5784C18.9997 4.0474 19.9728 4.84161 20.6575 5.8606C21.3421 6.8796 21.7075 8.07762 21.7075 9.30315C21.7075 10.9465 21.0511 12.5226 19.8826 13.6847C18.7141 14.8467 17.1294 15.4996 15.4769 15.4996Z" fill="#1A1A1A"/>
</g>
<defs>
<clipPath id="clip0_655_26407">
<rect width="31" height="31" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.9 KiB

3
public/icons/ArrowCorner.svg
View File

@ -1,3 +0,0 @@
<svg width="26" height="26" viewBox="0 0 26 26" fill="currentColor" 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="#FFFEFB"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 562 B

10
public/icons/Cart.svg
View File

@ -1,10 +0,0 @@
<svg width="32" height="31" viewBox="0 0 32 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_655_26413)">
<path d="M6.06199 28.7857C6.06199 29.0765 6.11376 29.3644 6.21433 29.6331C6.31491 29.9017 6.46232 30.1458 6.64816 30.3514C6.834 30.5571 7.05463 30.7202 7.29744 30.8314C7.54025 30.9427 7.80049 31 8.06331 31C8.59409 31 9.10313 30.7667 9.47845 30.3514C9.66429 30.1458 9.81171 29.9017 9.91228 29.6331C10.0129 29.3644 10.0646 29.0765 10.0646 28.7857C10.0646 28.1984 9.85377 27.6352 9.47845 27.22C9.10313 26.8047 8.59409 26.5714 8.06331 26.5714C7.53253 26.5714 7.02348 26.8047 6.64816 27.22C6.27284 27.6352 6.06199 28.1984 6.06199 28.7857ZM24.0738 28.7857C24.0738 29.0765 24.1256 29.3644 24.2262 29.6331C24.3268 29.9017 24.4742 30.1458 24.66 30.3514C24.8459 30.5571 25.0665 30.7202 25.3093 30.8314C25.5521 30.9427 25.8123 31 26.0752 31C26.6059 31 27.115 30.7667 27.4903 30.3514C27.6762 30.1458 27.8236 29.9017 27.9241 29.6331C28.0247 29.3644 28.0765 29.0765 28.0765 28.7857C28.0765 28.1984 27.8656 27.6352 27.4903 27.22C27.115 26.8047 26.6059 26.5714 26.0752 26.5714C25.5444 26.5714 25.0353 26.8047 24.66 27.22C24.2847 27.6352 24.0738 28.1984 24.0738 28.7857ZM0 1.10714C0 1.40078 0.105426 1.68238 0.293086 1.89001C0.480746 2.09764 0.735268 2.21429 1.00066 2.21429H3.08003L4.32285 8.09543L6.06199 17.7143C6.06199 17.794 6.09601 17.8626 6.10402 17.9401L5.08535 23.0109C5.05242 23.1727 5.05287 23.3406 5.08667 23.5022C5.12048 23.6638 5.18676 23.8149 5.2806 23.9443C5.37444 24.0736 5.49342 24.1779 5.6287 24.2494C5.76398 24.3209 5.91208 24.3577 6.06199 24.3571H28.7649C29.0303 24.3571 29.2849 24.2405 29.4725 24.0329C29.6602 23.8252 29.7656 23.5436 29.7656 23.25C29.7656 22.9564 29.6602 22.6748 29.4725 22.4671C29.2849 22.2595 29.0303 22.1429 28.7649 22.1429H7.31081L7.76911 19.8621C7.86918 19.8799 7.95924 19.9286 8.06331 19.9286H26.3053C27.41 19.9286 28.0765 19.6872 28.6088 18.2679L31.859 7.23629C32.4233 5.25893 31.1845 4.42857 30.0778 4.42857H6.06199C5.90589 4.42857 5.7698 4.48836 5.6237 4.526L4.84719 0.854714C4.79571 0.611482 4.6714 0.394662 4.49445 0.23949C4.31751 0.0843178 4.09833 -8.45862e-05 3.87255 6.36114e-08H1.00066C0.735268 6.36114e-08 0.480746 0.116645 0.293086 0.324275C0.105426 0.531904 0 0.81351 0 1.10714ZM6.10202 6.64286H29.9277L26.7336 17.4906C26.6956 17.5859 26.6636 17.6545 26.6395 17.701C26.5735 17.7076 26.4694 17.7143 26.3053 17.7143H8.06331V17.4951L8.02528 17.2803L6.10202 6.64286Z" fill="#1A1A1A" stroke="#1A1A1A" stroke-width="0.5"/>
</g>
<defs>
<clipPath id="clip0_655_26413">
<rect width="32" height="31" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.5 KiB

10
public/icons/Light.svg
View File

@ -1,10 +0,0 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_655_26429)">
<path d="M30.4 14.7184H28.832C27.9472 14.7184 27.232 15.2928 27.232 16C27.232 16.7056 27.9472 17.2784 28.832 17.2784H30.4C31.2832 17.2784 32 16.7072 32 16C32 15.2944 31.2816 14.7184 30.4 14.7184ZM16 7.2C14.8434 7.19641 13.6974 7.42158 12.6281 7.86254C11.5589 8.30351 10.5873 8.95158 9.76945 9.76945C8.95158 10.5873 8.30351 11.5589 7.86254 12.6281C7.42158 13.6974 7.19641 14.8434 7.2 16C7.2 20.8816 11.1184 24.8 16 24.8C20.88 24.8 24.8 20.8816 24.8 16C24.8 11.1184 20.8784 7.2 16 7.2ZM16 22.4C12.4624 22.4 9.6 19.5344 9.6 16C9.6 12.4624 12.4624 9.6 16 9.6C17.6974 9.6 19.3253 10.2743 20.5255 11.4745C21.7257 12.6747 22.4 14.3026 22.4 16C22.4 17.6974 21.7257 19.3253 20.5255 20.5255C19.3253 21.7257 17.6974 22.4 16 22.4ZM4.8 16C4.8 15.2944 4.0816 14.7184 3.2 14.7184H1.6C0.7152 14.7184 0 15.2928 0 16C0 16.7056 0.7152 17.2784 1.6 17.2784H3.2C4.0816 17.2784 4.8 16.7056 4.8 16ZM16 4.8C16.7056 4.8 17.2784 4.0848 17.2784 3.2V1.6C17.2784 0.7152 16.7056 0 16 0C15.2928 0 14.7184 0.7152 14.7184 1.6V3.2C14.7184 4.0848 15.2928 4.8 16 4.8ZM16 27.2C15.2928 27.2 14.7184 27.9152 14.7184 28.8V30.4C14.7184 31.2848 15.2928 32 16 32C16.7056 32 17.2784 31.2848 17.2784 30.4V28.8C17.2784 27.9152 16.7056 27.2 16 27.2ZM27.784 6.0256C28.4096 5.4 28.5104 4.488 28.0112 3.9888C27.512 3.4896 26.5984 3.592 25.976 4.2176L24.856 5.336C24.2304 5.9616 24.1296 6.8736 24.6288 7.3728C25.128 7.872 26.0416 7.7696 26.6656 7.144L27.784 6.0256ZM5.3344 24.8528L4.2144 25.9744C3.5888 26.6 3.488 27.5088 3.9872 28.008C4.4864 28.5072 5.4 28.408 6.0224 27.7824L7.1424 26.664C7.768 26.0384 7.8688 25.1264 7.3696 24.6256C6.8704 24.1248 5.9568 24.2304 5.3344 24.8528ZM6.024 4.216C5.4 3.5904 4.4864 3.488 3.9872 3.9872C3.488 4.4864 3.5904 5.4 4.2128 6.0256L5.3328 7.144C5.9584 7.7696 6.8688 7.872 7.368 7.3728C7.8672 6.8736 7.7664 5.96 7.1424 5.336L6.024 4.216ZM24.8544 26.6656L25.9744 27.784C26.6 28.4096 27.5104 28.5088 28.0096 28.0128C28.5088 27.5136 28.408 26.6 27.7824 25.976L26.664 24.8576C26.0384 24.232 25.1264 24.1296 24.6256 24.6288C24.1248 25.128 24.2288 26.04 24.8544 26.6656Z" fill="#1A1A1A"/>
</g>
<defs>
<clipPath id="clip0_655_26429">
<rect width="32" height="32" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.3 KiB

10
public/icons/Menu.svg
View File

@ -1,10 +0,0 @@
<svg width="34" height="32" viewBox="0 0 34 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_655_26427)">
<path d="M5.02344 17.7998H10.124C12.8453 17.7999 15.0994 19.8877 15.0996 22.4141V27.2148C15.0993 29.7397 12.8469 31.7997 10.124 31.7998H5.02344C2.30877 31.7996 0.200441 29.7471 0.200195 27.2148V22.4141C0.200383 19.8803 2.31032 17.8 5.02344 17.7998ZM23.7236 17.7998H28.8242C31.5454 17.8 33.7996 19.8878 33.7998 22.4141V27.2148C33.7995 29.7396 31.547 31.7996 28.8242 31.7998H23.7236C21.0089 31.7997 18.9006 29.7471 18.9004 27.2148V22.4141C18.9006 19.8802 21.0104 17.7999 23.7236 17.7998ZM5.02344 20.5996C4.84358 20.5982 4.66497 20.6242 4.49316 20.6748L4.32227 20.7334C4.15513 20.8012 3.99951 20.8937 3.86035 21.0068L3.72656 21.127C3.59876 21.254 3.49123 21.3994 3.40723 21.5576L3.33203 21.7197C3.26422 21.8858 3.22137 22.0605 3.20605 22.2383L3.2002 22.4141V27.2119C3.19812 27.3901 3.22321 27.5673 3.27441 27.7373L3.33398 27.9053C3.40256 28.0702 3.49594 28.2237 3.61035 28.3604L3.73145 28.4912C3.85957 28.6163 4.00591 28.7212 4.16504 28.8027L4.32812 28.876C4.5493 28.9627 4.78568 29.0039 5.02344 28.999V29H10.124C11.1459 28.9999 12.0993 28.2308 12.0996 27.2148V22.4141C12.0994 21.4026 11.1526 20.5997 10.124 20.5996H5.02344ZM23.7236 20.5996C23.5435 20.5982 23.3645 20.624 23.1924 20.6748L23.0225 20.7334C22.7995 20.8239 22.5969 20.9578 22.4268 21.127C22.299 21.254 22.1914 21.3994 22.1074 21.5576L22.0312 21.7197C21.9635 21.8857 21.9216 22.0606 21.9062 22.2383L21.9004 22.4141V27.2119C21.8976 27.4496 21.9428 27.6855 22.0342 27.9053C22.1028 28.0702 22.1961 28.2236 22.3105 28.3604L22.4316 28.4912C22.5598 28.6163 22.7061 28.7212 22.8652 28.8027L23.0283 28.876C23.2495 28.9627 23.4859 29.0039 23.7236 28.999V29H28.8242C29.8461 28.9998 30.7995 28.2307 30.7998 27.2148V22.4141C30.7996 21.4026 29.8528 20.5998 28.8242 20.5996H23.7236ZM5.02344 0.200195H10.124C12.8454 0.200256 15.0996 2.28794 15.0996 4.81445V9.61426C15.0996 12.1393 12.847 14.2001 10.124 14.2002H5.02344C2.30861 14.2 0.200195 12.1467 0.200195 9.61426V4.81445C0.200195 2.35951 2.18068 0.3304 4.77148 0.206055L5.02344 0.200195ZM23.7236 0.200195H28.8242C31.5455 0.200356 33.7998 2.288 33.7998 4.81445V9.61426C33.7998 12.1392 31.5471 14.2 28.8242 14.2002H23.7236C21.0087 14.2001 18.9004 12.1467 18.9004 9.61426V4.81445C18.9004 2.28045 21.0103 0.200335 23.7236 0.200195ZM5.02344 3C4.84364 2.99859 4.66492 3.02365 4.49316 3.07422L4.32227 3.13379C4.1551 3.20166 3.99952 3.29404 3.86035 3.40723L3.72656 3.52734C3.59894 3.65424 3.49116 3.79904 3.40723 3.95703L3.33203 4.11914C3.26414 4.28535 3.22135 4.46066 3.20605 4.63867L3.2002 4.81445V9.6123C3.19814 9.79051 3.22316 9.96761 3.27441 10.1377L3.33398 10.3057C3.4025 10.4703 3.49611 10.6232 3.61035 10.7598L3.73145 10.8906C3.85952 11.0157 4.00599 11.1206 4.16504 11.2021L4.32812 11.2764C4.54926 11.3631 4.78573 11.4043 5.02344 11.3994V11.4004H10.124C11.1461 11.4003 12.0996 10.6304 12.0996 9.61426V4.81445C12.0996 3.80279 11.1528 3.00006 10.124 3H5.02344ZM23.7236 3C23.5435 2.99857 23.3644 3.02349 23.1924 3.07422L23.0225 3.13379C22.8553 3.20165 22.6997 3.29404 22.5605 3.40723L22.4268 3.52734C22.2991 3.65425 22.1914 3.79903 22.1074 3.95703L22.0312 4.11914C21.9634 4.28534 21.9215 4.46067 21.9062 4.63867L21.9004 4.81445V9.6123C21.8977 9.84994 21.9428 10.086 22.0342 10.3057C22.1255 10.5252 22.261 10.724 22.4316 10.8906C22.5598 11.0157 22.7061 11.1206 22.8652 11.2021L23.0283 11.2764C23.2495 11.3631 23.4859 11.4043 23.7236 11.3994V11.4004H28.8242C29.8462 11.4002 30.7998 10.6303 30.7998 9.61426V4.81445C30.7998 3.80285 29.8529 3.00016 28.8242 3H23.7236Z" fill="#1A1A1A" stroke="#FFFEFB" stroke-width="0.4"/>
</g>
<defs>
<clipPath id="clip0_655_26427">
<rect width="34" height="32" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 3.7 KiB

3
public/icons/Moon.svg
View File

@ -1,3 +0,0 @@
<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M29.7777 17.8064C29.5829 17.6469 29.3469 17.5448 29.0965 17.5117C28.8461 17.4787 28.5913 17.5159 28.3612 17.6193C26.9347 18.2661 25.3838 18.599 23.815 18.5951C20.9131 18.5916 18.1303 17.4515 16.0733 15.4232C14.0163 13.395 12.8519 10.6432 12.8341 7.7678C12.8403 6.86664 12.9535 5.96933 13.1714 5.0944C13.2176 4.8612 13.2003 4.62 13.1211 4.39565C13.042 4.1713 12.9039 3.97191 12.7211 3.81803C12.5383 3.66415 12.3175 3.56134 12.0812 3.52019C11.845 3.47904 11.602 3.50104 11.3772 3.58393C9.26238 4.52618 7.42401 5.98566 6.03479 7.82526C4.64556 9.66486 3.75108 11.8242 3.43537 14.1004C3.11966 16.3766 3.39309 18.695 4.22996 20.8377C5.06684 22.9805 6.4397 24.8773 8.21956 26.3499C9.99943 27.8225 12.1279 28.8227 14.405 29.2564C16.682 29.69 19.033 29.543 21.237 28.8292C23.441 28.1153 25.4257 26.858 27.0046 25.1753C28.5836 23.4927 29.7049 21.44 30.2633 19.21C30.3313 18.9546 30.3215 18.6851 30.2351 18.4353C30.1486 18.1855 29.9895 17.9667 29.7777 17.8064ZM16.9621 26.749C14.6981 26.7331 12.4944 26.0243 10.6528 24.7195C8.81108 23.4147 7.42144 21.5777 6.67412 19.4601C5.92679 17.3425 5.85831 15.0477 6.47805 12.89C7.09779 10.7324 8.37545 8.81724 10.1361 7.40689V7.7678C10.1397 11.3615 11.582 14.807 14.1465 17.3481C16.711 19.8892 20.1883 21.3184 23.815 21.3219C24.7673 21.3254 25.7171 21.2268 26.648 21.0279C25.717 22.773 24.3229 24.2331 22.616 25.2507C20.9091 26.2683 18.9541 26.8049 16.9621 26.8024V26.749Z" fill="#FFFEFB"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

BIN
public/logo-dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1008 B

192
stores/menuStore.ts Normal file
View File

@ -0,0 +1,192 @@
import { usePB } from "~/composables/usePB";
import type {
FooterListResponse,
MenuListResponse,
PBFooterItem,
PBMenuItem,
UIMenuItem,
} from "~/types";
import { useStore } from "./store";
import { ref, watch } from "vue";
function buildTreeRecursive(
data: (PBMenuItem | UIMenuItem)[],
parentId: string
): UIMenuItem[] {
const children = data.filter(
(item): item is UIMenuItem =>
item.id_parent === parentId && !item.is_default
);
return children.map((item) => ({
...item,
children: buildTreeRecursive(data, item.id),
}));
}
export const useMenuStore = defineStore("menuStore", () => {
const pb = usePB();
const store = useStore();
const { $i18n } = useNuxtApp();
const router = useRouter();
const openMenu = ref(false);
const openDropDown = ref(false);
const defaultMenu = ref();
const menu = ref<UIMenuItem[]>([]);
const menuItems = ref<MenuListResponse>();
const footerItems = ref<FooterListResponse>();
const loadMenu = async () => {
try {
menuItems.value = (await pb
.collection("menu_view")
.getList<PBMenuItem>(1, 50, {
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);
if (root) {
menu.value = buildTreeRecursive(menuItems.value.items, root.id);
store.currentPageID = menu.value[0]?.id_page || "";
} else {
console.warn("Root menu item not found");
menu.value = [];
}
} catch (error) {
console.log(error);
}
};
const loadFooter = async () => {
try {
footerItems.value = (await pb
.collection("footer_view")
.getList<PBFooterItem>(1, 50, {
filter: `id_lang="${$i18n.locale.value}"`,
})) as FooterListResponse;
} catch (error) {
console.log(error);
}
};
const navigateToItem = (item?: UIMenuItem) => {
if (item) {
router.push({
params: { slug: item.link_rewrite, id: item.id_page },
name: `id-slug___${$i18n.locale.value}`,
});
openDropDown.value = false;
} else {
router.push({
params: {
slug: defaultMenu.value.link_rewrite,
id: defaultMenu.value.id_page,
},
name: `id-slug___${$i18n.locale.value}`,
});
}
};
watch($i18n.locale, async () => {
await loadMenu();
await loadFooter();
});
const getFirstImage = () => {
const req = useRequestEvent();
const url = useRequestURL();
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`;
});
if (img.length > 0) return img;
}
return "";
};
const route = useRoute();
const headMeta = computed(() => {
const item = menuItems.value?.items.find(
(item) => item.id_page === route.params.id
);
return {
title: item?.meta_title,
htmlAttrs: {
lang: $i18n.locale.value,
},
link: [{ rel: "manifest", href: "/api/manifest.json" }],
meta: [
{
hid: "description",
name: "description",
content: item?.meta_description,
},
{
property: "og:title",
content: item?.meta_title,
},
{
property: "og:description",
content: item?.meta_description,
},
{
property: "og:image",
content: getFirstImage(),
},
{
property: "twitter:title",
content: item?.meta_title,
},
{
property: "twitter:description",
content: item?.meta_description,
},
{
property: "twitter:image",
content: getFirstImage(),
},
],
};
});
function redirectToPage(link_rewrite: string) {
const page = menuItems.value?.items.find(
(item) => item.link_rewrite === link_rewrite
);
if (!page?.id_page || !page?.link_rewrite) {
console.warn(`Page not found or missing data for name: ${link_rewrite}`);
return;
}
router.push({
params: {
id: page?.id_page,
slug: page?.link_rewrite,
},
});
}
return {
menu,
menuItems,
footerItems,
openMenu,
openDropDown,
loadMenu,
loadFooter,
navigateToItem,
redirectToPage,
defaultMenu,
headMeta,
};
});

69
stores/store.ts Normal file
View File

@ -0,0 +1,69 @@
import { usePB } from "~/composables/usePB";
import type { componentsListType, PBPageItem } from "~/types";
// import { useI18n } from "vue-i18n";
export const useStore = defineStore("store", () => {
const currentPageID = ref("");
const pb = usePB();
const { $i18n } = useNuxtApp();
const components = ref({} as PBPageItem[]);
const getSections = async (id: string) => {
pb.cancelRequest("menu_view");
components.value = (
await pb.collection<PBPageItem>("page_view").getList(1, 50, {
filter: `page_id="${id}"&&(section_lang_id_lang="${
$i18n.locale.value
}"||section_is_no_lang=${true})`,
sort: "page_section_id_position",
})
).items as PBPageItem[];
};
async function getComponents(): Promise<componentsListType[]> {
try {
const children = components.value;
if (!children || !Array.isArray(children)) {
console.warn("No components available in store.");
return [];
}
const componentsList = [] as componentsListType[];
for (const child of children) {
const componentName = child.component_name;
const pageName = child.page_name;
if (!componentName) continue;
try {
const componentInstance = (
await import(`@/components/section/${pageName}/${componentName}.vue`)
).default;
const nonReactiveComponent = markRaw(componentInstance);
componentsList.push({
name: componentName,
component: child,
componentInstance: nonReactiveComponent,
data: child.section_lang_data,
});
} catch (error) {
console.error(`Failed to load component ${componentName}`, error);
}
}
return componentsList;
} catch (error) {
console.error("Failed to process components list", error);
}
return [];
}
return {
currentPageID,
components,
getComponents,
getSections,
};
});

93
types/index.ts Normal file
View File

@ -0,0 +1,93 @@
export interface ListResponse {
page: number;
perPage: number;
totalItems: 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 {
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;
};