Alexandr SaVBaD Waltz
2d363e1740
Fixes: 1) Refactor `useProducts` and `useCategorybySlug` composables for improved error handling and lazy loading; 2) Correct import path in `product-page.vue` for `useProductBySlug`; 3) Update `useLanguages` composable to set current locale from local storage; 4) Remove unused `auth.js`, `base-header.vue`, and deprecated GraphQL fragments; Extra: Minor styling adjustments and removal of redundant console logs; Updated `package-lock.json` dependencies for version consistency.
129 lines
No EOL
3.3 KiB
Vue
129 lines
No EOL
3.3 KiB
Vue
<template>
|
|
<header class="header">
|
|
<router-link :to="translations.i18nRoute({ name: 'home' })">
|
|
<img class="header__logo" src="@images/evibes-big-simple.png" alt="logo">
|
|
</router-link>
|
|
<base-header-catalogue />
|
|
<base-header-search />
|
|
<div class="header__actions">
|
|
<router-link :to="translations.i18nRoute({ name: 'wishlist' })" class="header__actions-item">
|
|
<div>
|
|
<ui-counter>0</ui-counter>
|
|
<!-- <counter-skeleton />-->
|
|
<i class="pi pi-heart"></i>
|
|
</div>
|
|
<p>{{ t('header.actions.wishlist') }}</p>
|
|
</router-link>
|
|
<router-link :to="translations.i18nRoute({ name: 'cart' })" class="header__actions-item">
|
|
<div>
|
|
<ui-counter>0</ui-counter>
|
|
<!-- <counter-skeleton />-->
|
|
<i class="pi pi-shopping-cart"></i>
|
|
</div>
|
|
<p>{{ t('header.actions.cart') }}</p>
|
|
</router-link>
|
|
<router-link
|
|
:to="translations.i18nRoute({ name: 'home' })"
|
|
class="header__actions-item"
|
|
v-if="isAuthenticated"
|
|
>
|
|
<i class="pi pi-user"></i>
|
|
<p>{{ t('header.actions.user') }}</p>
|
|
</router-link>
|
|
<div
|
|
class="header__actions-item"
|
|
@click="appStore.setActiveState('login')"
|
|
v-else
|
|
>
|
|
<i class="pi pi-user"></i>
|
|
<p>{{ t('header.actions.user') }}</p>
|
|
</div>
|
|
</div>
|
|
<ui-language-switcher />
|
|
</header>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {computed, onMounted} from "vue";
|
|
import {useCategories} from "@/composables/categories/index.js";
|
|
import translations from "@/core/helpers/translations.js";
|
|
import {useI18n} from "vue-i18n";
|
|
import BaseHeaderSearch from "@/components/base/header/base-header-search.vue";
|
|
import UiLanguageSwitcher from "@/components/ui/ui-language-switcher.vue";
|
|
import {useUserStore} from "@/stores/user.js";
|
|
import {useAppStore} from "@/stores/app.js";
|
|
import UiCounter from "@/components/ui/ui-counter.vue";
|
|
import CounterSkeleton from "@/components/skeletons/ui/counter-skeleton.vue";
|
|
import BaseHeaderCatalogue from "@/components/base/header/base-header-catalogue.vue";
|
|
|
|
//TODO: add categories to header
|
|
|
|
const {t} = useI18n()
|
|
const userStore = useUserStore()
|
|
const appStore = useAppStore()
|
|
|
|
const isAuthenticated = computed(() => userStore.user)
|
|
|
|
const { categories, loading, getCategories } = useCategories();
|
|
|
|
onMounted(async () => {
|
|
await getCategories()
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.header {
|
|
box-shadow: 0 1px 2px #0000001a;
|
|
position: fixed;
|
|
z-index: 2;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
background-color: $white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 50px;
|
|
padding: 10px 25px;
|
|
|
|
&__logo {
|
|
width: 150px;
|
|
}
|
|
|
|
&__actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
|
|
&-item {
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 7px 10px;
|
|
border-radius: $default_border_radius;
|
|
transition: 0.2s;
|
|
|
|
@include hover {
|
|
background-color: #f7f7f7;
|
|
color: $accent;
|
|
}
|
|
|
|
& div {
|
|
position: relative;
|
|
}
|
|
|
|
& i {
|
|
transition: 0.2s;
|
|
font-size: 24px;
|
|
}
|
|
|
|
& p {
|
|
transition: 0.2s;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |