From 3040f216d314677040a4338476f54018403658d3 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Sun, 22 Jan 2023 11:19:22 +0100
Subject: [PATCH 01/27] hide navbar by scroll down, show navbar by scroll up

---
 webapp/components/HeaderMenu/HeaderMenu.vue | 22 ++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/webapp/components/HeaderMenu/HeaderMenu.vue b/webapp/components/HeaderMenu/HeaderMenu.vue
index 7f24eeb81..2cd037eaa 100644
--- a/webapp/components/HeaderMenu/HeaderMenu.vue
+++ b/webapp/components/HeaderMenu/HeaderMenu.vue
@@ -1,5 +1,5 @@
 <template>
-  <ds-container class="main-navigation-container" style="padding: 10px 10px">
+  <ds-container class="main-navigation-container"  :class="{ 'hide-navbar': hideNavbar }" id="navbar">
     <div>
       <!-- header menu -->
       <ds-flex v-if="!showMobileMenu" class="main-navigation-flex">
@@ -237,6 +237,8 @@ export default {
   },
   data() {
     return {
+      hideNavbar: false,
+      prevScrollpos: 0,
       links,
       LOGOS,
       SHOW_GROUP_BUTTON_IN_HEADER,
@@ -258,14 +260,32 @@ export default {
     },
   },
   methods: {
+    handleScroll() {
+      let currentScrollPos = window.pageYOffset;
+      if (this.prevScrollpos > currentScrollPos) {
+        this.hideNavbar = false;
+      } else {
+        this.hideNavbar = true;
+      }
+      this.prevScrollpos = currentScrollPos;
+    },
     toggleMobileMenuView() {
       this.toggleMobileMenu = !this.toggleMobileMenu
     },
   },
+  mounted() {
+    window.addEventListener('scroll', this.handleScroll);
+  },
 }
 </script>
 
 <style lang="scss">
+#navbar {
+  padding: 10px 10px;
+}
+.hide-navbar {
+  display: none;
+}
 .margin-right-20 {
   margin-right: 20px;
 }

From 5765f4747afc0a69f52695b2926db7f5e7b89459 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Sun, 22 Jan 2023 11:45:22 +0100
Subject: [PATCH 02/27] fix lint

---
 webapp/components/HeaderMenu/HeaderMenu.vue | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/webapp/components/HeaderMenu/HeaderMenu.vue b/webapp/components/HeaderMenu/HeaderMenu.vue
index 2cd037eaa..3abc97f1c 100644
--- a/webapp/components/HeaderMenu/HeaderMenu.vue
+++ b/webapp/components/HeaderMenu/HeaderMenu.vue
@@ -1,5 +1,9 @@
 <template>
-  <ds-container class="main-navigation-container"  :class="{ 'hide-navbar': hideNavbar }" id="navbar">
+  <ds-container
+    class="main-navigation-container"
+    :class="{ 'hide-navbar': hideNavbar }"
+    id="navbar"
+  >
     <div>
       <!-- header menu -->
       <ds-flex v-if="!showMobileMenu" class="main-navigation-flex">
@@ -261,20 +265,20 @@ export default {
   },
   methods: {
     handleScroll() {
-      let currentScrollPos = window.pageYOffset;
+      const currentScrollPos = window.pageYOffset
       if (this.prevScrollpos > currentScrollPos) {
-        this.hideNavbar = false;
+        this.hideNavbar = false
       } else {
-        this.hideNavbar = true;
+        this.hideNavbar = true
       }
-      this.prevScrollpos = currentScrollPos;
+      this.prevScrollpos = currentScrollPos
     },
     toggleMobileMenuView() {
       this.toggleMobileMenu = !this.toggleMobileMenu
     },
   },
   mounted() {
-    window.addEventListener('scroll', this.handleScroll);
+    window.addEventListener('scroll', this.handleScroll)
   },
 }
 </script>

From b9067d79962eecf342140bc7a9ef4b06cfa1b62b Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Mon, 23 Jan 2023 20:28:20 +0100
Subject: [PATCH 03/27] filter menu in content page

---
 webapp/components/FilterMenu/FilterMenu.vue   | 34 ++----------
 .../FilterMenu/FilterMenuComponent.vue        | 46 ++++++++++++++++
 webapp/layouts/default.vue                    |  2 +-
 webapp/pages/index.vue                        | 54 ++++++++++++++++++-
 4 files changed, 103 insertions(+), 33 deletions(-)
 create mode 100644 webapp/components/FilterMenu/FilterMenuComponent.vue

diff --git a/webapp/components/FilterMenu/FilterMenu.vue b/webapp/components/FilterMenu/FilterMenu.vue
index 28cda6669..2d4d836d5 100644
--- a/webapp/components/FilterMenu/FilterMenu.vue
+++ b/webapp/components/FilterMenu/FilterMenu.vue
@@ -11,15 +11,7 @@
       <base-icon class="dropdown-arrow" name="angle-down" />
     </base-button>
     <template slot="popover">
-      <div class="filter-menu-options">
-        <h2 class="title">{{ $t('filter-menu.filter-by') }}</h2>
-        <following-filter />
-        <categories-filter v-if="categoriesActive" :showMobileMenu="showMobileMenu" />
-      </div>
-      <div class="filter-menu-options">
-        <h2 class="title">{{ $t('filter-menu.order-by') }}</h2>
-        <order-by-filter />
-      </div>
+      <filter-menu-component :showMobileMenu="showMobileMenu" />
     </template>
   </dropdown>
 </template>
@@ -27,21 +19,12 @@
 <script>
 import Dropdown from '~/components/Dropdown'
 import { mapGetters } from 'vuex'
