From 1406361cf0c6d6cd2daeda4f6f464641786915bb Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Sat, 22 Oct 2022 08:33:30 +0200
Subject: [PATCH 1/5] change pixel mobile menu show by under 811px

---
 webapp/layouts/default.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index e7095d8b6..d0d12dd6b 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -270,7 +270,7 @@ export default {
     },
     showMobileMenu() {
       if (!this.windowWidth) return false
-      return this.windowWidth < 810
+      return this.windowWidth < 811
     },
   },
   methods: {

From 401f59ae8de5b1c27f0e26e1f71778d3257d2180 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Sat, 22 Oct 2022 09:35:27 +0200
Subject: [PATCH 2/5] add header menu to component, central variabl for screen
 width

---
 webapp/components/HeaderMenu/HeaderMenu.vue | 300 +++++++++++++++++++
 webapp/components/PageFooter/PageFooter.vue |   5 -
 webapp/layouts/default.vue                  | 313 +-------------------
 3 files changed, 306 insertions(+), 312 deletions(-)
 create mode 100644 webapp/components/HeaderMenu/HeaderMenu.vue

diff --git a/webapp/components/HeaderMenu/HeaderMenu.vue b/webapp/components/HeaderMenu/HeaderMenu.vue
new file mode 100644
index 000000000..c868482e4
--- /dev/null
+++ b/webapp/components/HeaderMenu/HeaderMenu.vue
@@ -0,0 +1,300 @@
+<template>
+    <ds-container class="main-navigation-container" style="padding: 10px 10px">
+        <div>
+            <!-- header menu -->
+            <ds-flex v-if="!showMobileMenu" class="main-navigation-flex">
+            <!-- logo -->
+            <ds-flex-item :width="{ base: LOGOS.LOGO_HEADER_WIDTH }" style="margin-right: 20px">
+                <a
+                v-if="LOGOS.LOGO_HEADER_CLICK.externalLink"
+                :href="LOGOS.LOGO_HEADER_CLICK.externalLink"
+                >
+                <logo logoType="header" />
+                </a>
+                <nuxt-link
+                v-else
+                :to="LOGOS.LOGO_HEADER_CLICK.internalPath.to"
+                v-scroll-to="LOGOS.LOGO_HEADER_CLICK.internalPath.scrollTo"
+                >
+                <logo logoType="header" />
+                </nuxt-link>
+            </ds-flex-item>
+            <!-- dynamic-brand-menu -->
+            <ds-flex-item
+                v-for="item in menu"
+                :key="item.name"
+                class="branding-menu"
+                :width="{ base: 'auto' }"
+                style="margin-right: 20px"
+            >
+                <a v-if="item.url" :href="item.url" target="_blank">
+                <ds-text size="large" bold>
+                    {{ $t(item.nameIdent) }}
+                </ds-text>
+                </a>
+                <nuxt-link v-else :to="item.path">
+                <ds-text size="large" bold>
+                    {{ $t(item.nameIdent) }}
+                </ds-text>
+                </nuxt-link>
+            </ds-flex-item>
+
+            <!-- search-field -->
+            <ds-flex-item
+                v-if="isLoggedIn"
+                id="nav-search-box"
+                class="header-search"
+                :width="{
+                base: '45%',
+                sm: '40%',
+                md: isHeaderMenu ? 'auto' : '40%',
+                lg: isHeaderMenu ? 'auto' : '50%',
+                }"
+                style="flex-shrink: 0; flex-grow: 1"
+            >
+                <search-field />
+            </ds-flex-item>
+            <!-- filter-menu 
+                TODO: Filter is only visible on index    
+            -->
+            <ds-flex-item
+                v-if="isLoggedIn"
+                style="flex-grow: 0; flex-basis: auto"
+            >
+                <client-only>
+                <filter-menu v-show="showFilterMenuDropdown" />
+                </client-only>
+            </ds-flex-item>
+            <!-- locale-switch -->
+            <ds-flex-item
+                style="flex-basis: auto"
+            >
+                <div
+                class="main-navigation-right"
+                style="flex-basis: auto"
+                >
+                <locale-switch class="topbar-locale-switch" placement="top" offset="8" />
+                <template v-if="isLoggedIn">
+                    <client-only>
+                    <!-- notification-menu -->
+                    <notification-menu placement="top" />
+                    </client-only>
+                    <div v-if="inviteRegistration">
+                    <client-only>
+                        <!-- invite-button -->
+                        <invite-button placement="top" />
+                    </client-only>
+                    </div>
+                    <client-only>
+                    <!-- avatar-menu -->
+                    <avatar-menu placement="top" />
+                    </client-only>
+                </template>
+                </div>
+            </ds-flex-item>
+            </ds-flex>
+
+            <!-- mobile header menu -->
+            <div v-else>
+            <!-- logo, hamburger-->
+            <ds-flex>
+                <ds-flex-item :width="{ base: LOGOS.LOGO_HEADER_WIDTH }" style="margin-right: 20px">
+                <nuxt-link :to="{ name: 'index' }" v-scroll-to="'.main-navigation'">
+                    <logo logoType="header" />
+                </nuxt-link>
+                </ds-flex-item>
+
+                <!-- hamburger button -->
+                <ds-flex-item class="mobile-hamburger-menu">
+                <client-only>
+                    <div style="display: inline-flex; padding-right: 20px">
+                    <notification-menu />
+                    </div>
+                </client-only>
+                <base-button icon="bars" @click="toggleMobileMenuView" circle />
+                </ds-flex-item>
+            </ds-flex>
+            <!-- search, filter-->
+            <ds-flex class="mobile-menu">
+                <!-- search-field mobile-->
+                <ds-flex-item
+                v-if="isLoggedIn"
+                :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
+                style="padding: 20px"
+                >
+                <search-field />
+                </ds-flex-item>
+                <!-- filter menu mobile-->
+                <ds-flex-item
+                v-if="isLoggedIn"
+                :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
+                style="flex-grow: 0; flex-basis: auto; padding: 20px 0"
+                >
+                <client-only>
+                    <filter-menu v-show="showFilterMenuDropdown" />
+                </client-only>
+                </ds-flex-item>
+            </ds-flex>
+            <!-- switch language, notification, invite, profil -->
+            <ds-flex style="margin: 0 20px">
+                <!-- locale-switch mobile-->
+                <ds-flex-item :class="{ 'hide-mobile-menu': !toggleMobileMenu }">
+                <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
+                :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>
+            <div
+                :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
+                class="mobile-menu footer-mobile"
+            >
+                <!-- dynamic branding menu  -->
+                <ul v-if="isHeaderMenu" class="dynamic-branding-mobil">
+                <li v-for="item in menu" :key="item.name">
+                    <a v-if="item.url" :href="item.url" target="_blank">
+                    <ds-text size="large" bold>
+                        {{ $t(item.nameIdent) }}
+                    </ds-text>
+                    </a>
+                    <nuxt-link v-else :to="item.path">
+                    <ds-text size="large" bold>
+                        {{ $t(item.nameIdent) }}
+                    </ds-text>
+                    </nuxt-link>
+                </li>
+                </ul>
+                <hr />
+                <!-- dynamic footer menu in header  -->
+                <ul class="dynamic-footer-mobil">
+                <li v-for="pageParams in links.FOOTER_LINK_LIST" :key="pageParams.name">
+                    <page-params-link :pageParams="pageParams">
+                    {{ $t(pageParams.internalPage.footerIdent) }}
+                    </page-params-link>
+                </li>
+                </ul>
+            </div>
+            </div>
+        </div>
+    </ds-container>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+import LOGOS from '~/constants/logos.js'
+import headerMenu from '~/constants/headerMenu.js' 
+import AvatarMenu from '~/components/AvatarMenu/AvatarMenu'
+import FilterMenu from '~/components/FilterMenu/FilterMenu.vue'
+import InviteButton from '~/components/InviteButton/InviteButton'
+import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
+import Logo from '~/components/Logo/Logo'
+import SearchField from '~/components/features/SearchField/SearchField.vue'
+import NotificationMenu from '~/components/NotificationMenu/NotificationMenu'
+import links from '~/constants/links.js'
+import PageParamsLink from '~/components/_new/features/PageParamsLink/PageParamsLink.vue'
+
+export default {
+  components: {
+    AvatarMenu,
+    FilterMenu,
+    InviteButton,
+    LocaleSwitch,
+    Logo,
+    NotificationMenu,
+    PageParamsLink,
+    SearchField,
+  },
+  props: {
+    showMobileMenu: { type: Boolean, default: false },
+  },
+  data() {
+    return {
+      links,
+      LOGOS,
+      isHeaderMenu: headerMenu.MENU.length > 0,
+      menu: headerMenu.MENU,
+      mobileSearchVisible: false,
+      toggleMobileMenu: false,
+      inviteRegistration: this.$env.INVITE_REGISTRATION === true, // for 'false' in .env INVITE_REGISTRATION is of type undefined and not(!) boolean false, because of internal handling,
+      categoriesActive: this.$env.CATEGORIES_ACTIVE,
+    }
+  },
+  computed: {
+    ...mapGetters({
+      isLoggedIn: 'auth/isLoggedIn',
+    }),
+    showFilterMenuDropdown() {
+      const [firstRoute] = this.$route.matched
+      return firstRoute && firstRoute.name === 'index'
+    },
+  },
+  methods: {
+    toggleMobileMenuView() {
+      this.toggleMobileMenu = !this.toggleMobileMenu
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+ 
+.margin-right-20 {
+  margin-right: 20px;
+}
+.margin-x {
+  margin-left: 20px;
+  margin-right: 20px;
+  white-space: nowrap;
+}
+.topbar-locale-switch {
+  display: flex;
+  margin-right: $space-xx-small;
+  align-self: center;
+  display: inline-flex;
+}
+.main-navigation-flex {
+  align-items: center;
+}
+.main-navigation-right {
+  display: flex;
+  justify-content: flex-end;
+}
+.main-navigation-right .desktop-view {
+  float: right;
+}
+.ds-flex-item.mobile-hamburger-menu {
+  margin-left: auto;
+  text-align: right;
+}
+.mobile-menu {
+  margin: 0 20px;
+}
+.mobile-search {
+  margin-top: 20px;
+}
+.dynamic-branding-mobil,
+.dynamic-footer-mobil {
+  line-height: 30px;
+  font-size: large;
+}
+.dynamic-branding-mobil li {
+  margin: 17px 0;
+}
+.hide-mobile-menu {
+    display: none;
+}
+</style>    
\ No newline at end of file
diff --git a/webapp/components/PageFooter/PageFooter.vue b/webapp/components/PageFooter/PageFooter.vue
index 798d52f47..c71fc4b5c 100644
--- a/webapp/components/PageFooter/PageFooter.vue
+++ b/webapp/components/PageFooter/PageFooter.vue
@@ -50,9 +50,4 @@ export default {
   margin-left: 0.2rem;
   margin-right: 0.2rem;
 }
-@media only screen and (max-width: 810px) {
-  .ds-footer {
-    display: none;
-  }
-}
 </style>
diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index d0d12dd6b..e268bdd64 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -1,214 +1,14 @@
 <template>
   <div class="layout-default">
     <div class="main-navigation">
-      <ds-container class="main-navigation-container" style="padding: 10px 10px">
-        <div>
-          <!-- header menu -->
-          <ds-flex v-if="!showMobileMenu" class="main-navigation-flex">
-            <!-- logo -->
-            <ds-flex-item :width="{ base: LOGOS.LOGO_HEADER_WIDTH }" style="margin-right: 20px">
-              <a
-                v-if="LOGOS.LOGO_HEADER_CLICK.externalLink"
-                :href="LOGOS.LOGO_HEADER_CLICK.externalLink"
-              >
-                <logo logoType="header" />
-              </a>
-              <nuxt-link
-                v-else
-                :to="LOGOS.LOGO_HEADER_CLICK.internalPath.to"
-                v-scroll-to="LOGOS.LOGO_HEADER_CLICK.internalPath.scrollTo"
-              >
-                <logo logoType="header" />
-              </nuxt-link>
-            </ds-flex-item>
-            <!-- dynamic-brand-menu -->
-            <ds-flex-item
-              v-for="item in menu"
-              :key="item.name"
-              :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
-              class="branding-menu"
-              :width="{ base: 'auto' }"
-              style="margin-right: 20px"
-            >
-              <a v-if="item.url" :href="item.url" target="_blank">
-                <ds-text size="large" bold>
-                  {{ $t(item.nameIdent) }}
-                </ds-text>
-              </a>
-              <nuxt-link v-else :to="item.path">
-                <ds-text size="large" bold>
-                  {{ $t(item.nameIdent) }}
-                </ds-text>
-              </nuxt-link>
-            </ds-flex-item>
-
-            <!-- search-field -->
-            <ds-flex-item
-              v-if="isLoggedIn"
-              id="nav-search-box"
-              :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
-              class="header-search"
-              :width="{
-                base: '45%',
-                sm: '40%',
-                md: isHeaderMenu ? 'auto' : '40%',
-                lg: isHeaderMenu ? 'auto' : '50%',
-              }"
-              style="flex-shrink: 0; flex-grow: 1"
-            >
-              <search-field />
-            </ds-flex-item>
-            <!-- filter-menu 
-                TODO: Filter is only visible on index    
-            -->
-            <ds-flex-item
-              v-if="isLoggedIn"
-              :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
-              style="flex-grow: 0; flex-basis: auto"
-            >
-              <client-only>
-                <filter-menu v-show="showFilterMenuDropdown" />
-              </client-only>
-            </ds-flex-item>
-            <!-- locale-switch -->
-            <ds-flex-item
-              style="flex-basis: auto"
-              :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
-            >
-              <div
-                class="main-navigation-right"
-                :class="{
-                  'desktop-view': !toggleMobileMenu,
-                  'hide-mobile-menu': !toggleMobileMenu,
-                }"
-                style="flex-basis: auto"
-              >
-                <locale-switch class="topbar-locale-switch" placement="top" offset="8" />
-                <template v-if="isLoggedIn">
-                  <client-only>
-                    <!-- notification-menu -->
-                    <notification-menu placement="top" />
-                  </client-only>
-                  <div v-if="inviteRegistration">
-                    <client-only>
-                      <!-- invite-button -->
-                      <invite-button placement="top" />
-                    </client-only>
-                  </div>
-                  <client-only>
-                    <!-- avatar-menu -->
-                    <avatar-menu placement="top" />
-                  </client-only>
-                </template>
-              </div>
-            </ds-flex-item>
-          </ds-flex>
-
-          <!-- mobile header menu -->
-          <div v-else>
-            <!-- logo, hamburger-->
-            <ds-flex>
-              <ds-flex-item :width="{ base: LOGOS.LOGO_HEADER_WIDTH }" style="margin-right: 20px">
-                <nuxt-link :to="{ name: 'index' }" v-scroll-to="'.main-navigation'">
-                  <logo logoType="header" />
-                </nuxt-link>
-              </ds-flex-item>
-
-              <!-- hamburger button -->
-              <ds-flex-item class="mobile-hamburger-menu">
-                <client-only>
-                  <div style="display: inline-flex; padding-right: 20px">
-                    <notification-menu />
-                  </div>
-                </client-only>
-                <base-button icon="bars" @click="toggleMobileMenuView" circle />
-              </ds-flex-item>
-            </ds-flex>
-            <!-- search, filter-->
-            <ds-flex class="mobile-menu">
-              <!-- search-field mobile-->
-              <ds-flex-item
-                v-if="isLoggedIn"
-                :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
-                style="padding: 20px"
-              >
-                <search-field />
-              </ds-flex-item>
-              <!-- filter menu mobile-->
-              <ds-flex-item
-                v-if="isLoggedIn"
-                :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
-                style="flex-grow: 0; flex-basis: auto; padding: 20px 0"
-              >
-                <client-only>
-                  <filter-menu v-show="showFilterMenuDropdown" />
-                </client-only>
-              </ds-flex-item>
-            </ds-flex>
-            <!-- switch language, notification, invite, profil -->
-            <ds-flex style="margin: 0 20px">
-              <!-- locale-switch mobile-->
-              <ds-flex-item :class="{ 'hide-mobile-menu': !toggleMobileMenu }">
-                <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
-                :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>
-            <div
-              :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
-              class="mobile-menu footer-mobile"
-            >
-              <!-- dynamic branding menu  -->
-              <ul v-if="isHeaderMenu" class="dynamic-branding-mobil">
-                <li v-for="item in menu" :key="item.name">
-                  <a v-if="item.url" :href="item.url" target="_blank">
-                    <ds-text size="large" bold>
-                      {{ $t(item.nameIdent) }}
-                    </ds-text>
-                  </a>
-                  <nuxt-link v-else :to="item.path">
-                    <ds-text size="large" bold>
-                      {{ $t(item.nameIdent) }}
-                    </ds-text>
-                  </nuxt-link>
-                </li>
-              </ul>
-              <hr />
-              <!-- dynamic footer menu in header  -->
-              <ul class="dynamic-footer-mobil">
-                <li v-for="pageParams in links.FOOTER_LINK_LIST" :key="pageParams.name">
-                  <page-params-link :pageParams="pageParams">
-                    {{ $t(pageParams.internalPage.footerIdent) }}
-                  </page-params-link>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </ds-container>
+      <HeaderMenu :showMobileMenu="showMobileMenu" />
     </div>
     <ds-container>
       <div class="main-container">
         <nuxt />
       </div>
     </ds-container>
-    <page-footer />
+    <page-footer v-if="!showMobileMenu"/>
     <div id="overlay" />
     <client-only>
       <modal />
@@ -217,65 +17,28 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import LOGOS from '../constants/logos.js'
-import headerMenu from '../constants/headerMenu.js'
+import HeaderMenu from '~/components/HeaderMenu/HeaderMenu'
 import seo from '~/mixins/seo'
-import AvatarMenu from '~/components/AvatarMenu/AvatarMenu'
-import FilterMenu from '~/components/FilterMenu/FilterMenu.vue'
-import InviteButton from '~/components/InviteButton/InviteButton'
-import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
-import Logo from '~/components/Logo/Logo'
-import SearchField from '~/components/features/SearchField/SearchField.vue'
 import Modal from '~/components/Modal'
-import NotificationMenu from '~/components/NotificationMenu/NotificationMenu'
 import PageFooter from '~/components/PageFooter/PageFooter'
-import links from '~/constants/links.js'
-import PageParamsLink from '~/components/_new/features/PageParamsLink/PageParamsLink.vue'
 
 export default {
   components: {
-    AvatarMenu,
-    FilterMenu,
-    InviteButton,
-    LocaleSwitch,
-    Logo,
+    HeaderMenu,
     Modal,
-    NotificationMenu,
     PageFooter,
-    PageParamsLink,
-    SearchField,
   },
   mixins: [seo],
   data() {
     return {
       windowWidth: null,
-      links,
-      LOGOS,
-      isHeaderMenu: headerMenu.MENU.length > 0,
-      menu: headerMenu.MENU,
-      mobileSearchVisible: false,
-      toggleMobileMenu: false,
-      inviteRegistration: this.$env.INVITE_REGISTRATION === true, // for 'false' in .env INVITE_REGISTRATION is of type undefined and not(!) boolean false, because of internal handling,
-      categoriesActive: this.$env.CATEGORIES_ACTIVE,
+      maxMobileWidth: 811
     }
   },
   computed: {
-    ...mapGetters({
-      isLoggedIn: 'auth/isLoggedIn',
-    }),
-    showFilterMenuDropdown() {
-      const [firstRoute] = this.$route.matched
-      return firstRoute && firstRoute.name === 'index'
-    },
     showMobileMenu() {
       if (!this.windowWidth) return false
-      return this.windowWidth < 811
-    },
-  },
-  methods: {
-    toggleMobileMenuView() {
-      this.toggleMobileMenu = !this.toggleMobileMenu
+      return this.windowWidth < this.maxMobileWidth
     },
   },
   mounted() {
@@ -286,77 +49,13 @@ export default {
   },
 }
 </script>
-
 <style lang="scss">
 .main-navigation {
   background-color: $color-header-background;
 }
-.margin-right-20 {
-  margin-right: 20px;
-}
-.margin-x {
-  margin-left: 20px;
-  margin-right: 20px;
-  white-space: nowrap;
-}
-.topbar-locale-switch {
-  display: flex;
-  margin-right: $space-xx-small;
-  align-self: center;
-  display: inline-flex;
-}
 .main-container {
   padding-top: 6rem;
   padding-bottom: 5rem;
 }
 
-.main-navigation-flex {
-  align-items: center;
-}
-
-.main-navigation-right {
-  display: flex;
-  justify-content: flex-end;
-}
-.main-navigation-right .desktop-view {
-  float: right;
-}
-.ds-flex-item.mobile-hamburger-menu {
-  margin-left: auto;
-  text-align: right;
-}
-
-.mobile-menu {
-  margin: 0 20px;
-}
-.mobile-search {
-  margin-top: 20px;
-}
-
-.dynamic-branding-mobil,
-.dynamic-footer-mobil {
-  line-height: 30px;
-  font-size: large;
-}
-.dynamic-branding-mobil li {
-  margin: 17px 0;
-}
-
-@media only screen and (max-width: 810px) {
-  #nav-search-box,
-  .main-navigation-right {
-    margin: 10px 0px;
-  }
-  .main-navigation-right {
-    width: 100%;
-  }
-  .hide-mobile-menu {
-    display: none;
-  }
-}
-@media only screen and (min-width: 810px) {
-  .main-navigation-right {
-    width: 100%;
-  }
-}
 </style>

From 15561cb94f8768e93846c25945c935ae83977553 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Sat, 22 Oct 2022 09:36:18 +0200
Subject: [PATCH 3/5] fix lint

---
 webapp/components/HeaderMenu/HeaderMenu.vue | 363 ++++++++++----------
 webapp/layouts/default.vue                  |   7 +-
 2 files changed, 177 insertions(+), 193 deletions(-)

diff --git a/webapp/components/HeaderMenu/HeaderMenu.vue b/webapp/components/HeaderMenu/HeaderMenu.vue
index c868482e4..8876338ee 100644
--- a/webapp/components/HeaderMenu/HeaderMenu.vue
+++ b/webapp/components/HeaderMenu/HeaderMenu.vue
@@ -1,202 +1,188 @@
 <template>
-    <ds-container class="main-navigation-container" style="padding: 10px 10px">
-        <div>
-            <!-- header menu -->
-            <ds-flex v-if="!showMobileMenu" class="main-navigation-flex">
-            <!-- logo -->
-            <ds-flex-item :width="{ base: LOGOS.LOGO_HEADER_WIDTH }" style="margin-right: 20px">
-                <a
-                v-if="LOGOS.LOGO_HEADER_CLICK.externalLink"
-                :href="LOGOS.LOGO_HEADER_CLICK.externalLink"
-                >
-                <logo logoType="header" />
-                </a>
-                <nuxt-link
-                v-else
-                :to="LOGOS.LOGO_HEADER_CLICK.internalPath.to"
-                v-scroll-to="LOGOS.LOGO_HEADER_CLICK.internalPath.scrollTo"
-                >
-                <logo logoType="header" />
-                </nuxt-link>
-            </ds-flex-item>
-            <!-- dynamic-brand-menu -->
-            <ds-flex-item
-                v-for="item in menu"
-                :key="item.name"
-                class="branding-menu"
-                :width="{ base: 'auto' }"
-                style="margin-right: 20px"
-            >
-                <a v-if="item.url" :href="item.url" target="_blank">
-                <ds-text size="large" bold>
-                    {{ $t(item.nameIdent) }}
-                </ds-text>
-                </a>
-                <nuxt-link v-else :to="item.path">
-                <ds-text size="large" bold>
-                    {{ $t(item.nameIdent) }}
-                </ds-text>
-                </nuxt-link>
-            </ds-flex-item>
+  <ds-container class="main-navigation-container" style="padding: 10px 10px">
+    <div>
+      <!-- header menu -->
+      <ds-flex v-if="!showMobileMenu" class="main-navigation-flex">
+        <!-- logo -->
+        <ds-flex-item :width="{ base: LOGOS.LOGO_HEADER_WIDTH }" style="margin-right: 20px">
+          <a
+            v-if="LOGOS.LOGO_HEADER_CLICK.externalLink"
+            :href="LOGOS.LOGO_HEADER_CLICK.externalLink"
+          >
+            <logo logoType="header" />
+          </a>
+          <nuxt-link
+            v-else
+            :to="LOGOS.LOGO_HEADER_CLICK.internalPath.to"
+            v-scroll-to="LOGOS.LOGO_HEADER_CLICK.internalPath.scrollTo"
+          >
+            <logo logoType="header" />
+          </nuxt-link>
+        </ds-flex-item>
+        <!-- dynamic-brand-menu -->
+        <ds-flex-item
+          v-for="item in menu"
+          :key="item.name"
+          class="branding-menu"
+          :width="{ base: 'auto' }"
+          style="margin-right: 20px"
+        >
+          <a v-if="item.url" :href="item.url" target="_blank">
+            <ds-text size="large" bold>
+              {{ $t(item.nameIdent) }}
+            </ds-text>
+          </a>
+          <nuxt-link v-else :to="item.path">
+            <ds-text size="large" bold>
+              {{ $t(item.nameIdent) }}
+            </ds-text>
+          </nuxt-link>
+        </ds-flex-item>
 
-            <!-- search-field -->
-            <ds-flex-item
-                v-if="isLoggedIn"
-                id="nav-search-box"
-                class="header-search"
-                :width="{
-                base: '45%',
-                sm: '40%',
-                md: isHeaderMenu ? 'auto' : '40%',
-                lg: isHeaderMenu ? 'auto' : '50%',
-                }"
-                style="flex-shrink: 0; flex-grow: 1"
-            >
-                <search-field />
-            </ds-flex-item>
-            <!-- filter-menu 
+        <!-- search-field -->
+        <ds-flex-item
+          v-if="isLoggedIn"
+          id="nav-search-box"
+          class="header-search"
+          :width="{
+            base: '45%',
+            sm: '40%',
+            md: isHeaderMenu ? 'auto' : '40%',
+            lg: isHeaderMenu ? 'auto' : '50%',
+          }"
+          style="flex-shrink: 0; flex-grow: 1"
+        >
+          <search-field />
+        </ds-flex-item>
+        <!-- filter-menu 
                 TODO: Filter is only visible on index    
             -->
