Alexandr SaVBaD Waltz
129ad1a6fa
Fixes: None; Extra: 1) Create Pinia stores for app, user, category, and company management; 2) Add utility functions for error handling and category slug lookups; 3) Include German locale file and robots.txt for improved SEO and accessibility; 4) Add SVG assets and improve general folder structure for better maintainability.
127 lines
No EOL
3.1 KiB
Vue
127 lines
No EOL
3.1 KiB
Vue
<template>
|
|
<header class="header">
|
|
<nuxt-link-locale to="/">
|
|
<nuxt-img
|
|
format="webp"
|
|
width="150px"
|
|
densities="x1"
|
|
src="/images/evibes-big-simple.png"
|
|
alt="logo"
|
|
class="header__logo"
|
|
/>
|
|
</nuxt-link-locale>
|
|
<base-header-catalog />
|
|
<base-header-search />
|
|
<div class="header__actions">
|
|
<nuxt-link-locale to="/wishlist" class="header__actions-item">
|
|
<div>
|
|
<!-- <ui-counter>0</ui-counter>-->
|
|
<!-- <skeletons-ui-counter />-->
|
|
<Icon name="mdi:cards-heart-outline" size="28" />
|
|
</div>
|
|
<p>{{ t('header.actions.wishlist') }}</p>
|
|
</nuxt-link-locale>
|
|
<nuxt-link-locale to="/cart" class="header__actions-item">
|
|
<div>
|
|
<!-- <ui-counter>0</ui-counter>-->
|
|
<!-- <skeletons-ui-counter />-->
|
|
<Icon name="ph:shopping-cart-light" size="28" />
|
|
</div>
|
|
<p>{{ t('header.actions.cart') }}</p>
|
|
</nuxt-link-locale>
|
|
<client-only>
|
|
<nuxt-link-locale
|
|
to="/"
|
|
class="header__actions-item"
|
|
v-if="isAuthenticated"
|
|
>
|
|
<Icon name="material-symbols-light:person-outline-rounded" size="32" />
|
|
<p @click="logout">{{ t('header.actions.profile') }}</p>
|
|
</nuxt-link-locale>
|
|
<div
|
|
class="header__actions-item"
|
|
@click="appStore.setActiveState('login')"
|
|
v-else
|
|
>
|
|
<Icon name="material-symbols-light:person-outline-rounded" size="32" />
|
|
<p>{{ t('header.actions.login') }}</p>
|
|
</div>
|
|
<template #fallback>
|
|
<div
|
|
class="header__actions-item"
|
|
@click="appStore.setActiveState('login')"
|
|
>
|
|
<Icon name="material-symbols-light:person-outline-rounded" size="32" />
|
|
<p>{{ t('header.actions.login') }}</p>
|
|
</div>
|
|
</template>
|
|
</client-only>
|
|
</div>
|
|
<ui-language-switcher />
|
|
</header>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {useLogout} from "~/composables/auth";
|
|
|
|
const { t } = useI18n()
|
|
const appStore = useAppStore()
|
|
const userStore = useUserStore();
|
|
|
|
const isAuthenticated = computed(() => userStore.isAuthenticated)
|
|
|
|
const { logout } = useLogout()
|
|
</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;
|
|
|
|
&__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> |