From 5200a2c6fd589f8fff480ea0751a51535adba087 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 19 Oct 2022 12:19:47 +0200
Subject: [PATCH 01/11] fist step mobile footer menu to heder menu

---
 webapp/components/PageFooter/PageFooter.vue |  5 ++
 webapp/layouts/default.vue                  | 72 ++++++++++++++++++---
 2 files changed, 68 insertions(+), 9 deletions(-)

diff --git a/webapp/components/PageFooter/PageFooter.vue b/webapp/components/PageFooter/PageFooter.vue
index c71fc4b5c..45ac1ab5a 100644
--- a/webapp/components/PageFooter/PageFooter.vue
+++ b/webapp/components/PageFooter/PageFooter.vue
@@ -50,4 +50,9 @@ export default {
   margin-left: 0.2rem;
   margin-right: 0.2rem;
 }
+@media only screen and (max-width: 730px) {
+  .ds-footer {
+    display: none;
+  }
+}
 </style>
diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index 8a0e7aa34..61e38dddf 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -4,12 +4,13 @@
       <ds-container class="main-navigation-container" style="padding: 10px 10px">
         <div>
           <ds-flex class="main-navigation-flex">
+             <!-- logo -->
             <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>
-
+             <!-- dynamic-brand-menu -->
             <ds-flex-item
               v-for="item in menu"
               :key="item.name"
@@ -28,6 +29,7 @@
                 </ds-text>
               </nuxt-link>
             </ds-flex-item>
+            <!-- categories-menu -->
             <ds-flex-item
               v-if="categoriesActive && isLoggedIn"
               :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
@@ -37,26 +39,29 @@
                 <categories-menu></categories-menu>
               </client-only>
             </ds-flex-item>
+             <!-- hamburger-menu -->
             <ds-flex-item
-              :width="{ base: '40%', sm: '40%', md: '40%', lg: '0%' }"
+              :width="{ base: '20%', sm: '40%', md: '40%', lg: '0%' }"
               class="mobile-hamburger-menu"
             >
               <base-button icon="bars" @click="toggleMobileMenuView" circle />
             </ds-flex-item>
+            <!-- search-field -->
             <ds-flex-item
+              v-if="isLoggedIn"
+              id="nav-search-box"
+              :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
               :width="{
                 base: '45%',
                 sm: '45%',
                 md: isHeaderMenu ? 'auto' : '45%',
                 lg: isHeaderMenu ? 'auto' : '50%',
               }"
-              :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
               style="flex-shrink: 0; flex-grow: 1"
-              id="nav-search-box"
-              v-if="isLoggedIn"
             >
               <search-field />
             </ds-flex-item>
+             <!-- filter-menu -->
             <ds-flex-item
               v-if="isLoggedIn"
               :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
@@ -66,6 +71,7 @@
                 <filter-menu v-show="showFilterMenuDropdown" />
               </client-only>
             </ds-flex-item>
+             <!-- locale-switch -->
             <ds-flex-item
               style="flex-basis: auto"
               :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
@@ -81,21 +87,52 @@
                 <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>
+          <!-- avatar-menu -->
+          <ds-flex>
+          <ds-flex-item
+              style="flex-basis: auto"
+              :class="{ 'hide-mobile-menu': !toggleMobileMenu}"
+              class="footer-mobile"
+            >
+              <ul>
+                <li v-for="pageParams in links.FOOTER_LINK_LIST" :key="pageParams.name">
+                  <!-- {{pageParams}} -->
+                  <!-- <b>{{pageParams.name}}</b> -->
+                   <a v-if="pageParams.externalLink !== 'null'" href="pageParams.externalLink" target="_blank">
+                    {{pageParams.name}}
+                    </a>
+                   <nuxt-link v-else :to="pageParams.internalPage.pageRoute">
+                    
+                    {{pageParams.name}}
+                   </nuxt-link>
+                  <!-- {{pageParams.externalLink ? pageParams.externalLink : 'null'}}
+                  {{pageParams.internalPage.pageRoute ? pageParams.internalPage.pageRoute : 'null'}} -->
+
+                  
+                </li>
+              </ul>
+            </ds-flex-item>
           </ds-flex>
         </div>