-import FollowingFilter from './FollowingFilter'
-import OrderByFilter from './OrderByFilter'
-import CategoriesFilter from './CategoriesFilter'
+import FilterMenuComponent from './FilterMenuComponent'
 
 export default {
   components: {
     Dropdown,
-    FollowingFilter,
-    OrderByFilter,
-    CategoriesFilter,
-  },
-  data() {
-    return {
-      categoriesActive: this.$env.CATEGORIES_ACTIVE,
-    }
+    FilterMenuComponent,
   },
   props: {
     placement: { type: String },
@@ -55,14 +38,3 @@ export default {
   },
 }
 </script>
-
-<style lang="scss">
-.filter-menu-options {
-  max-width: $size-max-width-filter-menu;
-  padding: $space-small $space-x-small;
-
-  > .title {
-    font-size: $font-size-large;
-  }
-}
-</style>
diff --git a/webapp/components/FilterMenu/FilterMenuComponent.vue b/webapp/components/FilterMenu/FilterMenuComponent.vue
new file mode 100644
index 000000000..3f22aaed8
--- /dev/null
+++ b/webapp/components/FilterMenu/FilterMenuComponent.vue
@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <div class="filter-menu-options">
+      <h2 class="title">{{ $t('filter-menu.filter-by') }}</h2>
+      <following-filter />
+      <categories-filter v-if="categoriesActive" :showMobileMenu="showMobileMenu" />
+    </div>
+    <div class="filter-menu-options">
+      <h2 class="title">{{ $t('filter-menu.order-by') }}</h2>
+      <order-by-filter />
+    </div>
+  </div>
+</template>
+
+<script>
+import FollowingFilter from './FollowingFilter'
+import OrderByFilter from './OrderByFilter'
+import CategoriesFilter from './CategoriesFilter'
+
+export default {
+  components: {
+    FollowingFilter,
+    OrderByFilter,
+    CategoriesFilter,
+  },
+  data() {
+    return {
+      categoriesActive: this.$env.CATEGORIES_ACTIVE,
+    }
+  },
+  props: {
+    showMobileMenu: { type: Boolean, default: false },
+  },
+}
+</script>
+
+<style lang="scss">
+.filter-menu-options {
+  max-width: $size-max-width-filter-menu;
+  padding: $space-small $space-x-small;
+
+  > .title {
+    font-size: $font-size-large;
+  }
+}
+</style>
diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index 06c3315cd..82cd2f598 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -5,7 +5,7 @@
     </div>
     <ds-container>
       <div class="main-container">
-        <nuxt />
+        <nuxt :showMobileMenu="showMobileMenu" />
       </div>
     </ds-container>
     <page-footer v-if="!showMobileMenu" />
diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index aacdc4344..79291c623 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -4,6 +4,39 @@
       <ds-grid-item v-if="hashtag" :row-span="2" column-span="fullWidth">
         <hashtags-filter :hashtag="hashtag" @clearSearch="clearSearch" />
       </ds-grid-item>
+      <!--Filter Button-->
+
+      <ds-grid-item
+        v-if="categoriesActive"
+        :row-span="1"
+        column-span="fullWidth"
+        style="z-index: 1"
+      >
+        <span v-if="Object.keys(postsFilter).length !== 0">
+          <ds-chip
+            v-for="filter in postsFilter.categories_some.id_in"
+            @remove="removeFilter"
+            removable
+            :key="filter"
+            color="inverse"
+            size="large"
+          >
+            {{ filter }}
+          </ds-chip>
+        </span>
+        <ds-button :icon="filterButtonIcon" right @click="showFilter = !showFilter">
+          {{ filterButtonText }}
+        </ds-button>
+
+        <div
+          style="background-color: white; box-shadow: rgb(189 189 189) 1px 9px 15px 1px"
+          v-if="showFilter"
+        >
+          <filter-menu-component :showMobileMenu="showMobileMenu" />
+        </div>
+      </ds-grid-item>
+      <ds-space :margin-bottom="{ base: 'small', md: 'base', lg: 'large' }" />
+
       <!-- donation info -->
       <ds-grid-item v-if="showDonations" class="top-info-bar" :row-span="1" column-span="fullWidth">
         <donation-info :goal="goal" :progress="progress" />
@@ -65,7 +98,7 @@ import { mapGetters, mapMutations } from 'vuex'
 import { DonationsQuery } from '~/graphql/Donations'
 import { filterPosts } from '~/graphql/PostQuery.js'
 import UpdateQuery from '~/components/utils/UpdateQuery'
-
+import FilterMenuComponent from '~/components/FilterMenu/FilterMenuComponent'
 export default {
   components: {
     DonationInfo,
@@ -74,11 +107,16 @@ export default {
     HcEmpty,
     MasonryGrid,
     MasonryGridItem,
+    FilterMenuComponent,
   },
   mixins: [postListActions],
+  props: {
+    showMobileMenu: { type: Boolean, default: false },
+  },
   data() {
     const { hashtag = null } = this.$route.query
     return {
+      showFilter: false,
       showDonations: true,
       goal: 15000,
       progress: 7000,
@@ -88,6 +126,7 @@ export default {
       offset: 0,
       pageSize: 12,
       hashtag,
+      categoriesActive: this.$env.CATEGORIES_ACTIVE,
     }
   },
   computed: {
@@ -95,6 +134,16 @@ export default {
       postsFilter: 'posts/filter',
       orderBy: 'posts/orderBy',
     }),
+    filterButtonIcon() {
+      if (Object.keys(this.postsFilter).length === 0) {
+        return this.showFilter ? 'angle-down' : 'angle-up'
+      }
+      return 'filter'
+    },
+    filterButtonText() {
+      if (this.postsFilter.author) return 'Beiträge von Freunden filtern'
+      return 'Beiträge filtern'
+    },
     finalFilters() {
       let filter = this.postsFilter
       if (this.hashtag) {
@@ -124,6 +173,9 @@ export default {
       resetCategories: 'posts/RESET_CATEGORIES',
       toggleCategory: 'posts/TOGGLE_CATEGORY',
     }),
+    removeFilter() {
+      alert('Filter löschen')
+    },
     clearSearch() {
       this.$router.push({ path: '/' })
       this.hashtag = null

From 8759c4a41c1f06a90c45c264bb995cd2b8e9f52a Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 24 Jan 2023 08:11:19 +0100
Subject: [PATCH 04/27] find key in object change

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

diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index 79291c623..09e51f7cc 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -12,7 +12,7 @@
         column-span="fullWidth"
         style="z-index: 1"
       >
-        <span v-if="Object.keys(postsFilter).length !== 0">
+        <span v-if="postsFilter['categories_some']">
           <ds-chip
             v-for="filter in postsFilter.categories_some.id_in"
             @remove="removeFilter"

From 983e7e12f4da95d8224348ff590b24950d56c47a Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 25 Jan 2023 09:27:30 +0100
Subject: [PATCH 05/27] filter for themen and friends in content page per
 button, close funktion

---
 webapp/locales/de.json |  6 ++++-
 webapp/locales/en.json |  6 ++++-
 webapp/pages/index.vue | 56 +++++++++++++++++++++++++++---------------
 3 files changed, 46 insertions(+), 22 deletions(-)

diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index d3062584a..1acec03b0 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -267,7 +267,11 @@
       "happy": "Glücklich",
       "surprised": "Erstaunt"
     },
-    "filterALL": "Alle Beiträge anzeigen",
+    "filterMasonryGrid": {
+      "noFilter":"Beiträge filtern",
+      "myTheme":"Meine Themen",
+      "myFriends":"Beiträge von meinen Freunden"
+    },
     "filterFollow": "Beiträge von Benutzern filtern, denen ich folge",
     "inappropriatePicture": "Dieses Bild kann für einige Menschen unangemessen sein.",
     "languageSelectLabel": "Sprache Deines Beitrags",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index c4bb105cc..b47bb95be 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -267,7 +267,11 @@
       "happy": "Happy",
       "surprised": "Surprised"
     },
-    "filterALL": "View all contributions",
+    "filterMasonryGrid": {
+      "noFilter": "Filter Posts",
+      "myTheme": "My Themes",
+      "myFriends": "Posts From My Friends"
+    },
     "filterFollow": "Filter contributions from users I follow",
     "inappropriatePicture": "This image may be inappropriate for some people.",
     "languageSelectLabel": "Language of your contribution",
diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index 09e51f7cc..61a945e1f 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -12,27 +12,40 @@
         column-span="fullWidth"
         style="z-index: 1"
       >
-        <span v-if="postsFilter['categories_some']">
-          <ds-chip
-            v-for="filter in postsFilter.categories_some.id_in"
-            @remove="removeFilter"
-            removable
-            :key="filter"
-            color="inverse"
-            size="large"
+        <ds-button
+          class="my-filter-button"
+          v-if="!postsFilter['categories_some'] && !postsFilter['author']" 
+          :icon="filterButtonIcon" 
+          right 
+          @click="showFilter = !showFilter">
+          {{ $t('contribution.filterMasonryGrid.noFilter') }}
+        </ds-button>
+
+        <ds-button 
+          class="my-filter-button" 
+          v-if="postsFilter['categories_some']" 
+          :icon="filterButtonIcon" 
+          right 
+          @click="showFilter = !showFilter">
+          {{ $t('contribution.filterMasonryGrid.myTheme') }}
+        </ds-button>
+
+        <ds-button 
+          class="my-filter-button" 
+          v-if="postsFilter['author']" 
+          :icon="filterButtonIcon" 
+          right 
+          @click="showFilter = !showFilter"
           >
-            {{ filter }}
-          </ds-chip>
-        </span>
-        <ds-button :icon="filterButtonIcon" right @click="showFilter = !showFilter">
-          {{ filterButtonText }}
+          {{ $t('contribution.filterMasonryGrid.myFriends') }}
         </ds-button>
 
         <div
+          id="my-filter"
           style="background-color: white; box-shadow: rgb(189 189 189) 1px 9px 15px 1px"
           v-if="showFilter"
         >
-          <filter-menu-component :showMobileMenu="showMobileMenu" />
+          <filter-menu-component :showMobileMenu="showMobileMenu"/>
         </div>
       </ds-grid-item>
       <ds-space :margin-bottom="{ base: 'small', md: 'base', lg: 'large' }" />
@@ -140,10 +153,6 @@ export default {
       }
       return 'filter'
     },
-    filterButtonText() {
-      if (this.postsFilter.author) return 'Beiträge von Freunden filtern'
-      return 'Beiträge filtern'
-    },
     finalFilters() {
       let filter = this.postsFilter
       if (this.hashtag) {
@@ -167,14 +176,21 @@ export default {
       this.resetCategories()
       this.toggleCategory(this.categoryId)
     }
+     document.addEventListener('click', this.removeFilter)
   },
   methods: {
     ...mapMutations({
       resetCategories: 'posts/RESET_CATEGORIES',
       toggleCategory: 'posts/TOGGLE_CATEGORY',
     }),
-    removeFilter() {
-      alert('Filter löschen')
+    removeFilter(e) {  
+      if (!e.target.closest('#my-filter') && !e.target.closest('.my-filter-button')) {
+        if (!this.showFilter) return 
+        this.showFilter = false          
+      }     
+    },
+    beforeDestroy() {
+       document.removeEventListener('click', this.removeFilter);
     },
     clearSearch() {
       this.$router.push({ path: '/' })

From 5ceec78aee59c62d22a89fe445f33b9dad658ab7 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 25 Jan 2023 09:28:28 +0100
Subject: [PATCH 06/27] fix: lint

---
 webapp/pages/index.vue | 48 ++++++++++++++++++++++--------------------
 1 file changed, 25 insertions(+), 23 deletions(-)

diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index 61a945e1f..bf8bc49f1 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -14,29 +14,31 @@
       >
         <ds-button
           class="my-filter-button"
-          v-if="!postsFilter['categories_some'] && !postsFilter['author']" 
-          :icon="filterButtonIcon" 
-          right 
-          @click="showFilter = !showFilter">
+          v-if="!postsFilter['categories_some'] && !postsFilter['author']"
+          :icon="filterButtonIcon"
+          right
+          @click="showFilter = !showFilter"
+        >
           {{ $t('contribution.filterMasonryGrid.noFilter') }}
         </ds-button>
 
-        <ds-button 
-          class="my-filter-button" 
-          v-if="postsFilter['categories_some']" 
-          :icon="filterButtonIcon" 
-          right 
-          @click="showFilter = !showFilter">
+        <ds-button
+          class="my-filter-button"
+          v-if="postsFilter['categories_some']"
+          :icon="filterButtonIcon"
+          right
+          @click="showFilter = !showFilter"
+        >
           {{ $t('contribution.filterMasonryGrid.myTheme') }}
         </ds-button>
 
-        <ds-button 
-          class="my-filter-button" 
-          v-if="postsFilter['author']" 
-          :icon="filterButtonIcon" 
-          right 
+        <ds-button
+          class="my-filter-button"
+          v-if="postsFilter['author']"
+          :icon="filterButtonIcon"
+          right
           @click="showFilter = !showFilter"
-          >
+        >
           {{ $t('contribution.filterMasonryGrid.myFriends') }}
         </ds-button>
 
@@ -45,7 +47,7 @@
           style="background-color: white; box-shadow: rgb(189 189 189) 1px 9px 15px 1px"
           v-if="showFilter"
         >
-          <filter-menu-component :showMobileMenu="showMobileMenu"/>
+          <filter-menu-component :showMobileMenu="showMobileMenu" />
         </div>
       </ds-grid-item>
       <ds-space :margin-bottom="{ base: 'small', md: 'base', lg: 'large' }" />
@@ -176,21 +178,21 @@ export default {
       this.resetCategories()
       this.toggleCategory(this.categoryId)
     }
-     document.addEventListener('click', this.removeFilter)
+    document.addEventListener('click', this.removeFilter)
   },
   methods: {
     ...mapMutations({
       resetCategories: 'posts/RESET_CATEGORIES',
       toggleCategory: 'posts/TOGGLE_CATEGORY',
     }),
-    removeFilter(e) {  
+    removeFilter(e) {
       if (!e.target.closest('#my-filter') && !e.target.closest('.my-filter-button')) {
-        if (!this.showFilter) return 
-        this.showFilter = false          
-      }     
+        if (!this.showFilter) return
+        this.showFilter = false
+      }
     },
     beforeDestroy() {
-       document.removeEventListener('click', this.removeFilter);
+      document.removeEventListener('click', this.removeFilter)
     },
     clearSearch() {
       this.$router.push({ path: '/' })

From 4a8f46605153806ec4570a10929328f461d78201 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 25 Jan 2023 09:28:48 +0100
Subject: [PATCH 07/27] fix: locales

---
 webapp/locales/de.json | 10 +++++-----
 webapp/locales/en.json | 10 +++++-----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 1acec03b0..46e18b8fd 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -267,12 +267,12 @@
       "happy": "Glücklich",
       "surprised": "Erstaunt"
     },
-    "filterMasonryGrid": {
-      "noFilter":"Beiträge filtern",
-      "myTheme":"Meine Themen",
-      "myFriends":"Beiträge von meinen Freunden"
-    },
     "filterFollow": "Beiträge von Benutzern filtern, denen ich folge",
+    "filterMasonryGrid": {
+      "myFriends": "Beiträge von meinen Freunden",
+      "myTheme": "Meine Themen",
+      "noFilter": "Beiträge filtern"
+    },
     "inappropriatePicture": "Dieses Bild kann für einige Menschen unangemessen sein.",
     "languageSelectLabel": "Sprache Deines Beitrags",
     "languageSelectText": "Sprache wählen",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index b47bb95be..148303e89 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -267,12 +267,12 @@
       "happy": "Happy",
       "surprised": "Surprised"
     },
-    "filterMasonryGrid": {
-      "noFilter": "Filter Posts",
-      "myTheme": "My Themes",
-      "myFriends": "Posts From My Friends"
-    },
     "filterFollow": "Filter contributions from users I follow",
+    "filterMasonryGrid": {
+      "myFriends": "Posts From My Friends",
+      "myTheme": "My Themes",
+      "noFilter": "Filter Posts"
+    },
     "inappropriatePicture": "This image may be inappropriate for some people.",
     "languageSelectLabel": "Language of your contribution",
     "languageSelectText": "Select Language",

From fd6d2dacc5e1344d2711be2d253f71dd0c551917 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 25 Jan 2023 12:20:39 +0100
Subject: [PATCH 08/27] add delete filter funktion

---
 webapp/pages/index.vue | 58 +++++++++++++++++++++++++-----------------
 1 file changed, 35 insertions(+), 23 deletions(-)

diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index bf8bc49f1..28b9bfeb5 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -22,25 +22,36 @@
           {{ $t('contribution.filterMasonryGrid.noFilter') }}
         </ds-button>
 
-        <ds-button
-          class="my-filter-button"
-          v-if="postsFilter['categories_some']"
-          :icon="filterButtonIcon"
-          right
-          @click="showFilter = !showFilter"
-        >
-          {{ $t('contribution.filterMasonryGrid.myTheme') }}
-        </ds-button>
+        <span v-if="postsFilter['categories_some']">
+          <ds-button class="my-filter-button" right @click="showFilter = !showFilter">
+            {{ $t('contribution.filterMasonryGrid.myTheme') }}
+          </ds-button>
+          <ds-button
+            class="filter-remove"
+            @click="resetCategories"
+            icon="close"
+            title="Filter löschen"
+            style="margin-left: -14px"
+          ></ds-button>
+        </span>
 
-        <ds-button
-          class="my-filter-button"
-          v-if="postsFilter['author']"
-          :icon="filterButtonIcon"
-          right
-          @click="showFilter = !showFilter"
-        >
-          {{ $t('contribution.filterMasonryGrid.myFriends') }}
-        </ds-button>
+        <span v-if="postsFilter['author']">
+          <ds-button
+            v-if="postsFilter['author']"
+            class="my-filter-button"
+            right
+            @click="showFilter = !showFilter"
+          >
+            {{ $t('contribution.filterMasonryGrid.myFriends') }}
+          </ds-button>
+          <ds-button
+            class="filter-remove"
+            @click="resetByFollowed"
+            icon="close"
+            title="Filter löschen"
+            style="margin-left: -14px"
+          ></ds-button>
+        </span>
 
         <div
           id="my-filter"
@@ -151,9 +162,9 @@ export default {
     }),
     filterButtonIcon() {
       if (Object.keys(this.postsFilter).length === 0) {
-        return this.showFilter ? 'angle-down' : 'angle-up'
+        return this.showFilter ? 'angle-up' : 'angle-down'
       }
-      return 'filter'
+      return 'close'
     },
     finalFilters() {
       let filter = this.postsFilter
@@ -178,21 +189,22 @@ export default {
       this.resetCategories()
       this.toggleCategory(this.categoryId)
     }
-    document.addEventListener('click', this.removeFilter)
+    document.addEventListener('click', this.showFilterMenu)
   },
   methods: {
     ...mapMutations({
+      resetByFollowed: 'posts/TOGGLE_FILTER_BY_FOLLOWED',
       resetCategories: 'posts/RESET_CATEGORIES',
       toggleCategory: 'posts/TOGGLE_CATEGORY',
     }),
-    removeFilter(e) {
+    showFilterMenu(e) {
       if (!e.target.closest('#my-filter') && !e.target.closest('.my-filter-button')) {
         if (!this.showFilter) return
         this.showFilter = false
       }
     },
     beforeDestroy() {
-      document.removeEventListener('click', this.removeFilter)
+      document.removeEventListener('click', this.showFilterMenu)
     },
     clearSearch() {
       this.$router.push({ path: '/' })

From 6c5f042fb99007b035061a54a1bb4f11e56c1139 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 25 Jan 2023 16:15:51 +0100
Subject: [PATCH 09/27] style color change, position change

---
 webapp/pages/index.vue | 60 +++++++++++++++++++++++++++++++++++-------
 1 file changed, 51 insertions(+), 9 deletions(-)

diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index 28b9bfeb5..0519d22fe 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -10,9 +10,19 @@
         v-if="categoriesActive"
         :row-span="1"
         column-span="fullWidth"
-        style="z-index: 1"
+        class="filterButtonMenu"
       >
-        <ds-button
+        <base-button
+          class="my-filter-button"
+          v-if="!postsFilter['categories_some'] && !postsFilter['author']"
+          :icon="filterButtonIcon"
+          right
+          @click="showFilter = !showFilter"
+          filled
+        >
+          {{ $t('contribution.filterMasonryGrid.noFilter') }}
+        </base-button>
+        <!-- <ds-button
           class="my-filter-button"
           v-if="!postsFilter['categories_some'] && !postsFilter['author']"
           :icon="filterButtonIcon"
@@ -20,23 +30,47 @@
           @click="showFilter = !showFilter"
         >
           {{ $t('contribution.filterMasonryGrid.noFilter') }}
-        </ds-button>
+        </ds-button> -->
 
         <span v-if="postsFilter['categories_some']">
-          <ds-button class="my-filter-button" right @click="showFilter = !showFilter">
+          <!-- <ds-button class="my-filter-button" right @click="showFilter = !showFilter">
             {{ $t('contribution.filterMasonryGrid.myTheme') }}
-          </ds-button>
-          <ds-button
+          </ds-button> -->
+          <base-button class="my-filter-button" right @click="showFilter = !showFilter" filled>
+            {{ $t('contribution.filterMasonryGrid.myTheme') }}
+          </base-button>
+          <base-button
+            class="filter-remove"
+            @click="resetCategories"
+            icon="close"
+            title="Filter löschen"
+            style="margin-left: -6px"
+            filled
+          />
+
+          <!-- <ds-button
             class="filter-remove"
             @click="resetCategories"
             icon="close"
             title="Filter löschen"
             style="margin-left: -14px"
-          ></ds-button>
+          ></ds-button> -->
         </span>
 
         <span v-if="postsFilter['author']">
-          <ds-button
+          <base-button class="my-filter-button" right @click="showFilter = !showFilter" filled>
+            {{ $t('contribution.filterMasonryGrid.myFriends') }}
+          </base-button>
+          <base-button
+            class="filter-remove"
+            @click="resetByFollowed"
+            icon="close"
+            title="Filter löschen"
+            style="margin-left: -6px"
+            filled
+          />
+
+          <!-- <ds-button
             v-if="postsFilter['author']"
             class="my-filter-button"
             right
@@ -50,7 +84,7 @@
             icon="close"
             title="Filter löschen"
             style="margin-left: -14px"
-          ></ds-button>
+          ></ds-button> -->
         </span>
 
         <div
@@ -307,4 +341,12 @@ export default {
   display: flex;
   align-items: center;
 }
+.filterButtonMenu {
+  position: fixed;
+  z-index: 1;
+  margin-top: -35px;
+  padding: 20px 10px 5px 10px;
+  border-radius: 7px;
+  background-color: #fff;
+}
 </style>

From ede699855c7703d8cb4b72a232e13774460ecf24 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 26 Jan 2023 14:06:18 +0100
Subject: [PATCH 10/27] change style for remove filter

---
 webapp/pages/index.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index 0519d22fe..921724f85 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -15,12 +15,13 @@
         <base-button
           class="my-filter-button"
           v-if="!postsFilter['categories_some'] && !postsFilter['author']"
-          :icon="filterButtonIcon"
           right
           @click="showFilter = !showFilter"
           filled
         >
           {{ $t('contribution.filterMasonryGrid.noFilter') }}
+          &nbsp;
+          <base-icon class="my-filter-button" :name="filterButtonIcon"></base-icon>
         </base-button>
         <!-- <ds-button
           class="my-filter-button"
@@ -44,7 +45,7 @@
             @click="resetCategories"
             icon="close"
             title="Filter löschen"
-            style="margin-left: -6px"
+            style="margin-left: -8px"
             filled
           />
 
@@ -66,7 +67,7 @@
             @click="resetByFollowed"
             icon="close"
             title="Filter löschen"
-            style="margin-left: -6px"
+            style="margin-left: -8px"
             filled
           />
 
@@ -343,7 +344,7 @@ export default {
 }
 .filterButtonMenu {
   position: fixed;
-  z-index: 1;
+  z-index: 6;
   margin-top: -35px;
   padding: 20px 10px 5px 10px;
   border-radius: 7px;

From 9aef64ea9397c644b11ed1e85d03f4ad350b7b3e Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 31 Jan 2023 10:07:49 +0100
Subject: [PATCH 11/27] scroll and filter button merged

---
 webapp/pages/index.vue | 57 +++++++++++++-----------------------------
 1 file changed, 17 insertions(+), 40 deletions(-)

diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index 921724f85..d300ed7ec 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -5,12 +5,12 @@
         <hashtags-filter :hashtag="hashtag" @clearSearch="clearSearch" />
       </ds-grid-item>
       <!--Filter Button-->
-
       <ds-grid-item
         v-if="categoriesActive"
         :row-span="1"
         column-span="fullWidth"
         class="filterButtonMenu"
+        :class="{ 'hide-filter': hideFilter }"
       >
         <base-button
           class="my-filter-button"
@@ -23,20 +23,7 @@
           &nbsp;
           <base-icon class="my-filter-button" :name="filterButtonIcon"></base-icon>
         </base-button>
-        <!-- <ds-button
-          class="my-filter-button"
-          v-if="!postsFilter['categories_some'] && !postsFilter['author']"
-          :icon="filterButtonIcon"
-          right
-          @click="showFilter = !showFilter"
-        >
-          {{ $t('contribution.filterMasonryGrid.noFilter') }}
-        </ds-button> -->
-
         <span v-if="postsFilter['categories_some']">
-          <!-- <ds-button class="my-filter-button" right @click="showFilter = !showFilter">
-            {{ $t('contribution.filterMasonryGrid.myTheme') }}
-          </ds-button> -->
           <base-button class="my-filter-button" right @click="showFilter = !showFilter" filled>
             {{ $t('contribution.filterMasonryGrid.myTheme') }}
           </base-button>
@@ -48,16 +35,7 @@
             style="margin-left: -8px"
             filled
           />
-
-          <!-- <ds-button
-            class="filter-remove"
-            @click="resetCategories"
-            icon="close"
-            title="Filter löschen"
-            style="margin-left: -14px"
-          ></ds-button> -->
         </span>
-
         <span v-if="postsFilter['author']">
           <base-button class="my-filter-button" right @click="showFilter = !showFilter" filled>
             {{ $t('contribution.filterMasonryGrid.myFriends') }}
@@ -70,22 +48,6 @@
             style="margin-left: -8px"
             filled
           />
-
-          <!-- <ds-button
-            v-if="postsFilter['author']"
-            class="my-filter-button"
-            right
-            @click="showFilter = !showFilter"
-          >
-            {{ $t('contribution.filterMasonryGrid.myFriends') }}
-          </ds-button>
-          <ds-button
-            class="filter-remove"
-            @click="resetByFollowed"
-            icon="close"
-            title="Filter löschen"
-            style="margin-left: -14px"
-          ></ds-button> -->
         </span>
 
         <div
@@ -97,7 +59,6 @@
         </div>
       </ds-grid-item>
       <ds-space :margin-bottom="{ base: 'small', md: 'base', lg: 'large' }" />
-
       <!-- donation info -->
       <ds-grid-item v-if="showDonations" class="top-info-bar" :row-span="1" column-span="fullWidth">
         <donation-info :goal="goal" :progress="progress" />
@@ -177,6 +138,8 @@ export default {
   data() {
     const { hashtag = null } = this.$route.query
     return {
+      hideFilter: false,
+      revScrollpos: 0,
       showFilter: false,
       showDonations: true,
       goal: 15000,
@@ -225,6 +188,7 @@ export default {
       this.toggleCategory(this.categoryId)
     }
     document.addEventListener('click', this.showFilterMenu)
+    window.addEventListener('scroll', this.handleScroll)
   },
   methods: {
     ...mapMutations({
@@ -238,6 +202,15 @@ export default {
         this.showFilter = false
       }
     },
+    handleScroll() {
+      const currentScrollPos = window.pageYOffset
+      if (this.prevScrollpos > currentScrollPos) {
+        this.hideFilter = false
+      } else {
+        this.hideFilter = true
+      }
+      this.prevScrollpos = currentScrollPos
+    },
     beforeDestroy() {
       document.removeEventListener('click', this.showFilterMenu)
     },
@@ -326,6 +299,10 @@ export default {
   }
 }
 
+.hide-filter {
+  display: none;
+}
+
 .base-button.--circle.post-add-button {
   height: 54px;
   width: 54px;

From d4596b3447381069c872101e59dbbe48dfac40a1 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 31 Jan 2023 10:23:28 +0100
Subject: [PATCH 12/27] add locales deleteFilter

---
 webapp/locales/de.json | 3 ++-
 webapp/locales/en.json | 3 ++-
 webapp/pages/index.vue | 6 +++---
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 46e18b8fd..d4d124b80 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -270,7 +270,7 @@
     "filterFollow": "Beiträge von Benutzern filtern, denen ich folge",
     "filterMasonryGrid": {
       "myFriends": "Beiträge von meinen Freunden",
-      "myTheme": "Meine Themen",
+      "myTopics": "Meine Themen",
       "noFilter": "Beiträge filtern"
     },
     "inappropriatePicture": "Dieses Bild kann für einige Menschen unangemessen sein.",
@@ -375,6 +375,7 @@
   "filter-menu": {
     "all": "Alle",
     "categories": "Themen",
+    "deleteFilter": "Filter löschen",
     "emotions": "Emotionen",
     "filter-by": "Filtern nach ...",
     "following": "Benutzern, denen ich folge",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 148303e89..0d23b89a5 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -270,7 +270,7 @@
     "filterFollow": "Filter contributions from users I follow",
     "filterMasonryGrid": {
       "myFriends": "Posts From My Friends",
-      "myTheme": "My Themes",
+      "myTopics": "My topics",
       "noFilter": "Filter Posts"
     },
     "inappropriatePicture": "This image may be inappropriate for some people.",
@@ -375,6 +375,7 @@
   "filter-menu": {
     "all": "All",
     "categories": "Topics",
+    "deleteFilter": "Delete filter",
     "emotions": "Emotions",
     "filter-by": "Filter by ...",
     "following": "Users I follow",
diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index d300ed7ec..ebe4e078e 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -25,13 +25,13 @@
         </base-button>
         <span v-if="postsFilter['categories_some']">
           <base-button class="my-filter-button" right @click="showFilter = !showFilter" filled>
-            {{ $t('contribution.filterMasonryGrid.myTheme') }}
+            {{ $t('contribution.filterMasonryGrid.myTopics') }}
           </base-button>
           <base-button
             class="filter-remove"
             @click="resetCategories"
             icon="close"
-            title="Filter löschen"
+            :title="$t('filter-menu.deleteFilter')"
             style="margin-left: -8px"
             filled
           />
@@ -44,7 +44,7 @@
             class="filter-remove"
             @click="resetByFollowed"
             icon="close"
-            title="Filter löschen"
+            :title="$t('filter-menu.deleteFilter')"
             style="margin-left: -8px"
             filled
           />

From a5af42caab1a0e9623768bd0eecbff908c4a6b96 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 3 Feb 2023 08:02:37 +0100
Subject: [PATCH 13/27] scroll in filtermenu

---
 webapp/pages/index.vue | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index ebe4e078e..37cdebadc 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -50,11 +50,7 @@
           />
         </span>
 
-        <div
-          id="my-filter"
-          style="background-color: white; box-shadow: rgb(189 189 189) 1px 9px 15px 1px"
-          v-if="showFilter"
-        >
+        <div id="my-filter" v-if="showFilter">
           <filter-menu-component :showMobileMenu="showMobileMenu" />
         </div>
       </ds-grid-item>
@@ -284,6 +280,13 @@ export default {
 </script>
 
 <style lang="scss">
+#my-filter {
+  background-color: white; 
+  box-shadow: rgb(189 189 189) 1px 9px 15px 1px; 
+  height: 448px; 
+  overflow: auto;
+}
+
 .masonry-grid {
   display: grid;
   grid-gap: 10px;
@@ -325,6 +328,6 @@ export default {
   margin-top: -35px;
   padding: 20px 10px 5px 10px;
   border-radius: 7px;
-  background-color: #fff;
+  background-color: #f5f4f6;
 }
 </style>

From f0069c797ec8e16ec0d7ae16835e558f4e7c69af Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 3 Feb 2023 08:27:41 +0100
Subject: [PATCH 14/27] add constants filter headermenu and content button

---
 webapp/constants/filter.js | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 webapp/constants/filter.js

diff --git a/webapp/constants/filter.js b/webapp/constants/filter.js
new file mode 100644
index 000000000..e5888d5ce
--- /dev/null
+++ b/webapp/constants/filter.js
@@ -0,0 +1,3 @@
+export const SHOW_CONTENT_FILTER_HEADER_MENU = false
+export const SHOW_CONTENT_FILTER_MASONRY_GRID = true
+

From 930d820ae26f29022ec1a77e71fa92532a3b16a5 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 3 Feb 2023 08:28:33 +0100
Subject: [PATCH 15/27] add constants filter on headermenu and index

---
 webapp/components/HeaderMenu/HeaderMenu.vue | 4 +++-
 webapp/pages/index.vue                      | 5 ++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/webapp/components/HeaderMenu/HeaderMenu.vue b/webapp/components/HeaderMenu/HeaderMenu.vue
index 3abc97f1c..bfbf724f6 100644
--- a/webapp/components/HeaderMenu/HeaderMenu.vue
+++ b/webapp/components/HeaderMenu/HeaderMenu.vue
@@ -63,7 +63,7 @@
                 TODO: Filter is only visible on index    
             -->
         <ds-flex-item v-if="isLoggedIn" style="flex-grow: 0; flex-basis: auto">
-          <client-only>
+          <client-only v-if="SHOW_CONTENT_FILTER_HEADER_MENU">
             <filter-menu v-show="showFilterMenuDropdown" />
           </client-only>
         </ds-flex-item>
@@ -211,6 +211,7 @@
 <script>
 import { mapGetters } from 'vuex'
 import { SHOW_GROUP_BUTTON_IN_HEADER } from '~/constants/groups.js'
+import { SHOW_CONTENT_FILTER_HEADER_MENU } from '~/constants/filter.js'
 import LOGOS from '~/constants/logos.js'
 import headerMenu from '~/constants/headerMenu.js'
 import AvatarMenu from '~/components/AvatarMenu/AvatarMenu'
@@ -246,6 +247,7 @@ export default {
       links,
       LOGOS,
       SHOW_GROUP_BUTTON_IN_HEADER,
+      SHOW_CONTENT_FILTER_HEADER_MENU,
       isHeaderMenu: headerMenu.MENU.length > 0,
       menu: headerMenu.MENU,
       mobileSearchVisible: false,
diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index 37cdebadc..29530d834 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -6,7 +6,7 @@
       </ds-grid-item>
       <!--Filter Button-->
       <ds-grid-item
-        v-if="categoriesActive"
+        v-if="categoriesActive && SHOW_CONTENT_FILTER_MASONRY_GRID"
         :row-span="1"
         column-span="fullWidth"
         class="filterButtonMenu"
@@ -117,6 +117,8 @@ import { DonationsQuery } from '~/graphql/Donations'
 import { filterPosts } from '~/graphql/PostQuery.js'
 import UpdateQuery from '~/components/utils/UpdateQuery'
 import FilterMenuComponent from '~/components/FilterMenu/FilterMenuComponent'
+import { SHOW_CONTENT_FILTER_MASONRY_GRID } from '~/constants/filter.js'
+
 export default {
   components: {
     DonationInfo,
@@ -147,6 +149,7 @@ export default {
       pageSize: 12,
       hashtag,
       categoriesActive: this.$env.CATEGORIES_ACTIVE,
+      SHOW_CONTENT_FILTER_MASONRY_GRID
     }
   },
   computed: {

From a6db7e9548ba9fcfd9fac5da685d5df7547994ef Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 3 Feb 2023 08:28:56 +0100
Subject: [PATCH 16/27] fix test

---
 webapp/pages/index.spec.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/webapp/pages/index.spec.js b/webapp/pages/index.spec.js
index 7b01bafc9..43400986c 100644
--- a/webapp/pages/index.spec.js
+++ b/webapp/pages/index.spec.js
@@ -73,6 +73,9 @@ describe('PostIndex', () => {
       $route: {
         query: {},
       },
+      $env: {
+        CATEGORIES_ACTIVE: true,
+      },
     }
   })
 

From 9497a9cfdced3d33e192d28fc90ade44b41f66a6 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 3 Feb 2023 08:31:37 +0100
Subject: [PATCH 17/27] change css height filter box

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

diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index 29530d834..be12b3987 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -286,7 +286,7 @@ export default {
 #my-filter {
   background-color: white; 
   box-shadow: rgb(189 189 189) 1px 9px 15px 1px; 
-  height: 448px; 
+  max-height: 480px; 
   overflow: auto;
 }
 

From 6d9b8135499a233a519b0571d4d535883437e34c Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 3 Feb 2023 08:32:32 +0100
Subject: [PATCH 18/27] fix lint

---
 webapp/constants/filter.js | 1 -
 webapp/pages/index.vue     | 8 ++++----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/webapp/constants/filter.js b/webapp/constants/filter.js
index e5888d5ce..00332053b 100644
--- a/webapp/constants/filter.js
+++ b/webapp/constants/filter.js
@@ -1,3 +1,2 @@
 export const SHOW_CONTENT_FILTER_HEADER_MENU = false
 export const SHOW_CONTENT_FILTER_MASONRY_GRID = true
-
diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index be12b3987..b0f8c8679 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -149,7 +149,7 @@ export default {
       pageSize: 12,
       hashtag,
       categoriesActive: this.$env.CATEGORIES_ACTIVE,
-      SHOW_CONTENT_FILTER_MASONRY_GRID
+      SHOW_CONTENT_FILTER_MASONRY_GRID,
     }
   },
   computed: {
@@ -284,9 +284,9 @@ export default {
 
 <style lang="scss">
 #my-filter {
-  background-color: white; 
-  box-shadow: rgb(189 189 189) 1px 9px 15px 1px; 
-  max-height: 480px; 
+  background-color: white;
+  box-shadow: rgb(189 189 189) 1px 9px 15px 1px;
+  max-height: 480px;
   overflow: auto;
 }
 

From 6e646d5373a255e670632903ad01301a04e7dc7c Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Fri, 3 Feb 2023 17:29:16 +0100
Subject: [PATCH 19/27] add angle up icon

---
 webapp/assets/_new/icons/svgs/angle-up.svg | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 webapp/assets/_new/icons/svgs/angle-up.svg

diff --git a/webapp/assets/_new/icons/svgs/angle-up.svg b/webapp/assets/_new/icons/svgs/angle-up.svg
new file mode 100644
index 000000000..af58a3f27
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/angle-up.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>angle-up</title>
+<path d="M16 6.594l0.719 0.688 12.5 12.5-1.438 1.438-11.781-11.781-11.781 11.781-1.438-1.438 12.5-12.5z"></path>
+</svg>

From 4c282fb5fb17972750fbe1f4db25ff314d4fd3b9 Mon Sep 17 00:00:00 2001
From: Alexander Friedland <fridolin@tutanota.com>
Date: Fri, 3 Feb 2023 19:20:48 +0100
Subject: [PATCH 20/27] Update webapp/locales/en.json

Co-authored-by: Moriz Wahl <moriz.wahl@gmx.de>
---
 webapp/locales/en.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 0d23b89a5..e0756a5f4 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -269,7 +269,7 @@
     },
     "filterFollow": "Filter contributions from users I follow",
     "filterMasonryGrid": {
-      "myFriends": "Posts From My Friends",
+      "myFriends": "Posts from my friends",
       "myTopics": "My topics",
       "noFilter": "Filter Posts"
     },

From 31c28aa83b2128eed56d18754a041d950fe485e6 Mon Sep 17 00:00:00 2001
From: Alexander Friedland <fridolin@tutanota.com>
Date: Fri, 3 Feb 2023 19:20:54 +0100
Subject: [PATCH 21/27] Update webapp/locales/en.json

Co-authored-by: Moriz Wahl <moriz.wahl@gmx.de>
---
 webapp/locales/en.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index e0756a5f4..39a1689f1 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -271,7 +271,7 @@
     "filterMasonryGrid": {
       "myFriends": "Posts from my friends",
       "myTopics": "My topics",
-      "noFilter": "Filter Posts"
+      "noFilter": "Filter posts"
     },
     "inappropriatePicture": "This image may be inappropriate for some people.",
     "languageSelectLabel": "Language of your contribution",

From e8d33aba1bb7e9869078decefac89462ee9abbfc Mon Sep 17 00:00:00 2001
From: Alexander Friedland <fridolin@tutanota.com>
Date: Fri, 3 Feb 2023 19:21:12 +0100
Subject: [PATCH 22/27] Update webapp/components/HeaderMenu/HeaderMenu.vue

Co-authored-by: Moriz Wahl <moriz.wahl@gmx.de>
---
 webapp/components/HeaderMenu/HeaderMenu.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/components/HeaderMenu/HeaderMenu.vue b/webapp/components/HeaderMenu/HeaderMenu.vue
index bfbf724f6..e3e43eb5f 100644
--- a/webapp/components/HeaderMenu/HeaderMenu.vue
+++ b/webapp/components/HeaderMenu/HeaderMenu.vue
@@ -63,7 +63,7 @@
                 TODO: Filter is only visible on index    
             -->
         <ds-flex-item v-if="isLoggedIn" style="flex-grow: 0; flex-basis: auto">
-          <client-only v-if="SHOW_CONTENT_FILTER_HEADER_MENU">
+          <client-only>
             <filter-menu v-show="showFilterMenuDropdown" />
           </client-only>
         </ds-flex-item>

From 18749f48d893178b811a78b996573be02ac40ff9 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Fri, 3 Feb 2023 20:31:36 +0100
Subject: [PATCH 23/27] only one if instead of two

---
 webapp/components/HeaderMenu/HeaderMenu.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/webapp/components/HeaderMenu/HeaderMenu.vue b/webapp/components/HeaderMenu/HeaderMenu.vue
index e3e43eb5f..a6ceef50e 100644
--- a/webapp/components/HeaderMenu/HeaderMenu.vue
+++ b/webapp/components/HeaderMenu/HeaderMenu.vue
@@ -62,7 +62,10 @@
         <!-- 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 && SHOW_CONTENT_FILTER_HEADER_MENU"
+          style="flex-grow: 0; flex-basis: auto"
+        >
           <client-only>
             <filter-menu v-show="showFilterMenuDropdown" />
           </client-only>

From 66b7a6db5e21efa9a8faee5d1ad8bab006003da1 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Fri, 3 Feb 2023 22:07:00 +0100
Subject: [PATCH 24/27] scroll to top to ensure that avatar menu is visible
 before clicking on it

---
 cypress/integration/common/I_log_out.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/cypress/integration/common/I_log_out.js b/cypress/integration/common/I_log_out.js
index 51605f17e..2f7b6d848 100644
--- a/cypress/integration/common/I_log_out.js
+++ b/cypress/integration/common/I_log_out.js
@@ -1,9 +1,10 @@
 import { When } from "cypress-cucumber-preprocessor/steps";
 
 When("I log out", () => {
+  cy.scrollTo('top')
   cy.get(".avatar-menu")
     .click();
   cy.get(".avatar-menu-popover")
     .find('a[href="/logout"]')
     .click();
-});
\ No newline at end of file
+});

From 8bfe486034badd55a8096982f81aba08207b9e83 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Fri, 3 Feb 2023 22:37:16 +0100
Subject: [PATCH 25/27] linting

---
 webapp/components/HeaderMenu/HeaderMenu.vue | 461 ++++++++++----------
 1 file changed, 232 insertions(+), 229 deletions(-)

diff --git a/webapp/components/HeaderMenu/HeaderMenu.vue b/webapp/components/HeaderMenu/HeaderMenu.vue
index e13521885..f1883b0cc 100644
--- a/webapp/components/HeaderMenu/HeaderMenu.vue
+++ b/webapp/components/HeaderMenu/HeaderMenu.vue
@@ -60,252 +60,255 @@
         </ds-flex-item>
         <!-- filter menu -->
         <!-- TODO: Filter is only visible on index -->
-          <ds-flex-item v-if="isLoggedIn && SHOW_CONTENT_FILTER_HEADER_MENU" style="flex-grow: 0; flex-basis: auto">
-            <client-only>
-              <filter-menu v-show="showFilterMenuDropdown" />
-            </client-only>
-          </ds-flex-item>
-          <!-- right symbols -->
-          <ds-flex-item style="flex-basis: auto">
-            <div class="main-navigation-right" style="flex-basis: auto">
-              <!-- locale switch -->
-              <locale-switch class="topbar-locale-switch" placement="top" offset="8" />
-              <template v-if="isLoggedIn">
-                <!-- notification menu -->
+        <ds-flex-item
+          v-if="isLoggedIn && SHOW_CONTENT_FILTER_HEADER_MENU"
+          style="flex-grow: 0; flex-basis: auto"
+        >
+          <client-only>
+            <filter-menu v-show="showFilterMenuDropdown" />
+          </client-only>
+        </ds-flex-item>
+        <!-- right symbols -->
+        <ds-flex-item style="flex-basis: auto">
+          <div class="main-navigation-right" style="flex-basis: auto">
+            <!-- locale switch -->
+            <locale-switch class="topbar-locale-switch" placement="top" offset="8" />
+            <template v-if="isLoggedIn">
+              <!-- notification menu -->
+              <client-only>
+                <notification-menu placement="top" />
+              </client-only>
+              <!-- invite button -->
+              <div v-if="inviteRegistration">
                 <client-only>
-                  <notification-menu placement="top" />
+                  <invite-button placement="top" />
                 </client-only>
-                <!-- invite button -->
-                <div v-if="inviteRegistration">
-                  <client-only>
-                    <invite-button placement="top" />
-                  </client-only>
-                </div>
-                <!-- group button -->
-                <client-only v-if="SHOW_GROUP_BUTTON_IN_HEADER">
-                  <group-button />
-                </client-only>
-                <!-- map button -->
-                <client-only v-if="!isEmpty(this.$env.MAPBOX_TOKEN)">
-                  <map-button />
-                </client-only>
-                <!-- avatar menu -->
-                <client-only>
-                  <avatar-menu placement="top" />
-                </client-only>
-              </template>
-            </div>
-          </ds-flex-item>
-        </ds-flex>
-
-        <!-- mobile header menu -->
-        <div v-else class="mobil-header-box">
-          <!-- logo, hamburger-->
-          <ds-flex style="align-items: center">
-            <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.url"
-                :target="LOGOS.LOGO_HEADER_CLICK.externalLink.target"
-              >
-                <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>
-
-            <!-- mobile hamburger menu -->
-            <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" :showMobileMenu="showMobileMenu" />
-              </client-only>
-            </ds-flex-item>
-          </ds-flex>
-          <!-- right symbols -->
-          <ds-flex style="margin: 0 20px">
-            <!-- locale switch mobile -->
-            <ds-flex-item :class="{ 'hide-mobile-menu': !toggleMobileMenu }">
-              <locale-switch
-                class="topbar-locale-switch topbar-locale-switch-mobile"
-                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>
-            <!-- group button -->
-            <ds-flex-item
-              v-if="SHOW_GROUP_BUTTON_IN_HEADER"
-              :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
-              style="text-align: center"
-            >
-              <client-only>
+              </div>
+              <!-- group button -->
+              <client-only v-if="SHOW_GROUP_BUTTON_IN_HEADER">
                 <group-button />
               </client-only>
-            </ds-flex-item>
-            <!-- map button -->
-            <ds-flex-item
-              v-if="!isEmpty(this.$env.MAPBOX_TOKEN)"
-              :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
-              style="text-align: center"
-            >
-              <client-only>
+              <!-- map button -->
+              <client-only v-if="!isEmpty(this.$env.MAPBOX_TOKEN)">
                 <map-button />
               </client-only>
-            </ds-flex-item>
-            <!-- avatar menu mobile -->
-            <ds-flex-item :class="{ 'hide-mobile-menu': !toggleMobileMenu }" style="text-align: end">
+              <!-- avatar menu -->
               <client-only>
                 <avatar-menu placement="top" />
               </client-only>
-            </ds-flex-item>
-          </ds-flex>
-          <div :class="{ 'hide-mobile-menu': !toggleMobileMenu }" class="mobile-menu footer-mobile">
-            <!-- dynamic branding menus -->
-            <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="item.target">
-                  <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>
+            </template>
           </div>
+        </ds-flex-item>
+      </ds-flex>
+
+      <!-- mobile header menu -->
+      <div v-else class="mobil-header-box">
+        <!-- logo, hamburger-->
+        <ds-flex style="align-items: center">
+          <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.url"
+              :target="LOGOS.LOGO_HEADER_CLICK.externalLink.target"
+            >
+              <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>
+
+          <!-- mobile hamburger menu -->
+          <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" :showMobileMenu="showMobileMenu" />
+            </client-only>
+          </ds-flex-item>
+        </ds-flex>
+        <!-- right symbols -->
+        <ds-flex style="margin: 0 20px">
+          <!-- locale switch mobile -->
+          <ds-flex-item :class="{ 'hide-mobile-menu': !toggleMobileMenu }">
+            <locale-switch
+              class="topbar-locale-switch topbar-locale-switch-mobile"
+              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>
+          <!-- group button -->
+          <ds-flex-item
+            v-if="SHOW_GROUP_BUTTON_IN_HEADER"
+            :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
+            style="text-align: center"
+          >
+            <client-only>
+              <group-button />
+            </client-only>
+          </ds-flex-item>
+          <!-- map button -->
+          <ds-flex-item
+            v-if="!isEmpty(this.$env.MAPBOX_TOKEN)"
+            :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
+            style="text-align: center"
+          >
+            <client-only>
+              <map-button />
+            </client-only>
+          </ds-flex-item>
+          <!-- avatar menu mobile -->
+          <ds-flex-item :class="{ 'hide-mobile-menu': !toggleMobileMenu }" style="text-align: end">
+            <client-only>
+              <avatar-menu placement="top" />
+            </client-only>
+          </ds-flex-item>
+        </ds-flex>
+        <div :class="{ 'hide-mobile-menu': !toggleMobileMenu }" class="mobile-menu footer-mobile">
+          <!-- dynamic branding menus -->
+          <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="item.target">
+                <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 isEmpty from 'lodash/isEmpty'
- import { SHOW_GROUP_BUTTON_IN_HEADER } from '~/constants/groups.js'
- import { SHOW_CONTENT_FILTER_HEADER_MENU } from '~/constants/filter.js'
- 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 GroupButton from '~/components/Group/GroupButton'
- import InviteButton from '~/components/InviteButton/InviteButton'
- import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
- import Logo from '~/components/Logo/Logo'
- import MapButton from '~/components/Map/MapButton'
- 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'
+import { mapGetters } from 'vuex'
+import isEmpty from 'lodash/isEmpty'
+import { SHOW_GROUP_BUTTON_IN_HEADER } from '~/constants/groups.js'
+import { SHOW_CONTENT_FILTER_HEADER_MENU } from '~/constants/filter.js'
+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 GroupButton from '~/components/Group/GroupButton'
+import InviteButton from '~/components/InviteButton/InviteButton'
+import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
+import Logo from '~/components/Logo/Logo'
+import MapButton from '~/components/Map/MapButton'
+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,
-     GroupButton,
-     InviteButton,
-     LocaleSwitch,
-     Logo,
-     MapButton,
-     NotificationMenu,
-     PageParamsLink,
-     SearchField,
-   },
-   props: {
-     showMobileMenu: { type: Boolean, default: false },
-   },
-   data() {
-     return {
-       hideNavbar: false,
-       prevScrollpos: 0,
-       isEmpty,
-       links,
-       LOGOS,
-       SHOW_GROUP_BUTTON_IN_HEADER,
-       SHOW_CONTENT_FILTER_HEADER_MENU,
-       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: {
-     handleScroll() {
-       const currentScrollPos = window.pageYOffset
-       if (this.prevScrollpos > currentScrollPos) {
-         this.hideNavbar = false
-       } else {
-         this.hideNavbar = true
-       }
-       this.prevScrollpos = currentScrollPos
-     },
-     toggleMobileMenuView() {
-       this.toggleMobileMenu = !this.toggleMobileMenu
-     },
-   },
-   mounted() {
-     window.addEventListener('scroll', this.handleScroll)
-   },
- }
+export default {
+  components: {
+    AvatarMenu,
+    FilterMenu,
+    GroupButton,
+    InviteButton,
+    LocaleSwitch,
+    Logo,
+    MapButton,
+    NotificationMenu,
+    PageParamsLink,
+    SearchField,
+  },
+  props: {
+    showMobileMenu: { type: Boolean, default: false },
+  },
+  data() {
+    return {
+      hideNavbar: false,
+      prevScrollpos: 0,
+      isEmpty,
+      links,
+      LOGOS,
+      SHOW_GROUP_BUTTON_IN_HEADER,
+      SHOW_CONTENT_FILTER_HEADER_MENU,
+      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: {
+    handleScroll() {
+      const currentScrollPos = window.pageYOffset
+      if (this.prevScrollpos > currentScrollPos) {
+        this.hideNavbar = false
+      } else {
+        this.hideNavbar = true
+      }
+      this.prevScrollpos = currentScrollPos
+    },
+    toggleMobileMenuView() {
+      this.toggleMobileMenu = !this.toggleMobileMenu
+    },
+  },
+  mounted() {
+    window.addEventListener('scroll', this.handleScroll)
+  },
+}
 </script>
 
 <style lang="scss">

From f5c05de9741de88ed149238eecc4ae4b5e6aa569 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Mon, 6 Feb 2023 11:34:15 +0100
Subject: [PATCH 26/27] only scroll to top if avatar menu is not visible

---
 cypress/integration/common/I_log_out.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/cypress/integration/common/I_log_out.js b/cypress/integration/common/I_log_out.js
index 2f7b6d848..60185bc45 100644
--- a/cypress/integration/common/I_log_out.js
+++ b/cypress/integration/common/I_log_out.js
@@ -1,7 +1,12 @@
 import { When } from "cypress-cucumber-preprocessor/steps";
 
 When("I log out", () => {
-  cy.scrollTo('top')
+  cy.get(".avatar-menu").then(($menu) => {
+    if (!$menu.is(':visible')){
+      cy.scrollTo("top");
+      cy.wait(500);
+    }
+  })
   cy.get(".avatar-menu")
     .click();
   cy.get(".avatar-menu-popover")

From 66c74fbb09ba99bf8a5b7f369e185a571b311f4e Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Mon, 6 Feb 2023 12:09:30 +0100
Subject: [PATCH 27/27] test if avatar menu is visible and scroll top

---
 ...when_I_click_on_my_profile_picture_in_the_top_right.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/cypress/integration/UserProfile.NameDescriptionLocation/I_can_see_my_new_name_{string}_when_I_click_on_my_profile_picture_in_the_top_right.js b/cypress/integration/UserProfile.NameDescriptionLocation/I_can_see_my_new_name_{string}_when_I_click_on_my_profile_picture_in_the_top_right.js
index b9e97a304..ca6b4798b 100644
--- a/cypress/integration/UserProfile.NameDescriptionLocation/I_can_see_my_new_name_{string}_when_I_click_on_my_profile_picture_in_the_top_right.js
+++ b/cypress/integration/UserProfile.NameDescriptionLocation/I_can_see_my_new_name_{string}_when_I_click_on_my_profile_picture_in_the_top_right.js
@@ -1,7 +1,13 @@
 import { Then } from "cypress-cucumber-preprocessor/steps";
 
 Then('I can see my new name {string} when I click on my profile picture in the top right', name => {
+  cy.get(".avatar-menu").then(($menu) => {
+    if (!$menu.is(':visible')){
+      cy.scrollTo("top");
+      cy.wait(500);
+    }
+  })
   cy.get('.avatar-menu').click() // open
   cy.get('.avatar-menu-popover').contains(name)
   cy.get('.avatar-menu').click() // close again
-})
\ No newline at end of file
+})