This commit is contained in:
ogerly 2022-10-21 12:24:38 +02:00
parent 5f89017cea
commit ef316d5c36

View File

@ -31,7 +31,7 @@
</ds-text> </ds-text>
</nuxt-link> </nuxt-link>
</ds-flex-item> </ds-flex-item>
<!-- search-field --> <!-- search-field -->
<ds-flex-item <ds-flex-item
v-if="isLoggedIn" v-if="isLoggedIn"
@ -105,12 +105,12 @@
</ds-flex-item> </ds-flex-item>
<!-- hamburger button --> <!-- hamburger button -->
<ds-flex-item class="mobile-hamburger-menu"> <ds-flex-item class="mobile-hamburger-menu">
<client-only > <client-only>
<div style="display: inline-flex; padding-right: 20px;"> <div style="display: inline-flex; padding-right: 20px">
<notification-menu /> <notification-menu />
</div> </div>
</client-only> </client-only>
<base-button icon="bars" @click="toggleMobileMenuView" circle /> <base-button icon="bars" @click="toggleMobileMenuView" circle />
</ds-flex-item> </ds-flex-item>
</ds-flex> </ds-flex>
@ -136,27 +136,33 @@
</ds-flex-item> </ds-flex-item>
</ds-flex> </ds-flex>
<!-- switch language, notification, invite, profil --> <!-- switch language, notification, invite, profil -->
<ds-flex style="margin: 0 20px "> <ds-flex style="margin: 0 20px">
<!-- locale-switch mobile--> <!-- locale-switch mobile-->
<ds-flex-item :class="{ 'hide-mobile-menu': !toggleMobileMenu }"> <ds-flex-item :class="{ 'hide-mobile-menu': !toggleMobileMenu }">
<locale-switch class="topbar-locale-switch" placement="top" offset="8" /> <locale-switch class="topbar-locale-switch" placement="top" offset="8" />
</ds-flex-item>
<!-- invite-button mobile-->
<ds-flex-item :class="{ 'hide-mobile-menu': !toggleMobileMenu }" style="text-align: center;">
<client-only>
<invite-button placement="top" />
</client-only>
</ds-flex-item> </ds-flex-item>
<ds-flex-item :class="{ 'hide-mobile-menu': !toggleMobileMenu }" style="text-align: end;"> <!-- invite-button mobile-->
<ds-flex-item
:class="{ 'hide-mobile-menu': !toggleMobileMenu }"
style="text-align: center"
>
<client-only> <client-only>
<!-- avatar-menu mobile--> <invite-button placement="top" />
<avatar-menu placement="top" /> </client-only>
</client-only> </ds-flex-item>
<ds-flex-item
:class="{ 'hide-mobile-menu': !toggleMobileMenu }"
style="text-align: end"
>
<client-only>
<!-- avatar-menu mobile-->
<avatar-menu placement="top" />
</client-only>
</ds-flex-item> </ds-flex-item>
</ds-flex> </ds-flex>
<div <div
:class="{ 'hide-mobile-menu': !toggleMobileMenu }" :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
class="mobile-menu footer-mobile" class="mobile-menu footer-mobile"
> >
<!-- dynamic branding menu --> <!-- dynamic branding menu -->
<ul v-if="isHeaderMenu" class="dynamic-branding-mobil"> <ul v-if="isHeaderMenu" class="dynamic-branding-mobil">
@ -233,7 +239,7 @@ export default {
mixins: [seo], mixins: [seo],
data() { data() {
return { return {
windowWidth: null , windowWidth: null,
links, links,
LOGOS, LOGOS,
isHeaderMenu: headerMenu.MENU.length > 0, isHeaderMenu: headerMenu.MENU.length > 0,
@ -253,8 +259,8 @@ export default {
return firstRoute && firstRoute.name === 'index' return firstRoute && firstRoute.name === 'index'
}, },
showMobileMenu() { showMobileMenu() {
return this.windowWidth < 810 return this.windowWidth < 810
} },
}, },
methods: { methods: {
toggleMobileMenuView() { toggleMobileMenuView() {
@ -309,19 +315,18 @@ export default {
} }
.mobile-menu { .mobile-menu {
margin: 0 20px; margin: 0 20px;
} }
.mobile-search { .mobile-search {
margin-top: 20px; margin-top: 20px;
} }
.dynamic-branding-mobil, .dynamic-branding-mobil,
.dynamic-footer-mobil { .dynamic-footer-mobil {
line-height: 30px; line-height: 30px;
font-size: large; font-size: large;
} }
.dynamic-branding-mobil li{ .dynamic-branding-mobil li {
margin: 17px 0; margin: 17px 0;
} }
@ -336,10 +341,8 @@ export default {
.hide-mobile-menu { .hide-mobile-menu {
display: none; display: none;
} }
} }
@media only screen and (min-width: 810px) { @media only screen and (min-width: 810px) {
.main-navigation-right { .main-navigation-right {
width: 100%; width: 100%;
} }