-            <ds-flex-item
-                v-if="isLoggedIn"
-                style="flex-grow: 0; flex-basis: auto"
-            >
+        <ds-flex-item v-if="isLoggedIn" style="flex-grow: 0; flex-basis: auto">
+          <client-only>
+            <filter-menu v-show="showFilterMenuDropdown" />
+          </client-only>
+        </ds-flex-item>
+        <!-- locale-switch -->
+        <ds-flex-item style="flex-basis: auto">
+          <div class="main-navigation-right" style="flex-basis: auto">
+            <locale-switch class="topbar-locale-switch" placement="top" offset="8" />
+            <template v-if="isLoggedIn">
+              <client-only>
+                <!-- notification-menu -->
+                <notification-menu placement="top" />
+              </client-only>
+              <div v-if="inviteRegistration">
                 <client-only>
-                <filter-menu v-show="showFilterMenuDropdown" />
+                  <!-- invite-button -->
+                  <invite-button placement="top" />
                 </client-only>
-            </ds-flex-item>
-            <!-- locale-switch -->
-            <ds-flex-item
-                style="flex-basis: auto"
-            >
-                <div
-                class="main-navigation-right"
-                style="flex-basis: auto"
-                >
-                <locale-switch class="topbar-locale-switch" placement="top" offset="8" />
-                <template v-if="isLoggedIn">
-                    <client-only>
-                    <!-- notification-menu -->
-                    <notification-menu placement="top" />
-                    </client-only>
-                    <div v-if="inviteRegistration">
-                    <client-only>
-                        <!-- invite-button -->
-                        <invite-button placement="top" />
-                    </client-only>
-                    </div>
-                    <client-only>
-                    <!-- avatar-menu -->
-                    <avatar-menu placement="top" />
-                    </client-only>
-                </template>
-                </div>
-            </ds-flex-item>
-            </ds-flex>
+              </div>
+              <client-only>
+                <!-- avatar-menu -->
+                <avatar-menu placement="top" />
+              </client-only>
+            </template>
+          </div>
+        </ds-flex-item>
+      </ds-flex>
 
