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

main pages/styles

Browse Source
This commit is contained in:
Arina Yakovenko
2025-06-02 16:03:54 +02:00
parent 9246f80857
commit 2ffd64da98
16 changed files with 301 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
components/HeaderBlock.vue
View File

@ -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>