Alexandr SaVBaD Waltz
048da0e251
Introduced address management functionality, including address creation, deletion, and display with full localization support. Integrated GraphQL queries, mutations, and reusable composables for backend communication. - Added `addresses.vue` to profile for managing user addresses. - Implemented `useAddressCreate`, `useAddressDelete`, and `useAddressAutocomplete` composables. - Created reusable components: `forms/address.vue` and `cards/address.vue`. - Updated `navigation.vue` to include addresses in profile navigation. - Enhanced localization files for address-related translations. This improves user experience by enabling comprehensive address management in the profile section. No breaking changes.
129 lines
No EOL
3.1 KiB
Vue
129 lines
No EOL
3.1 KiB
Vue
<template>
|
|
<nav class="nav">
|
|
<div class="nav__inner">
|
|
<nuxt-link-locale
|
|
class="nav__item"
|
|
:class="[{ active: route.path.includes('settings') }]"
|
|
to="/profile/settings"
|
|
>
|
|
<icon name="ic:baseline-settings" size="20" />
|
|
{{ t('profile.settings.title') }}
|
|
</nuxt-link-locale>
|
|
<nuxt-link-locale
|
|
class="nav__item"
|
|
:class="[{ active: route.path.includes('orders') }]"
|
|
to="/profile/orders"
|
|
>
|
|
<icon name="material-symbols:order-approve-rounded" size="20" />
|
|
{{ t('profile.orders.title') }}
|
|
</nuxt-link-locale>
|
|
<!-- <nuxt-link-locale-->
|
|
<!-- class="nav__item"-->
|
|
<!-- :class="[{ active: route.path.includes('balance') }]"-->
|
|
<!-- to="/profile/balance"-->
|
|
<!-- >-->
|
|
<!-- <icon name="ic:outline-attach-money" size="20" />-->
|
|
<!-- {{ t('profile.balance.title') }}-->
|
|
<!-- </nuxt-link-locale>-->
|
|
<nuxt-link-locale
|
|
class="nav__item"
|
|
:class="[{ active: route.path.includes('promocodes') }]"
|
|
to="/profile/promocodes"
|
|
>
|
|
<icon name="fluent:ticket-20-filled" size="20" />
|
|
{{ t('profile.promocodes.title') }}
|
|
</nuxt-link-locale>
|
|
<nuxt-link-locale
|
|
class="nav__item"
|
|
:class="[{ active: route.path.includes('addresses') }]"
|
|
to="/profile/addresses"
|
|
>
|
|
<icon name="material-symbols:location-on" size="20" />
|
|
{{ t('profile.addresses.title') }}
|
|
</nuxt-link-locale>
|
|
</div>
|
|
<div class="nav__logout" @click="logout">
|
|
<icon name="material-symbols:power-settings-new-outline" size="20" />
|
|
{{ t('profile.logout') }}
|
|
</div>
|
|
</nav>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {useLogout} from '@composables/auth';
|
|
|
|
const {t} = useI18n();
|
|
const route = useRoute();
|
|
|
|
const { logout } = useLogout();
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.nav {
|
|
position: sticky;
|
|
top: 116px;
|
|
width: 256px;
|
|
flex-shrink: 0;
|
|
height: fit-content;
|
|
|
|
&__inner {
|
|
background-color: $main;
|
|
border-radius: $default_border_radius;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border: 1px solid $border;
|
|
overflow: hidden;
|
|
}
|
|
|
|
&__item {
|
|
cursor: pointer;
|
|
padding: 16px 24px;
|
|
border-right: 2px solid transparent;
|
|
border-bottom: 1px solid $border;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
|
|
color: $text;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
|
|
@include hover {
|
|
color: $primary;
|
|
background-color: $main_hover;
|
|
}
|
|
|
|
&.active {
|
|
border-right-color: $primary;
|
|
color: $primary;
|
|
background-color: $main_hover;
|
|
}
|
|
|
|
& span {
|
|
color: $secondary;
|
|
}
|
|
}
|
|
|
|
&__logout {
|
|
cursor: pointer;
|
|
margin-top: 25px;
|
|
border-radius: $less_border_radius;
|
|
background-color: rgba($primary, 0.2);
|
|
border: 1px solid $primary;
|
|
padding: 7px 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
|
|
color: $primary;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
|
|
@include hover {
|
|
background-color: $primary;
|
|
color: $main;
|
|
}
|
|
}
|
|
}
|
|
</style> |