-            <!-- mobile header menu -->
-            <div v-else>
-            <!-- logo, hamburger-->
-            <ds-flex>
-                <ds-flex-item :width="{ base: LOGOS.LOGO_HEADER_WIDTH }" style="margin-right: 20px">
-                <nuxt-link :to="{ name: 'index' }" v-scroll-to="'.main-navigation'">
-                    <logo logoType="header" />
-                </nuxt-link>
-                </ds-flex-item>
+      <!-- mobile header menu -->
+      <div v-else>
+        <!-- logo, hamburger-->
+        <ds-flex>
+          <ds-flex-item :width="{ base: LOGOS.LOGO_HEADER_WIDTH }" style="margin-right: 20px">
+            <nuxt-link :to="{ name: 'index' }" v-scroll-to="'.main-navigation'">
+              <logo logoType="header" />
+            </nuxt-link>
+          </ds-flex-item>
 
-                <!-- hamburger button -->
-                <ds-flex-item class="mobile-hamburger-menu">
-                <client-only>
-                    <div style="display: inline-flex; padding-right: 20px">
-                    <notification-menu />
-                    </div>
-                </client-only>
-                <base-button icon="bars" @click="toggleMobileMenuView" circle />
-                </ds-flex-item>
-            </ds-flex>
-            <!-- search, filter-->
-            <ds-flex class="mobile-menu">
-                <!-- search-field mobile-->
-                <ds-flex-item
-                v-if="isLoggedIn"
-                :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
-                style="padding: 20px"
-                >
-                <search-field />
-                </ds-flex-item>
-                <!-- filter menu mobile-->
-                <ds-flex-item
-                v-if="isLoggedIn"
-                :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
-                style="flex-grow: 0; flex-basis: auto; padding: 20px 0"
-                >
-                <client-only>
-                    <filter-menu v-show="showFilterMenuDropdown" />
-                </client-only>
-                </ds-flex-item>
-            </ds-flex>
-            <!-- switch language, notification, invite, profil -->
-            <ds-flex style="margin: 0 20px">
-                <!-- locale-switch mobile-->
-                <ds-flex-item :class="{ 'hide-mobile-menu': !toggleMobileMenu }">
-                <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
-                :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>
-            <div
-                :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
-                class="mobile-menu footer-mobile"
-            >
-                <!-- dynamic branding menu  -->
-                <ul v-if="isHeaderMenu" class="dynamic-branding-mobil">
-                <li v-for="item in menu" :key="item.name">
-                    <a v-if="item.url" :href="item.url" target="_blank">
-                    <ds-text size="large" bold>
-                        {{ $t(item.nameIdent) }}
-                    </ds-text>
-                    </a>
-                    <nuxt-link v-else :to="item.path">
-                    <ds-text size="large" bold>
-                        {{ $t(item.nameIdent) }}
-                    </ds-text>
-                    </nuxt-link>
-                </li>
-                </ul>
-                <hr />
-                <!-- dynamic footer menu in header  -->
-                <ul class="dynamic-footer-mobil">
-                <li v-for="pageParams in links.FOOTER_LINK_LIST" :key="pageParams.name">
-                    <page-params-link :pageParams="pageParams">
-                    {{ $t(pageParams.internalPage.footerIdent) }}
-                    </page-params-link>
-                </li>
-                </ul>
-            </div>
-            </div>
+          <!-- hamburger button -->
+          <ds-flex-item class="mobile-hamburger-menu">
+            <client-only>
+              <div style="display: inline-flex; padding-right: 20px">
+                <notification-menu />
+              </div>
+            </client-only>
+            <base-button icon="bars" @click="toggleMobileMenuView" circle />
+          </ds-flex-item>
+        </ds-flex>
+        <!-- search, filter-->
+        <ds-flex class="mobile-menu">
+          <!-- search-field mobile-->
+          <ds-flex-item
+            v-if="isLoggedIn"
+            :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
+            style="padding: 20px"
+          >
+            <search-field />
+          </ds-flex-item>
+          <!-- filter menu mobile-->
+          <ds-flex-item
+            v-if="isLoggedIn"
+            :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
+            style="flex-grow: 0; flex-basis: auto; padding: 20px 0"
+          >
+            <client-only>
+              <filter-menu v-show="showFilterMenuDropdown" />
+            </client-only>
+          </ds-flex-item>
+        </ds-flex>
+        <!-- switch language, notification, invite, profil -->
+        <ds-flex style="margin: 0 20px">
+          <!-- locale-switch mobile-->
+          <ds-flex-item :class="{ 'hide-mobile-menu': !toggleMobileMenu }">
+            <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 :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>
+        <div :class="{ 'hide-mobile-menu': !toggleMobileMenu }" class="mobile-menu footer-mobile">
+          <!-- dynamic branding menu  -->
+          <ul v-if="isHeaderMenu" class="dynamic-branding-mobil">
+            <li v-for="item in menu" :key="item.name">
+              <a v-if="item.url" :href="item.url" target="_blank">
+                <ds-text size="large" bold>
+                  {{ $t(item.nameIdent) }}
+                </ds-text>
+              </a>
+              <nuxt-link v-else :to="item.path">
+                <ds-text size="large" bold>
+                  {{ $t(item.nameIdent) }}
+                </ds-text>
+              </nuxt-link>
+            </li>
+          </ul>
+          <hr />
+          <!-- dynamic footer menu in header  -->
+          <ul class="dynamic-footer-mobil">
+            <li v-for="pageParams in links.FOOTER_LINK_LIST" :key="pageParams.name">
+              <page-params-link :pageParams="pageParams">
+                {{ $t(pageParams.internalPage.footerIdent) }}
+              </page-params-link>
+            </li>
+          </ul>
         </div>
