forked from Ivasoft/geovisio-website
71 lines
1.4 KiB
Vue
71 lines
1.4 KiB
Vue
<template>
|
|
<button
|
|
class="menu-burger"
|
|
:aria-label="ariaLabel"
|
|
@click="$emit('triggerToggleMenu')"
|
|
>
|
|
<div v-if="isLogged" class="wrapper-name">
|
|
<div class="item-with-sub">
|
|
<span>{{ userName }}</span>
|
|
</div>
|
|
<span class="desktop">{{ $t('general.header.my_account') }}</span>
|
|
<img
|
|
src="@/assets/images/icon/arrow-down.svg"
|
|
alt=""
|
|
:class="['arrow-img', { 'arrow-up': !menuIsClosed }]"
|
|
/>
|
|
</div>
|
|
</button>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineProps({
|
|
menuIsClosed: { type: Boolean, default: true },
|
|
isLogged: { type: Boolean, default: false },
|
|
userName: { type: String, default: null },
|
|
ariaLabel: { type: String, default: null }
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.menu-burger {
|
|
display: block;
|
|
background-color: transparent;
|
|
border: none;
|
|
font-size: toRem(2.5);
|
|
padding: 0;
|
|
color: var(--blue-dark);
|
|
}
|
|
.wrapper-name {
|
|
display: flex;
|
|
align-items: center;
|
|
@include text(m-r-regular);
|
|
}
|
|
.arrow-img {
|
|
margin-left: toRem(0.5);
|
|
}
|
|
.arrow-up {
|
|
transform: rotate(180deg);
|
|
}
|
|
.item-with-sub {
|
|
@include text(s-regular);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: var(--blue);
|
|
background-color: var(--blue-semi);
|
|
height: toRem(3);
|
|
width: toRem(3);
|
|
border-radius: 50%;
|
|
margin-right: toRem(0.5);
|
|
}
|
|
.desktop {
|
|
display: flex;
|
|
}
|
|
@media (max-width: toRem(76.8)) {
|
|
.desktop {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|