This commit is contained in:
ogerly 2022-10-19 14:24:55 +02:00
parent 41e0cc5d3c
commit 3aebace584

View File

@ -4,13 +4,13 @@
<ds-container class="main-navigation-container" style="padding: 10px 10px"> <ds-container class="main-navigation-container" style="padding: 10px 10px">
<div> <div>
<ds-flex class="main-navigation-flex"> <ds-flex class="main-navigation-flex">
<!-- logo --> <!-- logo -->
<ds-flex-item :width="{ base: LOGOS.LOGO_HEADER_WIDTH }" style="margin-right: 20px"> <ds-flex-item :width="{ base: LOGOS.LOGO_HEADER_WIDTH }" style="margin-right: 20px">
<nuxt-link :to="{ name: 'index' }" v-scroll-to="'.main-navigation'"> <nuxt-link :to="{ name: 'index' }" v-scroll-to="'.main-navigation'">
<logo logoType="header" /> <logo logoType="header" />
</nuxt-link> </nuxt-link>
</ds-flex-item> </ds-flex-item>
<!-- dynamic-brand-menu --> <!-- dynamic-brand-menu -->
<ds-flex-item <ds-flex-item
v-for="item in menu" v-for="item in menu"
:key="item.name" :key="item.name"
@ -41,7 +41,7 @@
<categories-menu></categories-menu> <categories-menu></categories-menu>
</client-only> </client-only>
</ds-flex-item> </ds-flex-item>
<!-- hamburger-menu --> <!-- hamburger-menu -->
<ds-flex-item <ds-flex-item
:width="{ base: '20%', sm: '40%', md: '40%', lg: '0%' }" :width="{ base: '20%', sm: '40%', md: '40%', lg: '0%' }"
class="mobile-hamburger-menu" class="mobile-hamburger-menu"
@ -63,7 +63,7 @@
> >
<search-field /> <search-field />
</ds-flex-item> </ds-flex-item>
<!-- filter-menu --> <!-- filter-menu -->
<ds-flex-item <ds-flex-item
v-if="isLoggedIn" v-if="isLoggedIn"
:class="{ 'hide-mobile-menu': !toggleMobileMenu }" :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
@ -73,7 +73,7 @@
<filter-menu v-show="showFilterMenuDropdown" /> <filter-menu v-show="showFilterMenuDropdown" />
</client-only> </client-only>
</ds-flex-item> </ds-flex-item>
<!-- locale-switch --> <!-- locale-switch -->
<ds-flex-item <ds-flex-item
style="flex-basis: auto" style="flex-basis: auto"
:class="{ 'hide-mobile-menu': !toggleMobileMenu }" :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
@ -89,7 +89,7 @@
<locale-switch class="topbar-locale-switch" placement="top" offset="8" /> <locale-switch class="topbar-locale-switch" placement="top" offset="8" />
<template v-if="isLoggedIn"> <template v-if="isLoggedIn">
<client-only> <client-only>
<!-- notification-menu --> <!-- notification-menu -->
<notification-menu placement="top" /> <notification-menu placement="top" />
</client-only> </client-only>
<div v-if="inviteRegistration"> <div v-if="inviteRegistration">
@ -105,49 +105,45 @@
</template> </template>
</div> </div>
</ds-flex-item> </ds-flex-item>
</ds-flex> </ds-flex>
<!-- avatar-menu --> <!-- avatar-menu -->
<ds-flex> <ds-flex>
<!-- Footer menu if mobile --> <!-- Footer menu if mobile -->
<ds-flex-item <ds-flex-item
style="flex-basis: auto" style="flex-basis: auto"
:class="{ 'hide-mobile-menu': !toggleMobileMenu}" :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
class="footer-mobile" class="footer-mobile"
> >
<!-- dynamic branding menu --> <!-- dynamic branding menu -->
<ul v-if="isHeaderMenu" > <ul v-if="isHeaderMenu">
<li <li v-for="item in menu" :key="item.name">
v-for="item in menu" :key="item.name" {{ item }}
> <a v-if="item.url" :href="item.url" target="_blank">
{{item}} <ds-text size="large" bold>
<a v-if="item.url" :href="item.url" target="_blank"> {{ $t(item.nameIdent) }}
<ds-text size="large" bold> </ds-text>
{{ $t(item.nameIdent) }} </a>
</ds-text> <nuxt-link v-else :to="item.path">
</a> <ds-text size="large" bold>
<nuxt-link v-else :to="item.path"> {{ $t(item.nameIdent) }}
<ds-text size="large" bold> </ds-text>
{{ $t(item.nameIdent) }} </nuxt-link>
</ds-text> </li>
</nuxt-link> </ul>
</li> <!-- dynamic branding menu Categories / Topic -->
</ul> <ul>
<!-- dynamic branding menu Categories / Topic --> <li
<ul> v-if="categoriesActive && isLoggedIn"
<li :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
v-if="categoriesActive && isLoggedIn" style="flex-grow: 0; flex-basis: auto; margin-right: 20px"
:class="{ 'hide-mobile-menu': !toggleMobileMenu }" >
style="flex-grow: 0; flex-basis: auto; margin-right: 20px" <client-only>
> <categories-menu></categories-menu>
<client-only> </client-only>
<categories-menu></categories-menu> </li>
</client-only> </ul>
<hr />
</li> <!-- dynamic footer menu in header -->
</ul>
<hr />
<!-- dynamic footer menu in header -->
<ul> <ul>
<li v-for="pageParams in links.FOOTER_LINK_LIST" :key="pageParams.name"> <li v-for="pageParams in links.FOOTER_LINK_LIST" :key="pageParams.name">
<page-params-link :pageParams="pageParams"> <page-params-link :pageParams="pageParams">
@ -158,7 +154,6 @@
</ds-flex-item> </ds-flex-item>
</ds-flex> </ds-flex>
</div> </div>
</ds-container> </ds-container>
</div> </div>
<ds-container> <ds-container>
@ -192,7 +187,6 @@ import CategoriesMenu from '~/components/FilterMenu/CategoriesMenu.vue'
import links from '~/constants/links.js' import links from '~/constants/links.js'
import PageParamsLink from '~/components/_new/features/PageParamsLink/PageParamsLink.vue' import PageParamsLink from '~/components/_new/features/PageParamsLink/PageParamsLink.vue'
export default { export default {
components: { components: {
Logo, Logo,
@ -281,7 +275,7 @@ export default {
line-height: 30px; line-height: 30px;
font-size: large; font-size: large;
} }
@media only screen and (max-width: 730px) { @media only screen and (max-width: 730px) {
#nav-search-box, #nav-search-box,
.main-navigation-right { .main-navigation-right {
@ -300,9 +294,8 @@ export default {
.mobile-hamburger-menu { .mobile-hamburger-menu {
display: none; display: none;
} }
.main-navigation-right { .main-navigation-right {
width: 100%; width: 100%;
} }
} }
</style> </style>