-    </ds-container>
+      </div>
+    </div>
+  </ds-container>
 </template>
 <script>
 import { mapGetters } from 'vuex'
 import LOGOS from '~/constants/logos.js'
-import headerMenu from '~/constants/headerMenu.js' 
+import headerMenu from '~/constants/headerMenu.js'
 import AvatarMenu from '~/components/AvatarMenu/AvatarMenu'
 import FilterMenu from '~/components/FilterMenu/FilterMenu.vue'
 import InviteButton from '~/components/InviteButton/InviteButton'
@@ -251,7 +237,6 @@ export default {
 </script>
 
 <style lang="scss">
- 
 .margin-right-20 {
   margin-right: 20px;
 }
@@ -295,6 +280,6 @@ export default {
   margin: 17px 0;
 }
 .hide-mobile-menu {
-    display: none;
+  display: none;
 }
-</style>    
\ No newline at end of file
+</style>
diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index e268bdd64..3d0e8ba02 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="layout-default">
     <div class="main-navigation">
-      <HeaderMenu :showMobileMenu="showMobileMenu" />
+      <header-menu :showMobileMenu="showMobileMenu" />
     </div>
     <ds-container>
       <div class="main-container">
         <nuxt />
       </div>
     </ds-container>
-    <page-footer v-if="!showMobileMenu"/>
+    <page-footer v-if="!showMobileMenu" />
     <div id="overlay" />
     <client-only>
       <modal />
@@ -32,7 +32,7 @@ export default {
   data() {
     return {
       windowWidth: null,
-      maxMobileWidth: 811
+      maxMobileWidth: 811,
     }
   },
   computed: {
@@ -57,5 +57,4 @@ export default {
   padding-top: 6rem;
   padding-bottom: 5rem;
 }
-
 </style>

From ac8490eb952400b6af2639ad22a86017d8422efa Mon Sep 17 00:00:00 2001
From: Alexander Friedland <ogerly@users.noreply.github.com>
Date: Thu, 27 Oct 2022 08:56:43 +0200
Subject: [PATCH 4/5] Update webapp/layouts/default.vue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Wolfgang Huß <wolle.huss@pjannto.com>
---
 webapp/layouts/default.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index 3d0e8ba02..c8cc97afa 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -38,7 +38,7 @@ export default {
   computed: {
     showMobileMenu() {
       if (!this.windowWidth) return false
-      return this.windowWidth < this.maxMobileWidth
+      return this.windowWidth <= this.maxMobileWidth
     },
   },
   mounted() {

From c875148229ec7fb3e4f73755a43e1a50e23a31bc Mon Sep 17 00:00:00 2001
From: Alexander Friedland <ogerly@users.noreply.github.com>
Date: Thu, 27 Oct 2022 08:56:49 +0200
Subject: [PATCH 5/5] Update webapp/layouts/default.vue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Wolfgang Huß <wolle.huss@pjannto.com>
---
 webapp/layouts/default.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index c8cc97afa..06c3315cd 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -32,7 +32,7 @@ export default {
   data() {
     return {
       windowWidth: null,
-      maxMobileWidth: 811,
+      maxMobileWidth: 810,
     }
   },
   computed: {