+       
       </ds-container>
     </div>
     <ds-container>
@@ -126,6 +163,7 @@ import PageFooter from '~/components/PageFooter/PageFooter'
 import AvatarMenu from '~/components/AvatarMenu/AvatarMenu'
 import InviteButton from '~/components/InviteButton/InviteButton'
 import CategoriesMenu from '~/components/FilterMenu/CategoriesMenu.vue'
+import links from '~/constants/links.js'
 
 export default {
   components: {
@@ -143,6 +181,7 @@ export default {
   mixins: [seo],
   data() {
     return {
+      links,
       LOGOS,
       isHeaderMenu: headerMenu.MENU.length > 0,
       menu: headerMenu.MENU,
@@ -207,18 +246,33 @@ export default {
   margin-left: auto;
   text-align: right;
 }
-@media only screen and (min-width: 730px) {
-  .mobile-hamburger-menu {
-    display: none;
-  }
+
+.footer-mobile ul {
+  margin-left: 20px;
+  line-height: 30px;
+  font-size: large;
 }
+ 
 @media only screen and (max-width: 730px) {
   #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: 730px) {
+  .footer-mobile,
+  .mobile-hamburger-menu {
+    display: none;
+  }
+ .main-navigation-right {
+   width: 100%;
+ }
+ 
+}
 </style>

From b6fa79594c0787697efca2c526b49685c86bf233 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 19 Oct 2022 12:58:50 +0200
Subject: [PATCH 02/11] add components PageParamsLink.vue in layouts default

---
 webapp/layouts/default.vue | 24 +++++++++---------------
 1 file changed, 9 insertions(+), 15 deletions(-)

diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index 61e38dddf..2320e3e43 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -53,8 +53,8 @@
               :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
               :width="{
                 base: '45%',
-                sm: '45%',
-                md: isHeaderMenu ? 'auto' : '45%',
+                sm: '40%',
+                md: isHeaderMenu ? 'auto' : '40%',
                 lg: isHeaderMenu ? 'auto' : '50%',
               }"
               style="flex-shrink: 0; flex-grow: 1"
@@ -107,6 +107,7 @@
           </ds-flex>
           <!-- avatar-menu -->
           <ds-flex>
+            <!-- Footer menu if mobile -->
           <ds-flex-item
               style="flex-basis: auto"
               :class="{ 'hide-mobile-menu': !toggleMobileMenu}"
@@ -114,19 +115,9 @@
             >
               <ul>
                 <li v-for="pageParams in links.FOOTER_LINK_LIST" :key="pageParams.name">
-                  <!-- {{pageParams}} -->
-                  <!-- <b>{{pageParams.name}}</b> -->
-                   <a v-if="pageParams.externalLink !== 'null'" href="pageParams.externalLink" target="_blank">
-                    {{pageParams.name}}
-                    </a>
-                   <nuxt-link v-else :to="pageParams.internalPage.pageRoute">
-                    
-                    {{pageParams.name}}
-                   </nuxt-link>
-                  <!-- {{pageParams.externalLink ? pageParams.externalLink : 'null'}}
-                  {{pageParams.internalPage.pageRoute ? pageParams.internalPage.pageRoute : 'null'}} -->
-
-                  
+                  <page-params-link :pageParams="pageParams">
+                    {{ $t(pageParams.internalPage.footerIdent) }}
+                  </page-params-link>
                 </li>
               </ul>
             </ds-flex-item>
@@ -164,6 +155,8 @@ import AvatarMenu from '~/components/AvatarMenu/AvatarMenu'
 import InviteButton from '~/components/InviteButton/InviteButton'
 import CategoriesMenu from '~/components/FilterMenu/CategoriesMenu.vue'
 import links from '~/constants/links.js'
+import PageParamsLink from '~/components/_new/features/PageParamsLink/PageParamsLink.vue'
+
 
 export default {
   components: {
@@ -177,6 +170,7 @@ export default {
     PageFooter,
     InviteButton,
     CategoriesMenu,
+    PageParamsLink,
   },
   mixins: [seo],
   data() {

From 41e0cc5d3c666b4308180d895707aa0df265ed87 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 19 Oct 2022 14:24:04 +0200
Subject: [PATCH 03/11] dynamic header menu to mobile version

---
 webapp/layouts/default.vue | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index 2320e3e43..5d5e6dc6a 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -15,6 +15,7 @@
               v-for="item in menu"
               :key="item.name"
               :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
+              class="branding-menu"
               :width="{ base: 'auto' }"
               style="margin-right: 20px"
             >
@@ -33,6 +34,7 @@
             <ds-flex-item
               v-if="categoriesActive && isLoggedIn"
               :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
+              class="branding-menu"
               style="flex-grow: 0; flex-basis: auto; margin-right: 20px"
             >
               <client-only>
@@ -113,6 +115,39 @@
               :class="{ 'hide-mobile-menu': !toggleMobileMenu}"
               class="footer-mobile"
             >
+            <!-- dynamic branding menu  -->
+            <ul v-if="isHeaderMenu" >
+              <li
+                v-for="item in menu" :key="item.name"
+              >
+              {{item}}
+                <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>
+            <!-- dynamic branding menu Categories / Topic  -->
+            <ul>
+              <li 
+              v-if="categoriesActive && isLoggedIn"
+              :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
+              style="flex-grow: 0; flex-basis: auto; margin-right: 20px"
+            >
+              <client-only>
+                <categories-menu></categories-menu>
+              </client-only>
+           
+              </li>
+            </ul>
+            <hr />
+            <!-- dynamic footer menu in header  -->
               <ul>
                 <li v-for="pageParams in links.FOOTER_LINK_LIST" :key="pageParams.name">
                   <page-params-link :pageParams="pageParams">
@@ -255,6 +290,7 @@ export default {
   .main-navigation-right {
     width: 100%;
   }
+  .branding-menu,
   .hide-mobile-menu {
     display: none;
   }

From 3aebace584d2c6ebb682cf6c37f6dc9478dc23ce Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 19 Oct 2022 14:24:55 +0200
Subject: [PATCH 04/11] fix lint

---
 webapp/layouts/default.vue | 91 ++++++++++++++++++--------------------
 1 file changed, 42 insertions(+), 49 deletions(-)

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

From 000352f3cde00f0822b782e516d4f9cbb6436893 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 19 Oct 2022 21:22:43 +0200
Subject: [PATCH 05/11] filter menu only show on index

---
 webapp/layouts/default.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index 77c961b86..7c961e4e8 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -63,7 +63,9 @@
             >
               <search-field />
             </ds-flex-item>
-            <!-- filter-menu -->
+            <!-- filter-menu 
+                TODO: Filter is only visible on index    
+            -->
             <ds-flex-item
               v-if="isLoggedIn"
               :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
@@ -106,7 +108,6 @@
               </div>
             </ds-flex-item>
           </ds-flex>
-          <!-- avatar-menu -->
           <ds-flex>
             <!-- Footer menu if mobile -->
             <ds-flex-item
@@ -270,7 +271,7 @@ export default {
   text-align: right;
 }
 
-.footer-mobile ul {
+.ds-flex-item.footer-mobile ul {
   margin-left: 20px;
   line-height: 30px;
   font-size: large;

From 5257535b85e888cd325b4e2df6a71b82b0558cdb Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 20 Oct 2022 09:40:15 +0200
Subject: [PATCH 06/11] item output removed

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

diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index 7c961e4e8..1080b31e2 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -118,7 +118,6 @@
               <!-- dynamic branding menu  -->
               <ul v-if="isHeaderMenu">
                 <li v-for="item in menu" :key="item.name">
-                  {{ item }}
                   <a v-if="item.url" :href="item.url" target="_blank">
                     <ds-text size="large" bold>
                       {{ $t(item.nameIdent) }}

From e4c3f9b729caf50a451e86eb947f49d7f1a97ded Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 20 Oct 2022 09:43:55 +0200
Subject: [PATCH 07/11] mobile hamburger menu if 810px

---
 webapp/layouts/default.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index 1080b31e2..ea980cdf8 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -276,7 +276,7 @@ export default {
   font-size: large;
 }
 
-@media only screen and (max-width: 730px) {
+@media only screen and (max-width: 810px) {
   #nav-search-box,
   .main-navigation-right {
     margin: 10px 0px;
@@ -289,7 +289,7 @@ export default {
     display: none;
   }
 }
-@media only screen and (min-width: 730px) {
+@media only screen and (min-width: 810px) {
   .footer-mobile,
   .mobile-hamburger-menu {
     display: none;

From ef316d5c36196bebbcb053456b8dc4b95de0114b Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 21 Oct 2022 12:24:38 +0200
Subject: [PATCH 08/11] fix lint

---
 webapp/layouts/default.vue | 61 ++++++++++++++++++++------------------
 1 file changed, 32 insertions(+), 29 deletions(-)

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

From b467e6846a5fa5a0c128acd6e228d406a0ad481f Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 21 Oct 2022 12:30:45 +0200
Subject: [PATCH 09/11] comment out headerMenu.js

---
 webapp/constants/headerMenu.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/webapp/constants/headerMenu.js b/webapp/constants/headerMenu.js
index cf5069f39..6d0a0afad 100644
--- a/webapp/constants/headerMenu.js
+++ b/webapp/constants/headerMenu.js
@@ -1,12 +1,12 @@
 export default {
   MENU: [
-    {
-      nameIdent: 'Über Ocelot',
-      path: '/',
-    },
-    {
-      nameIdent: 'About',
-      url: 'https://ocelot.org',
-    },
+    // {
+    //   nameIdent: 'nameIdent',
+    //   path: '/',
+    // },
+    // {
+    //   nameIdent: 'nameIdent',
+    //   url: 'https://ocelot.social',
+    // },
   ],
 }

From bdf848b237ee109f79cf3e1b93bb9220fcc585cc Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 21 Oct 2022 12:50:13 +0200
Subject: [PATCH 10/11] set this.windowWidth, and change computed
 showMobileMenu

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

diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index f1fbd839b..6e709a6d9 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -259,6 +259,7 @@ export default {
       return firstRoute && firstRoute.name === 'index'
     },
     showMobileMenu() {
+      if (!this.windowWidth) return false
       return this.windowWidth < 810
     },
   },
@@ -268,6 +269,7 @@ export default {
     },
   },
   mounted() {
+    this.windowWidth = window.innerWidth
     window.addEventListener('resize', () => {
       this.windowWidth = window.innerWidth
     })

From fc7bbede1d580bc07164d43a46b54218ddeb9533 Mon Sep 17 00:00:00 2001
From: Alexander Friedland <ogerly@users.noreply.github.com>
Date: Fri, 21 Oct 2022 13:44:22 +0200
Subject: [PATCH 11/11] Update webapp/components/PageFooter/PageFooter.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/components/PageFooter/PageFooter.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/components/PageFooter/PageFooter.vue b/webapp/components/PageFooter/PageFooter.vue
index 45ac1ab5a..798d52f47 100644
--- a/webapp/components/PageFooter/PageFooter.vue
+++ b/webapp/components/PageFooter/PageFooter.vue
@@ -50,7 +50,7 @@ export default {
   margin-left: 0.2rem;
   margin-right: 0.2rem;
 }
-@media only screen and (max-width: 730px) {
+@media only screen and (max-width: 810px) {
   .ds-footer {
     display: none;
   }