diff options
Diffstat (limited to 'src/components/AppHeader')
-rw-r--r-- | src/components/AppHeader/AppHeader.vue | 116 |
1 files changed, 67 insertions, 49 deletions
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue index a755a628..39d52b83 100644 --- a/src/components/AppHeader/AppHeader.vue +++ b/src/components/AppHeader/AppHeader.vue @@ -43,11 +43,19 @@ <icon-renew /> </b-button> </li> - <li> - <b-button id="app-header-logout" variant="link" @click="logout"> - {{ $t('appHeader.logOut') }} - <icon-avatar /> - </b-button> + <li class="nav-item"> + <b-dropdown id="app-header-user" variant="link" right> + <template v-slot:button-content> + <icon-avatar /> + {{ username }} + </template> + <b-dropdown-item to="/profile-settings" + >{{ $t('appHeader.profileSettings') }} + </b-dropdown-item> + <b-dropdown-item @click="logout">{{ + $t('appHeader.logOut') + }}</b-dropdown-item> + </b-dropdown> </li> </b-navbar-nav> </b-navbar> @@ -110,6 +118,9 @@ export default { default: return 'secondary'; } + }, + username() { + return this.$store.getters['global/username']; } }, created() { @@ -142,64 +153,71 @@ export default { }; </script> -<style lang="scss" scoped> +<style lang="scss"> @import 'src/assets/styles/helpers'; -.link-skip-nav { - position: absolute; - top: -60px; - left: 0.5rem; - z-index: $zindex-popover; - transition: $duration--moderate-01 $exit-easing--expressive; - &:focus { - top: 0.5rem; - transition-timing-function: $entrance-easing--expressive; +.app-header { + .link-skip-nav { + position: absolute; + top: -60px; + left: 0.5rem; + z-index: $zindex-popover; + transition: $duration--moderate-01 $exit-easing--expressive; + &:focus { + top: 0.5rem; + transition-timing-function: $entrance-easing--expressive; + } } -} -.navbar-dark { - .navbar-text, - .nav-link, - .btn-link { - color: $white !important; - fill: currentColor; + .navbar-dark { + .navbar-text, + .nav-link, + .btn-link { + color: $white !important; + fill: currentColor; + } } -} - -.nav-item { - fill: $light; -} -.navbar { - padding: 0; - height: $header-height; - overflow: hidden; - - .btn-link { - padding: $spacer / 2; + .nav-item { + fill: $light; } -} -.navbar-nav { - padding: 0 $spacer; -} + .navbar { + padding: 0; + height: $header-height; -.nav-trigger { - fill: $light; - width: $header-height; - height: $header-height; - transition: none; + .btn-link { + padding: $spacer / 2; + } + } - svg { - margin: 0; + .navbar-nav { + padding: 0 $spacer; } - &:hover { + .nav-trigger { fill: $light; - background-color: $dark; + width: $header-height; + height: $header-height; + transition: none; + + svg { + margin: 0; + } + + &:hover { + fill: $light; + background-color: $dark; + } + + @include media-breakpoint-up($responsive-layout-bp) { + display: none; + } } - @include media-breakpoint-up($responsive-layout-bp) { - display: none; + .dropdown { + .dropdown-menu { + margin-top: 7px; + } } } </style> |