From 9548ad6e313f547e93778bf78e880d2527ec1f49 Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Sat, 21 Feb 2026 08:47:14 +0100
Subject: [PATCH] fix(webapp): add responsive mobile menu with locale switching
 and filter support (#9281)

---
 backend/src/graphql/queries/UpdateUser.ts     |   37 +-
 .../I_select_{string}_in_the_language_menu.js |    3 +-
 ...cation_menu_and_click_on_the_first_item.js |    3 +-
 ...t}_unread_notifications_in_the_top_menu.js |    3 +-
 ...ton_links_to_the_all_notifications_page.js |    3 +-
 .../ui/src/ocelot/icons/svgs/language.svg     |    5 +
 webapp/assets/_new/styles/tokens.scss         |    1 +
 .../components/DonationInfo/DonationInfo.vue  |   14 +-
 webapp/components/FilterMenu/FilterMenu.vue   |    8 +-
 .../FilterMenu/FilterMenuSection.vue          |    1 +
 webapp/components/HeaderMenu/HeaderMenu.vue   | 1091 +++++++++++++----
 .../LocaleSwitch/LocaleSwitch.spec.js         |   48 +-
 .../components/LocaleSwitch/LocaleSwitch.vue  |   89 +-
 webapp/components/ProgressBar/ProgressBar.vue |    4 +
 webapp/graphql/User.js                        |    2 +
 webapp/layouts/default.vue                    |   10 +-
 webapp/locales/de.json                        |    1 +
 webapp/locales/en.json                        |    1 +
 webapp/locales/es.json                        |    1 +
 webapp/locales/fr.json                        |    1 +
 webapp/locales/index.js                       |    9 +
 webapp/locales/it.json                        |    1 +
 webapp/locales/nl.json                        |    1 +
 webapp/locales/pl.json                        |    1 +
 webapp/locales/pt.json                        |    1 +
 webapp/locales/ru.json                        |    1 +
 webapp/mixins/localeUpdate.js                 |   36 +
 webapp/pages/index.vue                        |  239 ++--
 28 files changed, 1153 insertions(+), 462 deletions(-)
 create mode 100644 packages/ui/src/ocelot/icons/svgs/language.svg
 create mode 100644 webapp/mixins/localeUpdate.js

diff --git a/backend/src/graphql/queries/UpdateUser.ts b/backend/src/graphql/queries/UpdateUser.ts
index d58cf68a1..612feec21 100644
--- a/backend/src/graphql/queries/UpdateUser.ts
+++ b/backend/src/graphql/queries/UpdateUser.ts
@@ -3,23 +3,40 @@ import gql from 'graphql-tag'
 export const UpdateUser = gql`
   mutation (
     $id: ID!
+    $slug: String
     $name: String
-    $termsAndConditionsAgreedVersion: String
-    $locationName: String # empty string '' sets it to null
+    $about: String
+    $allowEmbedIframes: Boolean
+    $showShoutsPublicly: Boolean
     $emailNotificationSettings: [EmailNotificationSettingsInput]
+    $termsAndConditionsAgreedVersion: String
+    $avatar: ImageInput
+    $locationName: String # empty string '' sets it to null
+    $locale: String
   ) {
     UpdateUser(
       id: $id
+      slug: $slug
       name: $name
-      termsAndConditionsAgreedVersion: $termsAndConditionsAgreedVersion
-      locationName: $locationName
+      about: $about
+      allowEmbedIframes: $allowEmbedIframes
+      showShoutsPublicly: $showShoutsPublicly
       emailNotificationSettings: $emailNotificationSettings
+      termsAndConditionsAgreedVersion: $termsAndConditionsAgreedVersion
+      avatar: $avatar
+      locationName: $locationName
+      locale: $locale
     ) {
       id
+      slug
       name
+      about
+      allowEmbedIframes
+      showShoutsPublicly
       termsAndConditionsAgreedVersion
       termsAndConditionsAgreedAt
       locationName
+      locale
       location {
         name
         nameDE
@@ -33,6 +50,18 @@ export const UpdateUser = gql`
           value
         }
       }
+      avatar {
+        url
+        alt
+        sensitive
+        aspectRatio
+        type
+      }
+      badgeVerification {
+        id
+        description
+        icon
+      }
     }
   }
 `
diff --git a/cypress/support/step_definitions/Internationalization/I_select_{string}_in_the_language_menu.js b/cypress/support/step_definitions/Internationalization/I_select_{string}_in_the_language_menu.js
index 48e1d4b59..450ac2673 100644
--- a/cypress/support/step_definitions/Internationalization/I_select_{string}_in_the_language_menu.js
+++ b/cypress/support/step_definitions/Internationalization/I_select_{string}_in_the_language_menu.js
@@ -1,7 +1,8 @@
 import { defineStep } from '@badeball/cypress-cucumber-preprocessor'
 
 defineStep('I select {string} in the language menu', language => {
-    cy.get('.locale-menu')
+    cy.get('.locale-menu:visible')
+      .first()
       .click()
     cy.contains('.locale-menu-popover a', language)
       .click()
diff --git a/cypress/support/step_definitions/Notification.Mention/open_the_notification_menu_and_click_on_the_first_item.js b/cypress/support/step_definitions/Notification.Mention/open_the_notification_menu_and_click_on_the_first_item.js
index 534db2a56..d8d898559 100644
--- a/cypress/support/step_definitions/Notification.Mention/open_the_notification_menu_and_click_on_the_first_item.js
+++ b/cypress/support/step_definitions/Notification.Mention/open_the_notification_menu_and_click_on_the_first_item.js
@@ -1,7 +1,8 @@
 import { defineStep } from '@badeball/cypress-cucumber-preprocessor'
 
 defineStep('open the notification menu and click on the first item', () => {
-  cy.get('.notifications-menu')
+  cy.get('.notifications-menu:visible')
+    .first()
     .invoke('show')
     .click() // 'invoke('show')' because of the delay for show the menu
   cy.get('.notification-content a')
diff --git a/cypress/support/step_definitions/Notification.Mention/see_{int}_unread_notifications_in_the_top_menu.js b/cypress/support/step_definitions/Notification.Mention/see_{int}_unread_notifications_in_the_top_menu.js
index eebb5b877..67ef47674 100644
--- a/cypress/support/step_definitions/Notification.Mention/see_{int}_unread_notifications_in_the_top_menu.js
+++ b/cypress/support/step_definitions/Notification.Mention/see_{int}_unread_notifications_in_the_top_menu.js
@@ -1,6 +1,7 @@
 import { defineStep } from '@badeball/cypress-cucumber-preprocessor'
 
 defineStep('see {int} unread notifications in the top menu', count => {
-  cy.get('.notifications-menu')
+  cy.get('.notifications-menu:visible')
+    .first()
     .should('contain', count)
 })
diff --git a/cypress/support/step_definitions/Notification.Mention/the_notification_menu_button_links_to_the_all_notifications_page.js b/cypress/support/step_definitions/Notification.Mention/the_notification_menu_button_links_to_the_all_notifications_page.js
index 3cdbeb305..fd9090e8f 100644
--- a/cypress/support/step_definitions/Notification.Mention/the_notification_menu_button_links_to_the_all_notifications_page.js
+++ b/cypress/support/step_definitions/Notification.Mention/the_notification_menu_button_links_to_the_all_notifications_page.js
@@ -1,7 +1,8 @@
 import { defineStep } from '@badeball/cypress-cucumber-preprocessor'
 
 defineStep('the notification menu button links to the all notifications page', () => {
-  cy.get('.notifications-menu')
+  cy.get('.notifications-menu:visible')
+    .first()
     .click()
   cy.location('pathname')
     .should('contain', '/notifications')
diff --git a/packages/ui/src/ocelot/icons/svgs/language.svg b/packages/ui/src/ocelot/icons/svgs/language.svg
new file mode 100644
index 000000000..30af3ee58
--- /dev/null
+++ b/packages/ui/src/ocelot/icons/svgs/language.svg
@@ -0,0 +1,5 @@
+<!-- Font Awesome Free 6.7.2 "language" icon (CC BY 4.0) -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 640 512">
+<title>language</title>
+<path d="M0 128C0 92.7 28.7 64 64 64l192 0 48 0 16 0 256 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64l-256 0-16 0-48 0L64 448c-35.3 0-64-28.7-64-64L0 128zm320 0l0 256 256 0 0-256-256 0zM178.3 175.9c-3.2-7.2-10.4-11.9-18.3-11.9s-15.1 4.7-18.3 11.9l-64 144c-4.5 10.1 .1 21.9 10.2 26.4s21.9-.1 26.4-10.2l8.9-20.1 73.6 0 8.9 20.1c4.5 10.1 16.3 14.6 26.4 10.2s14.6-16.3 10.2-26.4l-64-144zM160 233.2L179 276l-38 0 19-42.8zM448 164c11 0 20 9 20 20l0 4 44 0 16 0c11 0 20 9 20 20s-9 20-20 20l-2 0-1.6 4.5c-8.9 24.4-22.4 46.6-39.6 65.4c.9 .6 1.8 1.1 2.7 1.6l18.9 11.3c9.5 5.7 12.5 18 6.9 27.4s-18 12.5-27.4 6.9l-18.9-11.3c-4.5-2.7-8.8-5.5-13.1-8.5c-10.6 7.5-21.9 14-34 19.4l-3.6 1.6c-10.1 4.5-21.9-.1-26.4-10.2s.1-21.9 10.2-26.4l3.6-1.6c6.4-2.9 12.6-6.1 18.5-9.8l-12.2-12.2c-7.8-7.8-7.8-20.5 0-28.3s20.5-7.8 28.3 0l14.6 14.6 .5 .5c12.4-13.1 22.5-28.3 29.8-45L448 228l-72 0c-11 0-20-9-20-20s9-20 20-20l52 0 0-4c0-11 9-20 20-20z"/>
+</svg>
diff --git a/webapp/assets/_new/styles/tokens.scss b/webapp/assets/_new/styles/tokens.scss
index f4ac15b3f..69c269f9e 100644
--- a/webapp/assets/_new/styles/tokens.scss
+++ b/webapp/assets/_new/styles/tokens.scss
@@ -359,6 +359,7 @@ $media-query-small: "(min-width: 600px)";
 $media-query-medium: "(min-width: 768px)";
 $media-query-large: "(min-width: 1024px)";
 $media-query-x-large: "(min-width: 1200px)";
+$container-max-width-x-large: 1200px;
 
 /**
  * @tokens Background Images
diff --git a/webapp/components/DonationInfo/DonationInfo.vue b/webapp/components/DonationInfo/DonationInfo.vue
index 0e935271a..b99a30993 100644
--- a/webapp/components/DonationInfo/DonationInfo.vue
+++ b/webapp/components/DonationInfo/DonationInfo.vue
@@ -1,26 +1,28 @@
 <template>
-  <div class="donation-info">
+  <page-params-link :pageParams="links.DONATE" class="donation-info">
     <progress-bar :label="label" :goal="goal" :progress="progress">
-      <os-button size="sm" variant="primary" @click="redirectToPage(links.DONATE)">
+      <os-button size="sm" variant="primary">
         {{ $t('donations.donate-now') }}
         <template #suffix>
           <os-icon :icon="icons.heartO" />
         </template>
       </os-button>
     </progress-bar>
-  </div>
+  </page-params-link>
 </template>
 
 <script>
 import { OsButton, OsIcon } from '@ocelot-social/ui'
 import { iconRegistry } from '~/utils/iconRegistry'
 import links from '~/constants/links.js'
+import PageParamsLink from '~/components/_new/features/PageParamsLink/PageParamsLink.vue'
 import ProgressBar from '~/components/ProgressBar/ProgressBar.vue'
 
 export default {
   components: {
     OsButton,
     OsIcon,
+    PageParamsLink,
     ProgressBar,
   },
   props: {
@@ -44,11 +46,6 @@ export default {
       })
     },
   },
-  methods: {
-    redirectToPage(pageParams) {
-      pageParams.redirectToPage(this)
-    },
-  },
 }
 </script>
 
@@ -58,5 +55,6 @@ export default {
   flex: 1;
   margin-bottom: $space-x-small;
   margin-top: 16px;
+  cursor: pointer;
 }
 </style>
diff --git a/webapp/components/FilterMenu/FilterMenu.vue b/webapp/components/FilterMenu/FilterMenu.vue
index 67f7b0dc9..100cf964f 100644
--- a/webapp/components/FilterMenu/FilterMenu.vue
+++ b/webapp/components/FilterMenu/FilterMenu.vue
@@ -1,16 +1,16 @@
 <template>
-  <dropdown ref="menu" placement="top-start" :offset="8" class="filter-menu">
+  <dropdown ref="menu" :placement="placement" :offset="offset" class="filter-menu">
     <template #default="{ toggleMenu }">
       <os-button
         variant="primary"
         :appearance="filterActive ? 'filled' : 'ghost'"
+        circle
         :aria-label="$t('common.filter')"
         @click.prevent="toggleMenu()"
       >
         <template #icon>
           <os-icon :icon="icons.filter" />
         </template>
-        <os-icon class="dropdown-arrow" :icon="icons.angleDown" />
       </os-button>
     </template>
     <template #popover>
@@ -34,8 +34,8 @@ export default {
     OsIcon,
   },
   props: {
-    placement: { type: String },
-    offset: { type: [String, Number] },
+    placement: { type: String, default: 'top-start' },
+    offset: { type: [String, Number], default: 8 },
   },
   computed: {
     ...mapGetters({
diff --git a/webapp/components/FilterMenu/FilterMenuSection.vue b/webapp/components/FilterMenu/FilterMenuSection.vue
index 7e82fa47e..6b9a98fee 100644
--- a/webapp/components/FilterMenu/FilterMenuSection.vue
+++ b/webapp/components/FilterMenu/FilterMenuSection.vue
@@ -61,6 +61,7 @@ export default {
 
   > .filter-list {
     display: flex;
+    flex-wrap: wrap;
     flex-basis: 100%;
     flex-grow: 1;
     padding-left: $space-base;
diff --git a/webapp/components/HeaderMenu/HeaderMenu.vue b/webapp/components/HeaderMenu/HeaderMenu.vue
index b80d927f2..303bd7f2c 100644
--- a/webapp/components/HeaderMenu/HeaderMenu.vue
+++ b/webapp/components/HeaderMenu/HeaderMenu.vue
@@ -5,8 +5,8 @@
     id="navbar"
   >
     <div>
-      <!-- header menu -->
-      <div v-if="!showMobileMenu" class="ds-flex main-navigation-flex">
+      <!-- header menu (desktop) -->
+      <div class="ds-flex main-navigation-flex desktop-menu">
         <!-- logo -->
         <div class="ds-flex-item logo-wrapper" style="flex: 0 0 auto">
           <a
@@ -51,20 +51,13 @@
         >
           <search-field />
         </div>
-        <!-- filter menu -->
-        <!-- TODO: Filter is only visible on index -->
-        <div
-          v-if="isLoggedIn && SHOW_CONTENT_FILTER_HEADER_MENU"
-          class="ds-flex-item"
-          style="flex-grow: 0; flex-basis: auto"
-        >
-          <client-only>
-            <filter-menu v-show="showFilterMenuDropdown" />
-          </client-only>
-        </div>
         <!-- right symbols -->
         <div class="ds-flex-item" style="flex: none">
           <div class="main-navigation-right" style="flex-basis: auto">
+            <!-- filter menu -->
+            <client-only v-if="isLoggedIn && SHOW_CONTENT_FILTER_HEADER_MENU">
+              <filter-menu v-show="showFilterMenuDropdown" />
+            </client-only>
             <!-- locale switch -->
             <locale-switch class="topbar-locale-switch" placement="top" offset="8" />
             <template v-if="isLoggedIn">
@@ -135,51 +128,67 @@
       </div>
 
       <!-- mobile header menu -->
-      <div v-else class="mobil-header-box">
-        <!-- logo, hamburger-->
-        <div class="ds-flex" style="align-items: center">
+      <div
+        class="mobil-header-box mobile-menu"
+        :class="{ 'mobil-header-box--open': toggleMobileMenu }"
+        ref="mobileMenu"
+      >
+        <!-- Zeile 1: Logo/Search + Burger -->
+        <div class="ds-flex mobile-header-row" style="align-items: center">
+          <!-- logo (only when closed) -->
           <div
+            v-if="!toggleMobileMenu"
             class="ds-flex-item logo-container"
             :style="{ flex: '0 0 ' + LOGOS.LOGO_HEADER_WIDTH, width: LOGOS.LOGO_HEADER_WIDTH }"
           >
-            <div @click="toggleMobileMenu ? toggleMobileMenuView() : ''">
-              <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>
-            </div>
+            <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>
+          </div>
+
+          <!-- search field (only when open + logged in) -->
+          <div v-if="isLoggedIn && toggleMobileMenu" class="ds-flex-item mobile-header-search">
+            <search-field />
           </div>
 
           <!-- mobile hamburger menu -->
-          <div class="ds-flex-item mobile-hamburger-menu">
-            <client-only>
-              <!-- chat menu -->
-              <div>
-                <chat-notification-menu />
-              </div>
-              <!-- notification menu -->
-              <div>
-                <notification-menu no-menu />
-              </div>
-            </client-only>
-            <!-- hamburger menu -->
+          <div
+            class="ds-flex-item mobile-hamburger-menu"
+            :style="{ flex: toggleMobileMenu ? '0 0 auto' : '1 0 auto' }"
+          >
+            <!-- chat + notifications + filter only when closed -->
+            <template v-if="!toggleMobileMenu">
+              <client-only v-if="isLoggedIn && filterActive && SHOW_CONTENT_FILTER_HEADER_MENU">
+                <filter-menu />
+              </client-only>
+              <client-only>
+                <div>
+                  <chat-notification-menu />
+                </div>
+                <div>
+                  <notification-menu no-menu />
+                </div>
+              </client-only>
+            </template>
+            <!-- hamburger button -->
             <os-button
               variant="primary"
-              :appearance="toggleMobileMenu ? 'filled' : 'outline'"
+              :appearance="toggleMobileMenu ? 'filled' : 'ghost'"
               circle
               class="hamburger-button"
               :aria-label="$t('site.navigation')"
-              @click="toggleMobileMenuView"
+              @click.stop="toggleMobileMenuView"
             >
               <template #icon>
                 <os-icon :icon="icons.bars" />
@@ -187,168 +196,327 @@
             </os-button>
           </div>
         </div>
-        <!-- search, filter -->
-        <div class="ds-flex mobile-menu">
-          <!-- search field mobile -->
-          <div
-            v-if="isLoggedIn"
-            class="ds-flex-item"
-            :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
-            style="padding: 20px"
-          >
-            <search-field />
-          </div>
-          <!-- filter menu mobile -->
-          <div
-            v-if="isLoggedIn"
-            class="ds-flex-item"
-            :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
-            style="flex-grow: 0; flex-basis: auto; padding: 20px 0"
-          >
-            <client-only>
-              <filter-menu v-if="showFilterMenuDropdown && SHOW_CONTENT_FILTER_HEADER_MENU" />
-            </client-only>
-          </div>
-        </div>
-        <!-- right symbols -->
-        <div class="ds-flex" style="margin: 0 20px">
-          <!-- locale switch mobile -->
-          <div class="ds-flex-item" :class="{ 'hide-mobile-menu': !toggleMobileMenu }">
-            <locale-switch
-              class="topbar-locale-switch topbar-locale-switch-mobile"
-              placement="top"
-              offset="8"
-            />
-          </div>
-          <!-- invite button mobile -->
-          <div
-            v-if="inviteRegistration"
-            class="ds-flex-item"
-            :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
-            style="text-align: center"
-          >
-            <client-only>
-              <invite-button placement="top" />
-            </client-only>
-          </div>
-          <!-- group button -->
-          <div
-            v-if="SHOW_GROUP_BUTTON_IN_HEADER"
-            class="ds-flex-item"
-            :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
-            style="text-align: center"
-          >
-            <client-only>
-              <div @click="toggleMobileMenuView">
-                <os-button
-                  as="nuxt-link"
-                  to="/groups"
-                  variant="primary"
-                  appearance="ghost"
-                  circle
-                  :aria-label="$t('header.groups.tooltip')"
-                  v-tooltip="{
-                    content: $t('header.groups.tooltip'),
-                    placement: 'bottom-start',
-                  }"
-                >
-                  <template #icon>
-                    <os-icon :icon="icons.users" />
-                  </template>
-                </os-button>
+
+        <!-- Scrollable menu content (only when open) -->
+        <div v-if="toggleMobileMenu" class="mobile-menu-scroll">
+          <!-- User info with collapsible menu (only when open + logged in) -->
+          <div v-if="isLoggedIn" class="mobile-user-info">
+            <div
+              class="mobile-user-header"
+              role="button"
+              tabindex="0"
+              :aria-expanded="String(mobileAvatarMenuOpen)"
+              @click="mobileAvatarMenuOpen = !mobileAvatarMenuOpen"
+              @keydown.enter.prevent="mobileAvatarMenuOpen = !mobileAvatarMenuOpen"
+              @keydown.space.prevent="mobileAvatarMenuOpen = !mobileAvatarMenuOpen"
+            >
+              <profile-avatar :profile="user" size="small" class="mobile-avatar" />
+              <div class="mobile-user-details">
+                <b>{{ userName }}</b>
+                <span v-if="user.role !== 'user'" class="mobile-user-role">
+                  {{ user.role | camelCase }}
+                </span>
               </div>
-            </client-only>
+              <os-button
+                variant="primary"
+                appearance="ghost"
+                circle
+                tabindex="-1"
+                aria-hidden="true"
+                class="mobile-collapse-toggle"
+              >
+                <template #icon>
+                  <os-icon :icon="mobileAvatarMenuOpen ? icons.angleUp : icons.angleDown" />
+                </template>
+              </os-button>
+            </div>
+            <div v-if="mobileAvatarMenuOpen" class="mobile-avatar-menu-items">
+              <nuxt-link
+                v-for="route in mobileAvatarRoutes"
+                :key="route.path"
+                :to="route.path"
+                class="mobile-avatar-menu-item"
+                @click.native="toggleMobileMenuView"
+              >
+                <os-icon :icon="route.icon" class="mobile-icon-col" />
+                {{ route.name }}
+              </nuxt-link>
+            </div>
           </div>
-          <!-- map button -->
-          <div
-            v-if="!isEmpty(this.$env.MAPBOX_TOKEN)"
-            class="ds-flex-item"
-            :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
-            style="text-align: center"
-          >
-            <client-only>
-              <div @click="toggleMobileMenuView">
-                <os-button
-                  as="nuxt-link"
-                  to="/map"
-                  class="map-button"
-                  variant="primary"
-                  appearance="ghost"
-                  circle
-                  :aria-label="$t('header.map.tooltip')"
-                  v-tooltip="{
-                    content: $t('header.map.tooltip'),
-                    placement: 'bottom-start',
-                  }"
-                >
-                  <template #icon>
-                    <os-icon :icon="icons.globeDetailed" size="xl" />
-                  </template>
-                </os-button>
-              </div>
-            </client-only>
-          </div>
-          <!-- custom button -->
-          <div
-            v-if="!isEmpty(customButton)"
-            class="ds-flex-item"
-            :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
-            style="text-align: center"
-          >
-            <client-only>
-              <div @click="toggleMobileMenuView">
+
+          <!-- Mobile nav items (only when open + logged in) -->
+          <div v-if="isLoggedIn" class="mobile-nav-items">
+            <nuxt-link to="/chat" class="mobile-nav-item" @click.native="toggleMobileMenuView">
+              <client-only>
+                <chat-notification-menu class="mobile-icon-col" />
+              </client-only>
+              <span>{{ $t('header.chats.tooltip') }}</span>
+            </nuxt-link>
+            <nuxt-link
+              to="/notifications"
+              class="mobile-nav-item"
+              @click.native="toggleMobileMenuView"
+            >
+              <client-only>
+                <notification-menu no-menu class="mobile-icon-col" />
+              </client-only>
+              <span>{{ $t('header.notifications.tooltip') }}</span>
+            </nuxt-link>
+            <nuxt-link
+              v-if="!isEmpty(this.$env.MAPBOX_TOKEN)"
+              to="/map"
+              class="mobile-nav-item"
+              @click.native="toggleMobileMenuView"
+            >
+              <os-button
+                variant="primary"
+                appearance="ghost"
+                circle
+                class="mobile-nav-icon-button mobile-icon-col map-button"
+              >
+                <template #icon>
+                  <os-icon :icon="icons.globeDetailed" size="xl" />
+                </template>
+              </os-button>
+              <span>{{ $t('header.map.tooltip') }}</span>
+            </nuxt-link>
+            <nuxt-link
+              v-if="SHOW_GROUP_BUTTON_IN_HEADER"
+              to="/groups"
+              class="mobile-nav-item"
+              @click.native="toggleMobileMenuView"
+            >
+              <os-button
+                variant="primary"
+                appearance="ghost"
+                circle
+                class="mobile-nav-icon-button mobile-icon-col"
+              >
+                <template #icon>
+                  <os-icon :icon="icons.users" />
+                </template>
+              </os-button>
+              <span>{{ $t('header.groups.tooltip') }}</span>
+            </nuxt-link>
+            <nuxt-link
+              v-if="inviteRegistration"
+              to="/settings/invites"
+              class="mobile-nav-item"
+              @click.native="toggleMobileMenuView"
+            >
+              <os-button
+                variant="primary"
+                appearance="ghost"
+                circle
+                class="mobile-nav-icon-button mobile-icon-col"
+              >
+                <template #icon>
+                  <os-icon :icon="icons.userPlus" />
+                </template>
+              </os-button>
+              <span>{{ $t('invite-codes.button.tooltip') }}</span>
+            </nuxt-link>
+            <template v-if="!isEmpty(customButton)">
+              <div class="mobile-nav-item" @click="toggleMobileMenuView">
                 <custom-button :settings="customButton" />
               </div>
-            </client-only>
+            </template>
           </div>
-          <!-- avatar menu mobile -->
-          <div
-            class="ds-flex-item"
-            :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
-            style="text-align: end"
-          >
-            <client-only>
-              <avatar-menu placement="top" @toggle-Mobile-Menu-view="toggleMobileMenuView" />
-            </client-only>
-          </div>
-        </div>
-        <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"
-                @click="toggleMobileMenuView"
+
+          <!-- filter menu (only when open + logged in + on index page) -->
+          <div v-if="isLoggedIn && SHOW_CONTENT_FILTER_HEADER_MENU" class="mobile-filter-section">
+            <div
+              class="mobile-nav-item"
+              role="button"
+              tabindex="0"
+              :aria-expanded="String(mobileFilterMenuOpen)"
+              @click="mobileFilterMenuOpen = !mobileFilterMenuOpen"
+              @keydown.enter.prevent="mobileFilterMenuOpen = !mobileFilterMenuOpen"
+              @keydown.space.prevent="mobileFilterMenuOpen = !mobileFilterMenuOpen"
+            >
+              <os-button
+                variant="primary"
+                appearance="ghost"
+                circle
+                class="mobile-nav-icon-button mobile-icon-col"
               >
-                <p class="ds-text ds-text-size-large ds-text-bold">
-                  {{ $t(item.nameIdent) }}
-                </p>
-              </a>
-              <nuxt-link v-else :to="item.path">
-                <div @click="toggleMobileMenuView">
-                  <p class="ds-text ds-text-size-large ds-text-bold">
-                    {{ $t(item.nameIdent) }}
-                  </p>
-                </div>
-              </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"
+                <template #icon>
+                  <os-icon :icon="icons.filter" />
+                </template>
+              </os-button>
+              <span>{{ $t('common.filter') }}</span>
+              <os-button
+                variant="primary"
+                appearance="ghost"
+                circle
+                tabindex="-1"
+                aria-hidden="true"
+                class="mobile-collapse-toggle"
+              >
+                <template #icon>
+                  <os-icon :icon="mobileFilterMenuOpen ? icons.angleUp : icons.angleDown" />
+                </template>
+              </os-button>
+            </div>
+            <div
+              v-if="mobileFilterMenuOpen"
+              class="mobile-filter-items"
               @click="toggleMobileMenuView"
             >
-              <page-params-link :pageParams="pageParams">
+              <client-only>
+                <filter-menu-component />
+              </client-only>
+            </div>
+          </div>
+
+          <!-- Locale switch collapsible (only when open) -->
+          <div class="mobile-locale-section">
+            <div
+              class="mobile-nav-item"
+              role="button"
+              tabindex="0"
+              :aria-expanded="String(mobileLocaleMenuOpen)"
+              @click="mobileLocaleMenuOpen = !mobileLocaleMenuOpen"
+              @keydown.enter.prevent="mobileLocaleMenuOpen = !mobileLocaleMenuOpen"
+              @keydown.space.prevent="mobileLocaleMenuOpen = !mobileLocaleMenuOpen"
+            >
+              <os-button
+                variant="primary"
+                appearance="ghost"
+                circle
+                class="mobile-nav-icon-button mobile-icon-col"
+              >
+                <template #icon>
+                  <os-icon :icon="icons.language" />
+                </template>
+              </os-button>
+              <span>{{ $t('localeSwitch.tooltip') }} ({{ currentLocale.code.toUpperCase() }})</span>
+              <os-button
+                variant="primary"
+                appearance="ghost"
+                circle
+                tabindex="-1"
+                aria-hidden="true"
+                class="mobile-collapse-toggle"
+              >
+                <template #icon>
+                  <os-icon :icon="mobileLocaleMenuOpen ? icons.angleUp : icons.angleDown" />
+                </template>
+              </os-button>
+            </div>
+            <div v-if="mobileLocaleMenuOpen" class="mobile-locale-items">
+              <a
+                v-for="locale in sortedLocales"
+                :key="locale.code"
+                href="#"
+                class="mobile-locale-item"
+                :class="{ '--active': locale.code === $i18n.locale() }"
+                @click.prevent="changeLocale(locale.code)"
+              >
+                <span class="mobile-locale-flag mobile-icon-col">{{ locale.flag }}</span>
+                {{ locale.name }}
+              </a>
+            </div>
+          </div>
+
+          <!-- "More" collapsible section (only when open) -->
+          <div class="mobile-more-section">
+            <div
+              class="mobile-more-header"
+              role="button"
+              tabindex="0"
+              :aria-expanded="String(mobileMoreMenuOpen)"
+              @click="mobileMoreMenuOpen = !mobileMoreMenuOpen"
+              @keydown.enter.prevent="mobileMoreMenuOpen = !mobileMoreMenuOpen"
+              @keydown.space.prevent="mobileMoreMenuOpen = !mobileMoreMenuOpen"
+            >
+              <os-button
+                variant="primary"
+                appearance="ghost"
+                circle
+                class="mobile-nav-icon-button mobile-icon-col"
+              >
+                <template #icon>
+                  <os-icon :icon="icons.questionCircle" />
+                </template>
+              </os-button>
+              <span>{{ $t('header.more') }}</span>
+              <os-button
+                variant="primary"
+                appearance="ghost"
+                circle
+                tabindex="-1"
+                aria-hidden="true"
+                class="mobile-collapse-toggle"
+              >
+                <template #icon>
+                  <os-icon :icon="mobileMoreMenuOpen ? icons.angleUp : icons.angleDown" />
+                </template>
+              </os-button>
+            </div>
+            <div v-if="mobileMoreMenuOpen" class="mobile-more-items">
+              <!-- dynamic branding menus -->
+              <template v-if="isHeaderMenu">
+                <template v-for="item in menu">
+                  <a
+                    v-if="item.url"
+                    :key="item.name"
+                    :href="item.url"
+                    :target="item.target"
+                    class="mobile-more-item"
+                    @click="toggleMobileMenuView"
+                  >
+                    <os-icon :icon="icons.link" class="mobile-icon-col" />
+                    {{ $t(item.nameIdent) }}
+                  </a>
+                  <nuxt-link
+                    v-else
+                    :key="item.name"
+                    :to="item.path"
+                    class="mobile-more-item"
+                    @click.native="toggleMobileMenuView"
+                  >
+                    <os-icon :icon="icons.link" class="mobile-icon-col" />
+                    {{ $t(item.nameIdent) }}
+                  </nuxt-link>
+                </template>
+                <hr />
+              </template>
+              <!-- dynamic footer links -->
+              <page-params-link
+                v-for="pageParams in links.FOOTER_LINK_LIST"
+                :key="pageParams.name"
+                :pageParams="pageParams"
+                class="mobile-more-item"
+                @click.native="toggleMobileMenuView"
+              >
+                <os-icon :icon="moreItemIcon(pageParams.name)" class="mobile-icon-col" />
                 {{ $t(pageParams.internalPage.footerIdent) }}
               </page-params-link>
-            </li>
-          </ul>
+            </div>
+          </div>
+
+          <!-- Logout (only when open + logged in) -->
+          <nuxt-link
+            v-if="isLoggedIn"
+            :to="{ name: 'logout' }"
+            class="mobile-nav-item mobile-logout-item"
+            @click.native="toggleMobileMenuView"
+          >
+            <os-button
+              variant="danger"
+              appearance="ghost"
+              circle
+              class="mobile-nav-icon-button mobile-icon-col"
+            >
+              <template #icon>
+                <os-icon :icon="icons.signOut" />
+              </template>
+            </os-button>
+            <span>{{ $t('login.logout') }}</span>
+          </nuxt-link>
         </div>
+        <!-- /mobile-menu-scroll -->
       </div>
     </div>
   </div>
@@ -358,7 +526,11 @@
 import { OsButton, OsIcon } from '@ocelot-social/ui'
 import { iconRegistry } from '~/utils/iconRegistry'
 import { mapGetters } from 'vuex'
+import find from 'lodash/find'
 import isEmpty from 'lodash/isEmpty'
+import orderBy from 'lodash/orderBy'
+import throttle from 'lodash/throttle'
+import locales from '~/locales'
 import { SHOW_GROUP_BUTTON_IN_HEADER } from '~/constants/groups.js'
 import { SHOW_CONTENT_FILTER_HEADER_MENU } from '~/constants/filter.js'
 import LOGOS from '~/constants/logosBranded.js'
@@ -366,6 +538,7 @@ import AvatarMenu from '~/components/AvatarMenu/AvatarMenu'
 import ChatNotificationMenu from '~/components/ChatNotificationMenu/ChatNotificationMenu'
 import CustomButton from '~/components/CustomButton/CustomButton'
 import FilterMenu from '~/components/FilterMenu/FilterMenu.vue'
+import FilterMenuComponent from '~/components/FilterMenu/FilterMenuComponent'
 import headerMenuBranded from '~/constants/headerMenuBranded.js'
 import InviteButton from '~/components/InviteButton/InviteButton'
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
@@ -374,10 +547,12 @@ 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 ProfileAvatar from '~/components/_new/generic/ProfileAvatar/ProfileAvatar'
 import GetCategories from '~/mixins/getCategoriesMixin.js'
+import localeUpdate from '~/mixins/localeUpdate.js'
 
 export default {
-  mixins: [GetCategories],
+  mixins: [GetCategories, localeUpdate],
   components: {
     OsButton,
     OsIcon,
@@ -385,20 +560,20 @@ export default {
     ChatNotificationMenu,
     CustomButton,
     FilterMenu,
+    FilterMenuComponent,
     InviteButton,
     LocaleSwitch,
     Logo,
     NotificationMenu,
     PageParamsLink,
+    ProfileAvatar,
     SearchField,
   },
-  props: {
-    showMobileMenu: { type: Boolean, default: false },
-  },
   data() {
     return {
       hideNavbar: false,
       prevScrollpos: 0,
+      navbarRevealedByHover: false,
       isEmpty,
       links,
       LOGOS,
@@ -407,29 +582,111 @@ export default {
       isHeaderMenu: headerMenuBranded.MENU.length > 0,
       customButton: headerMenuBranded.CUSTOM_BUTTON,
       menu: headerMenuBranded.MENU,
-      mobileSearchVisible: false,
       toggleMobileMenu: false,
+      mobileAvatarMenuToggled: null,
+      mobileMoreMenuToggled: null,
+      mobileFilterMenuOpen: false,
+      mobileLocaleMenuOpen: 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,
     }
   },
   computed: {
     ...mapGetters({
       isLoggedIn: 'auth/isLoggedIn',
+      user: 'auth/user',
+      isModerator: 'auth/isModerator',
+      isAdmin: 'auth/isAdmin',
+      filterActive: 'posts/isActive',
     }),
     showFilterMenuDropdown() {
       const [firstRoute] = this.$route.matched
       return firstRoute && firstRoute.name === 'index'
     },
+    userName() {
+      const { name } = this.user || {}
+      return name || this.$t('profile.userAnonym')
+    },
+    currentLocale() {
+      return find(locales, { code: this.$i18n.locale() }) || locales[0]
+    },
+    sortedLocales() {
+      return orderBy(locales, 'name')
+    },
+    mobileAvatarMenuOpen: {
+      get() {
+        if (this.mobileAvatarMenuToggled !== null) return this.mobileAvatarMenuToggled
+        return this.mobileAvatarRoutes.some((route) => this.$route.path.indexOf(route.path) === 0)
+      },
+      set(val) {
+        this.mobileAvatarMenuToggled = val
+      },
+    },
+    mobileMoreMenuOpen: {
+      get() {
+        if (this.mobileMoreMenuToggled !== null) return this.mobileMoreMenuToggled
+        const footerPaths = this.links.FOOTER_LINK_LIST.map(
+          (p) => p.internalPage && p.internalPage.pageRoute,
+        ).filter(Boolean)
+        return footerPaths.some((path) => this.$route.path.indexOf(path) === 0)
+      },
+      set(val) {
+        this.mobileMoreMenuToggled = val
+      },
+    },
+    mobileAvatarRoutes() {
+      if (!this.user || !this.user.slug) return []
+      const routes = [
+        {
+          name: this.$t('header.avatarMenu.myProfile'),
+          path: `/profile/${this.user.id}/${this.user.slug}`,
+          icon: this.icons.user,
+        },
+        {
+          name: this.$t('settings.name'),
+          path: '/settings',
+          icon: this.icons.cogs,
+        },
+      ]
+      if (this.isModerator) {
+        routes.push({
+          name: this.$t('moderation.name'),
+          path: '/moderation',
+          icon: this.icons.balanceScale,
+        })
+      }
+      if (this.isAdmin) {
+        routes.push({
+          name: this.$t('admin.name'),
+          path: '/admin',
+          icon: this.icons.shield,
+        })
+      }
+      return routes
+    },
+  },
+  watch: {
+    $route() {
+      if (this.toggleMobileMenu) {
+        this.toggleMobileMenuView()
+      }
+    },
   },
   created() {
     this.icons = iconRegistry
+    this.throttledMouseMove = throttle(this.handleMouseMove, 100)
   },
   methods: {
     handleScroll() {
+      if (this.toggleMobileMenu) return
       const currentScrollPos = window.pageYOffset
       const wasHidden = this.hideNavbar
       if (this.prevScrollpos > 50) {
-        this.hideNavbar = this.prevScrollpos <= currentScrollPos
+        if (this.prevScrollpos > currentScrollPos) {
+          this.hideNavbar = false
+          this.navbarRevealedByHover = false
+        } else {
+          this.hideNavbar = true
+        }
       }
       this.prevScrollpos = currentScrollPos
       if (wasHidden !== this.hideNavbar) {
@@ -443,17 +700,72 @@ export default {
         document.documentElement.style.setProperty('--header-height', `${height}px`)
       }
     },
+    handleMouseMove(event) {
+      if (this.hideNavbar && event.clientY < 50) {
+        this.hideNavbar = false
+        this.navbarRevealedByHover = true
+      } else if (this.navbarRevealedByHover && !this.hideNavbar) {
+        const rect = this.$el.getBoundingClientRect()
+        if (event.clientY > rect.bottom + 50) {
+          this.hideNavbar = true
+          this.navbarRevealedByHover = false
+        }
+      }
+    },
+    handleClickOutside(event) {
+      if (
+        this.toggleMobileMenu &&
+        this.$refs.mobileMenu &&
+        !this.$refs.mobileMenu.contains(event.target)
+      ) {
+        this.toggleMobileMenuView()
+      }
+    },
     toggleMobileMenuView() {
       this.toggleMobileMenu = !this.toggleMobileMenu
       this.$nextTick(() => this.updateHeaderOffset())
+      if (this.toggleMobileMenu) {
+        document.body.style.overflow = 'hidden'
+      } else {
+        document.body.style.overflow = ''
+        this.mobileAvatarMenuToggled = null
+        this.mobileMoreMenuToggled = null
+        this.mobileFilterMenuOpen = false
+        this.mobileLocaleMenuOpen = false
+      }
     },
+    moreItemIcon(name) {
+      const iconMap = {
+        organization: this.icons.home,
+        'terms-and-conditions': this.icons.book,
+        'code-of-conduct': this.icons.handPointer,
+        'data-privacy': this.icons.lock,
+        faq: this.icons.questionCircle,
+        donate: this.icons.heartO,
+        support: this.icons.comments,
+        imprint: this.icons.balanceScale,
+      }
+      return iconMap[name] || this.icons.link
+    },
+    changeLocale(code) {
+      this.$i18n.set(code)
+      this.mobileLocaleMenuOpen = false
+      this.updateUserLocale()
+    },
+    // updateUserLocale() provided by localeUpdate mixin
   },
   mounted() {
-    window.addEventListener('scroll', this.handleScroll)
     this.$nextTick(() => this.updateHeaderOffset())
+    window.addEventListener('scroll', this.handleScroll)
+    document.addEventListener('mousemove', this.throttledMouseMove)
+    document.addEventListener('click', this.handleClickOutside)
   },
   beforeDestroy() {
+    document.body.style.overflow = ''
     window.removeEventListener('scroll', this.handleScroll)
+    document.removeEventListener('mousemove', this.throttledMouseMove)
+    this.throttledMouseMove.cancel()
+    document.removeEventListener('click', this.handleClickOutside)
   },
 }
 </script>
@@ -461,9 +773,33 @@ export default {
 <style lang="scss">
 #navbar {
   padding: 10px 10px;
+
+  // Show correct layout immediately via CSS (no FOUC)
+  .desktop-menu {
+    display: flex;
+  }
+  .mobile-menu {
+    display: none;
+  }
+  @media (max-width: 810px) {
+    .desktop-menu {
+      display: none !important;
+    }
+    .mobile-menu {
+      display: block;
+
+      &.mobil-header-box--open {
+        display: flex;
+      }
+    }
+  }
 }
-.hide-navbar {
-  display: none;
+.main-navigation {
+  transition: transform 0.3s ease;
+
+  &:has(.hide-navbar) {
+    transform: translateY(-100%);
+  }
 }
 .margin-right-20 {
   margin-right: 20px;
@@ -474,13 +810,10 @@ export default {
   white-space: nowrap;
 }
 .topbar-locale-switch {
-  margin-right: $space-xx-small;
+  margin-right: 0;
   align-self: center;
   display: inline-flex;
 }
-.topbar-locale-switch-mobile {
-  margin-top: $space-xx-small;
-}
 .main-navigation-flex {
   display: flex;
   align-items: center;
@@ -488,7 +821,7 @@ export default {
   gap: 20px;
   min-width: 0;
 }
-@media (max-width: 800px) {
+@media (max-width: 810px) {
   .main-navigation-flex {
     gap: 10px;
   }
@@ -510,27 +843,64 @@ export default {
 
 .main-navigation-right {
   display: flex;
+  align-items: center;
   justify-content: flex-end;
+  gap: 4px;
 }
 
 // Mobile Header mit verbessertem Layout
 .mobil-header-box {
-  .logo-container {
+  &.mobil-header-box--open {
+    display: flex;
+    flex-direction: column;
+    height: calc(100dvh - 20px);
+    margin: 0 -10px; // extend to screen edge
+    background-color: #fff;
+
+    > .mobile-header-row {
+      flex: 0 0 auto;
+      padding: 0 10px; // compensate negative margin
+    }
+
+    .mobile-user-header {
+      min-height: 46.5px;
+    }
+  }
+
+  .mobile-header-row {
+    flex-shrink: 0;
+  }
+
+  .mobile-menu-scroll {
     flex: 1 1 auto;
-    min-width: 60px;
-    max-width: calc(100vw - 200px);
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .logo-container {
+    min-width: 36px;
+  }
+
+  .mobile-icon-logo {
+    width: 36px;
+    height: 36px;
+  }
+
+  .mobile-header-search {
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: 0 10px 0 0;
   }
 
   .mobile-hamburger-menu {
-    flex: 0 0 auto; // no shrinking
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
     justify-content: flex-end;
-    gap: 10px;
+    gap: 5px;
 
     > div {
-      flex-shrink: 0; // Buttons remain their size
+      flex-shrink: 0;
 
       button {
         overflow: visible;
@@ -540,23 +910,282 @@ export default {
       }
     }
   }
+
   .hamburger-button .os-icon {
     height: 1.5em;
   }
-}
-.mobile-search {
-  margin-top: 20px;
-}
-.dynamic-branding-mobil,
-.dynamic-footer-mobil {
-  line-height: 30px;
-  font-size: large;
-}
-.dynamic-branding-mobil li {
-  margin: 17px 0;
-}
-.hide-mobile-menu {
-  display: none;
+
+  .mobile-collapse-toggle {
+    margin-left: auto;
+    flex-shrink: 0;
+    pointer-events: none; // Parent handles click
+  }
+
+  // Consistent icon column width across all menu items
+  .mobile-icon-col {
+    min-width: 36px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .mobile-nav-items {
+    padding: 0;
+  }
+
+  .mobile-nav-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 2px 10px;
+    color: $text-color-base;
+    min-height: 36px;
+
+    &:hover {
+      color: $text-color-link-active;
+      background-color: $background-color-soft;
+    }
+
+    &.nuxt-link-active,
+    &.router-link-active {
+      color: $text-color-link;
+      background-color: $background-color-soft;
+      box-shadow: inset 3px 0 0 $color-primary;
+    }
+
+    &.mobile-logout-item {
+      color: $text-color-danger;
+      border-top: 1px solid $color-neutral-90;
+      padding-top: 4px;
+      margin-top: 2px;
+
+      &:hover {
+        color: color.adjust($text-color-danger, $lightness: -10%);
+        background-color: $background-color-soft;
+      }
+
+      &.nuxt-link-active,
+      &.router-link-active {
+        color: $text-color-danger;
+        box-shadow: none;
+        background-color: transparent;
+      }
+    }
+
+    // Flatten embedded component buttons to plain icons
+    .chat-notification-menu,
+    .notifications-menu,
+    .mobile-nav-icon-button {
+      margin: 0;
+      display: inline-flex;
+      padding: 0;
+      border: none;
+      background: none;
+      box-shadow: none;
+      min-width: auto;
+      min-height: auto;
+      width: auto;
+      height: auto;
+      pointer-events: none; // Let parent nuxt-link handle navigation
+
+      &:hover,
+      &:focus {
+        background: none;
+        box-shadow: none;
+      }
+
+      .os-button {
+        padding: 0;
+        border: none;
+        background: none;
+        box-shadow: none;
+        min-width: auto;
+        min-height: auto;
+        width: auto;
+        height: auto;
+        pointer-events: none;
+
+        &:hover,
+        &:focus {
+          background: none;
+          box-shadow: none;
+        }
+      }
+    }
+  }
+
+  .mobile-user-info {
+    padding: 6px 0;
+    border-bottom: 1px solid $color-neutral-90;
+  }
+
+  .mobile-avatar.profile-avatar {
+    width: 42px;
+    height: 42px;
+  }
+
+  .mobile-user-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 0 10px;
+    cursor: pointer;
+
+    &:hover {
+      background-color: $background-color-soft;
+    }
+  }
+
+  .mobile-user-details {
+    flex: 1 1 auto;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    line-height: 1.3;
+
+    b {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .mobile-user-role {
+    font-size: $font-size-small;
+    color: $text-color-softer;
+  }
+
+  .mobile-avatar-menu-items {
+    padding: 4px 0 0 0;
+
+    hr {
+      color: $color-neutral-90;
+      background-color: $color-neutral-90;
+      margin: 2px 0;
+    }
+  }
+
+  .mobile-avatar-menu-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 2px 10px;
+    min-height: 32px;
+    color: $text-color-base;
+
+    &:hover {
+      color: $text-color-link-active;
+      background-color: $background-color-soft;
+    }
+
+    &.nuxt-link-active,
+    &.router-link-active {
+      color: $text-color-link;
+      background-color: $background-color-soft;
+      box-shadow: inset 3px 0 0 $color-primary;
+    }
+  }
+
+  .mobile-filter-section {
+    padding: 2px 0;
+
+    > .mobile-nav-item {
+      cursor: pointer;
+    }
+  }
+
+  .mobile-filter-items {
+    padding: 4px 10px;
+  }
+
+  .mobile-more-section {
+    padding: 2px 0;
+    border-top: 1px solid $color-neutral-90;
+  }
+
+  .mobile-more-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    padding: 2px 10px;
+    min-height: 36px;
+
+    &:hover {
+      color: $text-color-link-active;
+      background-color: $background-color-soft;
+    }
+  }
+
+  .mobile-more-items {
+    padding: 0;
+
+    hr {
+      color: $color-neutral-90;
+      background-color: $color-neutral-90;
+      margin: 2px 0;
+    }
+  }
+
+  .mobile-more-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 2px 10px;
+    min-height: 32px;
+    color: $text-color-base;
+
+    &:hover {
+      color: $text-color-link-active;
+      background-color: $background-color-soft;
+    }
+
+    &.nuxt-link-active,
+    &.router-link-active {
+      color: $text-color-link;
+      background-color: $background-color-soft;
+      box-shadow: inset 3px 0 0 $color-primary;
+    }
+  }
+
+  .mobile-locale-section {
+    padding: 2px 0;
+
+    > .mobile-nav-item {
+      cursor: pointer;
+    }
+  }
+
+  .mobile-locale-items {
+    padding: 0;
+  }
+
+  .mobile-locale-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 2px 10px;
+    min-height: 32px;
+    color: $text-color-base;
+
+    &:hover {
+      color: $text-color-link-active;
+      background-color: $background-color-soft;
+    }
+
+    &.--active {
+      font-weight: bold;
+      color: $text-color-link;
+      background-color: $background-color-soft;
+      box-shadow: inset 3px 0 0 $color-primary;
+    }
+  }
+
+  .mobile-locale-flag {
+    font-size: 1.2em;
+    line-height: 1;
+  }
 }
 .map-button {
   margin-left: 3px;
diff --git a/webapp/components/LocaleSwitch/LocaleSwitch.spec.js b/webapp/components/LocaleSwitch/LocaleSwitch.spec.js
index 158624f18..e46374b15 100644
--- a/webapp/components/LocaleSwitch/LocaleSwitch.spec.js
+++ b/webapp/components/LocaleSwitch/LocaleSwitch.spec.js
@@ -6,11 +6,11 @@ import Vuex from 'vuex'
 const localVue = global.localVue
 
 const stubs = {
-  'client-only': true,
+  'client-only': { template: '<div><slot /></div>' },
 }
 
 describe('LocaleSwitch.vue', () => {
-  let wrapper, mocks, computed, deutschLanguageItem, getters
+  let wrapper, mocks, computed, getters
 
   beforeEach(() => {
     mocks = {
@@ -48,10 +48,12 @@ describe('LocaleSwitch.vue', () => {
           {
             name: 'English',
             path: 'en',
+            flag: '🇬🇧',
           },
           {
             name: 'Deutsch',
             path: 'de',
+            flag: '🇩🇪',
           },
         ]
       },
@@ -71,37 +73,61 @@ describe('LocaleSwitch.vue', () => {
   }
 
   describe('with current user', () => {
-    beforeEach(() => {
+    let toggleMenu
+
+    beforeEach(async () => {
+      toggleMenu = jest.fn()
       wrapper = Wrapper()
-      wrapper.find('.locale-menu').trigger('click')
-      deutschLanguageItem = wrapper.findAll('li').at(1)
-      deutschLanguageItem.trigger('click')
+      await wrapper.vm.changeLanguage('de', toggleMenu)
     })
 
     it("sets a user's locale", () => {
-      expect(mocks.$i18n.set).toHaveBeenCalledTimes(1)
+      expect(mocks.$i18n.set).toHaveBeenCalledWith('de')
     })
 
     it("updates the user's locale in the database", () => {
       expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
     })
+
+    it('closes the menu', () => {
+      expect(toggleMenu).toHaveBeenCalled()
+    })
+  })
+
+  describe('when apollo mutation fails', () => {
+    beforeEach(async () => {
+      wrapper = Wrapper()
+      // First call succeeds (consumes mockResolvedValueOnce)
+      await wrapper.vm.changeLanguage('de', jest.fn())
+      // Second call fails (consumes mockRejectedValueOnce)
+      await wrapper.vm.changeLanguage('en', jest.fn())
+    })
+
+    it('shows an error toast', () => {
+      expect(mocks.$toast.error).toHaveBeenCalledWith('Please log in!')
+    })
   })
 
   describe('no current user', () => {
-    beforeEach(() => {
+    let toggleMenu
+
+    beforeEach(async () => {
+      toggleMenu = jest.fn()
       getters = {
         'auth/user': () => {
           return null
         },
       }
       wrapper = Wrapper()
-      wrapper.find('.locale-menu').trigger('click')
-      deutschLanguageItem = wrapper.findAll('li').at(1)
-      deutschLanguageItem.trigger('click')
+      await wrapper.vm.changeLanguage('de', toggleMenu)
     })
 
     it('does not send a UpdateUser mutation', () => {
       expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
     })
+
+    it('still closes the menu', () => {
+      expect(toggleMenu).toHaveBeenCalled()
+    })
   })
 })
diff --git a/webapp/components/LocaleSwitch/LocaleSwitch.vue b/webapp/components/LocaleSwitch/LocaleSwitch.vue
index af4270dd3..07d32da08 100644
--- a/webapp/components/LocaleSwitch/LocaleSwitch.vue
+++ b/webapp/components/LocaleSwitch/LocaleSwitch.vue
@@ -2,18 +2,22 @@
   <client-only>
     <dropdown ref="menu" :placement="placement" :offset="offset">
       <template #default="{ toggleMenu }">
-        <a
+        <os-button
           class="locale-menu"
-          href="#"
+          variant="primary"
+          appearance="ghost"
+          circle
+          :aria-label="$t('localeSwitch.tooltip')"
           v-tooltip="{
             content: $t('localeSwitch.tooltip'),
             placement: 'bottom-start',
           }"
           @click.prevent="toggleMenu()"
         >
-          <span class="label">{{ current.code.toUpperCase() }}</span>
-          <os-icon class="dropdown-arrow" :icon="icons.angleDown" />
-        </a>
+          <template #icon>
+            <os-icon :icon="icons.language" />
+          </template>
+        </os-button>
       </template>
       <template #popover="{ toggleMenu }">
         <ds-menu class="locale-menu-popover" :matcher="matcher" :routes="routes">
@@ -24,6 +28,7 @@
               :parents="item.parents"
               @click.stop.prevent="changeLanguage(item.route.path, toggleMenu)"
             >
+              <span class="locale-flag">{{ item.route.flag }}</span>
               {{ item.route.name }}
             </ds-menu-item>
           </template>
@@ -34,18 +39,19 @@
 </template>
 
 <script>
-import { OsIcon } from '@ocelot-social/ui'
+import { OsButton, OsIcon } from '@ocelot-social/ui'
 import { iconRegistry } from '~/utils/iconRegistry'
-import gql from 'graphql-tag'
 import Dropdown from '~/components/Dropdown'
 import find from 'lodash/find'
 import orderBy from 'lodash/orderBy'
 import locales from '~/locales'
-import { mapGetters, mapMutations } from 'vuex'
+import localeUpdate from '~/mixins/localeUpdate.js'
 
 export default {
+  mixins: [localeUpdate],
   components: {
     Dropdown,
+    OsButton,
     OsIcon,
   },
   props: {
@@ -62,17 +68,12 @@ export default {
       return find(this.locales, { code: this.$i18n.locale() })
     },
     routes() {
-      const routes = this.locales.map((locale) => {
-        return {
-          name: locale.name,
-          path: locale.code,
-        }
-      })
-      return routes
+      return this.locales.map((locale) => ({
+        name: locale.name,
+        path: locale.code,
+        flag: locale.flag,
+      }))
     },
-    ...mapGetters({
-      currentUser: 'auth/user',
-    }),
   },
   created() {
     this.icons = iconRegistry
@@ -86,57 +87,11 @@ export default {
     matcher(locale) {
       return locale === this.$i18n.locale()
     },
-
-    ...mapMutations({
-      setCurrentUser: 'auth/SET_USER',
-    }),
-    async updateUserLocale() {
-      if (!this.currentUser || !this.currentUser.id) return null
-      try {
-        await this.$apollo.mutate({
-          mutation: gql`
-            mutation ($id: ID!, $locale: String) {
-              UpdateUser(id: $id, locale: $locale) {
-                id
-                locale
-              }
-            }
-          `,
-          variables: {
-            id: this.currentUser.id,
-            locale: this.$i18n.locale(),
-          },
-          update: (store, { data: { UpdateUser } }) => {
-            const { locale } = UpdateUser
-            this.setCurrentUser({
-              ...this.currentUser,
-              locale,
-            })
-          },
-        })
-        this.$toast.success(this.$t('contribution.success'))
-      } catch (err) {
-        this.$toast.error(err.message)
-      }
-    },
   },
 }
 </script>
 
 <style lang="scss">
-.locale-menu {
-  user-select: none;
-  display: flex;
-  align-items: center;
-  height: 100%;
-  padding: $space-xx-small;
-  color: $color-locale-menu;
-
-  > .label {
-    margin: 0 $space-xx-small;
-  }
-}
-
 nav.locale-menu-popover {
   margin-left: -$space-small !important;
   margin-right: -$space-small !important;
@@ -146,4 +101,10 @@ nav.locale-menu-popover {
     padding-right: $space-base;
   }
 }
+
+.locale-flag {
+  margin-right: $space-xx-small;
+  font-size: 1.2em;
+  line-height: 1;
+}
 </style>
diff --git a/webapp/components/ProgressBar/ProgressBar.vue b/webapp/components/ProgressBar/ProgressBar.vue
index 09fb4b3a2..8be2a165f 100644
--- a/webapp/components/ProgressBar/ProgressBar.vue
+++ b/webapp/components/ProgressBar/ProgressBar.vue
@@ -118,5 +118,9 @@ export default {
 .progress-bar-button {
   position: relative;
   float: right;
+
+  @media (max-width: 810px) {
+    display: none;
+  }
 }
 </style>
diff --git a/webapp/graphql/User.js b/webapp/graphql/User.js
index aa5eec983..a28207a5a 100644
--- a/webapp/graphql/User.js
+++ b/webapp/graphql/User.js
@@ -358,6 +358,7 @@ export const updateUserMutation = () => {
       $termsAndConditionsAgreedVersion: String
       $avatar: ImageInput
       $locationName: String # empty string '' sets it to null
+      $locale: String
     ) {
       UpdateUser(
         id: $id
@@ -370,6 +371,7 @@ export const updateUserMutation = () => {
         termsAndConditionsAgreedVersion: $termsAndConditionsAgreedVersion
         avatar: $avatar
         locationName: $locationName
+        locale: $locale
       ) {
         id
         slug
diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index f1a215f98..157d5882c 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="layout-default">
     <div class="main-navigation">
-      <header-menu :showMobileMenu="isMobile" />
+      <header-menu />
     </div>
     <div class="ds-container ds-container-x-large">
       <div class="main-container">
         <nuxt />
       </div>
     </div>
-    <page-footer v-if="!isMobile" />
+    <page-footer class="desktop-footer" />
     <div id="overlay" />
     <client-only>
       <modal />
@@ -66,6 +66,12 @@ export default {
   padding-bottom: 8rem;
 }
 
+.desktop-footer {
+  @media (max-width: 810px) {
+    display: none;
+  }
+}
+
 .chat-modul {
   background-color: rgb(233, 228, 228);
   width: 355px;
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index c1fe4e590..871b44f1f 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -661,6 +661,7 @@
     "map": {
       "tooltip": "Landkarte"
     },
+    "more": "Mehr",
     "notifications": {
       "tooltip": "Benachrichtigungen"
     }
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 788e89878..cf13bc4ee 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -661,6 +661,7 @@
     "map": {
       "tooltip": "Map"
     },
+    "more": "More",
     "notifications": {
       "tooltip": "Notifications"
     }
diff --git a/webapp/locales/es.json b/webapp/locales/es.json
index 564bd37ea..a80d3c95f 100644
--- a/webapp/locales/es.json
+++ b/webapp/locales/es.json
@@ -661,6 +661,7 @@
     "map": {
       "tooltip": "Mapa"
     },
+    "more": "Más",
     "notifications": {
       "tooltip": "Notificaciones"
     }
diff --git a/webapp/locales/fr.json b/webapp/locales/fr.json
index 19c1f5536..ae61ea920 100644
--- a/webapp/locales/fr.json
+++ b/webapp/locales/fr.json
@@ -661,6 +661,7 @@
     "map": {
       "tooltip": "Carte"
     },
+    "more": "Plus",
     "notifications": {
       "tooltip": "Notifications"
     }
diff --git a/webapp/locales/index.js b/webapp/locales/index.js
index 28cbd27d0..0bfc05e39 100644
--- a/webapp/locales/index.js
+++ b/webapp/locales/index.js
@@ -6,6 +6,7 @@ const locales = [
     name: 'English',
     code: 'en',
     iso: 'en-US',
+    flag: '🇬🇧',
     enabled: true,
     dateFnsLocale: enUS,
   },
@@ -13,6 +14,7 @@ const locales = [
     name: 'Deutsch',
     code: 'de',
     iso: 'de-DE',
+    flag: '🇩🇪',
     enabled: true,
     dateFnsLocale: de,
   },
@@ -20,6 +22,7 @@ const locales = [
     name: 'Nederlands',
     code: 'nl',
     iso: 'nl-NL',
+    flag: '🇳🇱',
     enabled: true,
     dateFnsLocale: nl,
   },
@@ -27,6 +30,7 @@ const locales = [
     name: 'Français',
     code: 'fr',
     iso: 'fr-FR',
+    flag: '🇫🇷',
     enabled: true,
     dateFnsLocale: fr,
   },
@@ -34,6 +38,7 @@ const locales = [
     name: 'Italiano',
     code: 'it',
     iso: 'it-IT',
+    flag: '🇮🇹',
     enabled: true,
     dateFnsLocale: it,
   },
@@ -41,6 +46,7 @@ const locales = [
     name: 'Español',
     code: 'es',
     iso: 'es-ES',
+    flag: '🇪🇸',
     enabled: true,
     dateFnsLocale: es,
   },
@@ -48,6 +54,7 @@ const locales = [
     name: 'Português',
     code: 'pt',
     iso: 'pt-PT',
+    flag: '🇵🇹',
     enabled: true,
     dateFnsLocale: pt,
   },
@@ -55,6 +62,7 @@ const locales = [
     name: 'Polski',
     code: 'pl',
     iso: 'pl-PL',
+    flag: '🇵🇱',
     enabled: true,
     dateFnsLocale: pl,
   },
@@ -62,6 +70,7 @@ const locales = [
     name: 'Русский',
     code: 'ru',
     iso: 'ru-RU',
+    flag: '🇷🇺',
     enabled: true,
     dateFnsLocale: ru,
   },
diff --git a/webapp/locales/it.json b/webapp/locales/it.json
index d530598dc..4b94aa09e 100644
--- a/webapp/locales/it.json
+++ b/webapp/locales/it.json
@@ -661,6 +661,7 @@
     "map": {
       "tooltip": null
     },
+    "more": "Altro",
     "notifications": {
       "tooltip": "Notifiche"
     }
diff --git a/webapp/locales/nl.json b/webapp/locales/nl.json
index 1f5ed2bc4..ff3543cc7 100644
--- a/webapp/locales/nl.json
+++ b/webapp/locales/nl.json
@@ -661,6 +661,7 @@
     "map": {
       "tooltip": null
     },
+    "more": "Meer",
     "notifications": {
       "tooltip": "Notificaties"
     }
diff --git a/webapp/locales/pl.json b/webapp/locales/pl.json
index 6ce9306c0..48b7e6be4 100644
--- a/webapp/locales/pl.json
+++ b/webapp/locales/pl.json
@@ -661,6 +661,7 @@
     "map": {
       "tooltip": null
     },
+    "more": "Więcej",
     "notifications": {
       "tooltip": "Powiadomienia"
     }
diff --git a/webapp/locales/pt.json b/webapp/locales/pt.json
index ca90b3aad..1cf487d21 100644
--- a/webapp/locales/pt.json
+++ b/webapp/locales/pt.json
@@ -661,6 +661,7 @@
     "map": {
       "tooltip": null
     },
+    "more": "Mais",
     "notifications": {
       "tooltip": "Notificações"
     }
diff --git a/webapp/locales/ru.json b/webapp/locales/ru.json
index 9915841bc..58ca74134 100644
--- a/webapp/locales/ru.json
+++ b/webapp/locales/ru.json
@@ -661,6 +661,7 @@
     "map": {
       "tooltip": null
     },
+    "more": "Ещё",
     "notifications": {
       "tooltip": "Уведомления"
     }
diff --git a/webapp/mixins/localeUpdate.js b/webapp/mixins/localeUpdate.js
new file mode 100644
index 000000000..d33883297
--- /dev/null
+++ b/webapp/mixins/localeUpdate.js
@@ -0,0 +1,36 @@
+import { mapGetters, mapMutations } from 'vuex'
+import { updateUserMutation } from '~/graphql/User.js'
+
+export default {
+  computed: {
+    ...mapGetters({
+      currentUser: 'auth/user',
+    }),
+  },
+  methods: {
+    ...mapMutations({
+      setCurrentUser: 'auth/SET_USER',
+    }),
+    async updateUserLocale() {
+      if (!this.currentUser || !this.currentUser.id) return
+      try {
+        await this.$apollo.mutate({
+          mutation: updateUserMutation(),
+          variables: {
+            id: this.currentUser.id,
+            locale: this.$i18n.locale(),
+          },
+          update: (_store, { data: { UpdateUser } }) => {
+            this.setCurrentUser({
+              ...this.currentUser,
+              locale: UpdateUser.locale,
+            })
+          },
+        })
+        this.$toast.success(this.$t('contribution.success'))
+      } catch (err) {
+        this.$toast.error(err.message)
+      }
+    },
+  },
+}
diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index f10877fe6..7c0fb5d9f 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -1,7 +1,71 @@
 <template>
   <div>
-    <!-- create post -->
-    <div :class="POST_ADD_BUTTON_POSITION_TOP ? 'box-add-button-top' : ''">
+    <!-- feed top row: filter (left) + create post (right) -->
+    <div class="feed-top-row">
+      <div v-if="SHOW_CONTENT_FILTER_MASONRY_GRID" class="filterButtonMenu">
+        <os-button
+          class="my-filter-button"
+          v-if="
+            !postsFilter['postType_in'] &&
+            !postsFilter['categories_some'] &&
+            !postsFilter['author'] &&
+            !postsFilter['postsInMyGroups']
+          "
+          variant="primary"
+          appearance="filled"
+          @click="showFilter = !showFilter"
+        >
+          <template #suffix>
+            <os-icon :icon="filterButtonIcon" />
+          </template>
+          {{ $t('contribution.filterMasonryGrid.noFilter') }}
+        </os-button>
+
+        <header-button
+          v-if="filteredPostTypes.includes('Article')"
+          :title="$t('contribution.filterMasonryGrid.onlyArticles')"
+          :clickButton="openFilterMenu"
+          :titleRemove="$t('filter-menu.deleteFilter')"
+          :clickRemove="resetPostType"
+        />
+
+        <header-button
+          v-if="filteredPostTypes.includes('Event')"
+          :title="$t('contribution.filterMasonryGrid.onlyEvents')"
+          :clickButton="openFilterMenu"
+          :titleRemove="$t('filter-menu.deleteFilter')"
+          :clickRemove="resetPostType"
+        />
+
+        <header-button
+          v-if="postsFilter['categories_some']"
+          :title="$t('contribution.filterMasonryGrid.myTopics')"
+          :clickButton="openFilterMenu"
+          :titleRemove="$t('filter-menu.deleteFilter')"
+          :clickRemove="resetCategories"
+        />
+
+        <header-button
+          v-if="postsFilter['author']"
+          :title="$t('contribution.filterMasonryGrid.myFriends')"
+          :clickButton="openFilterMenu"
+          :titleRemove="$t('filter-menu.deleteFilter')"
+          :clickRemove="resetByFollowed"
+        />
+
+        <header-button
+          v-if="postsFilter['postsInMyGroups']"
+          :title="$t('contribution.filterMasonryGrid.myGroups')"
+          :clickButton="openFilterMenu"
+          :titleRemove="$t('filter-menu.deleteFilter')"
+          :clickRemove="resetByGroups"
+        />
+        <div id="my-filter" v-if="showFilter">
+          <div @mouseleave="mouseLeaveFilterMenu">
+            <filter-menu-component @showFilterMenu="showFilterMenu" />
+          </div>
+        </div>
+      </div>
       <client-only>
         <os-button
           as="nuxt-link"
@@ -11,10 +75,7 @@
             placement: 'left',
           }"
           class="post-add-button"
-          :class="[
-            POST_ADD_BUTTON_POSITION_TOP ? 'post-add-button-top' : 'post-add-button-bottom',
-            { 'hide-filter': hideByScroll },
-          ]"
+          :class="{ 'hide-filter': hideByScroll }"
           variant="primary"
           appearance="filled"
           circle
@@ -26,78 +87,12 @@
         </os-button>
       </client-only>
     </div>
-    <div>
-      <div v-if="SHOW_CONTENT_FILTER_MASONRY_GRID" class="top-filter-menu">
-        <div class="filterButtonBox">
-          <div class="filterButtonMenu" :class="{ 'hide-filter': hideByScroll }">
-            <os-button
-              class="my-filter-button"
-              v-if="
-                !postsFilter['postType_in'] &&
-                !postsFilter['categories_some'] &&
-                !postsFilter['author'] &&
-                !postsFilter['postsInMyGroups']
-              "
-              variant="primary"
-              appearance="filled"
-              @click="showFilter = !showFilter"
-            >
-              <template #suffix>
-                <os-icon :icon="filterButtonIcon" />
-              </template>
-              {{ $t('contribution.filterMasonryGrid.noFilter') }}
-            </os-button>
 
-            <header-button
-              v-if="filteredPostTypes.includes('Article')"
-              :title="$t('contribution.filterMasonryGrid.onlyArticles')"
-              :clickButton="openFilterMenu"
-              :titleRemove="$t('filter-menu.deleteFilter')"
-              :clickRemove="resetPostType"
-            />
-
-            <header-button
-              v-if="filteredPostTypes.includes('Event')"
-              :title="$t('contribution.filterMasonryGrid.onlyEvents')"
-              :clickButton="openFilterMenu"
-              :titleRemove="$t('filter-menu.deleteFilter')"
-              :clickRemove="resetPostType"
-            />
-
-            <header-button
-              v-if="postsFilter['categories_some']"
-              :title="$t('contribution.filterMasonryGrid.myTopics')"
-              :clickButton="openFilterMenu"
-              :titleRemove="$t('filter-menu.deleteFilter')"
-              :clickRemove="resetCategories"
-            />
-
-            <header-button
-              v-if="postsFilter['author']"
-              :title="$t('contribution.filterMasonryGrid.myFriends')"
-              :clickButton="openFilterMenu"
-              :titleRemove="$t('filter-menu.deleteFilter')"
-              :clickRemove="resetByFollowed"
-            />
-
-            <header-button
-              v-if="postsFilter['postsInMyGroups']"
-              :title="$t('contribution.filterMasonryGrid.myGroups')"
-              :clickButton="openFilterMenu"
-              :titleRemove="$t('filter-menu.deleteFilter')"
-              :clickRemove="resetByGroups"
-            />
-            <div id="my-filter" v-if="showFilter">
-              <div @mouseleave="mouseLeaveFilterMenu">
-                <filter-menu-component @showFilterMenu="showFilterMenu" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div v-if="hashtag || showDonations" class="newsfeed-controls">
+    <div
+      v-if="hashtag || showDonations"
+      class="newsfeed-controls"
+      :class="{ 'newsfeed-controls--no-filter': !SHOW_CONTENT_FILTER_MASONRY_GRID }"
+    >
       <div v-if="hashtag">
         <hashtags-filter :hashtag="hashtag" @clearSearch="clearSearch" />
       </div>
@@ -171,7 +166,6 @@ 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'
-import { POST_ADD_BUTTON_POSITION_TOP } from '~/constants/posts.js'
 import GetCategories from '~/mixins/getCategoriesMixin.js'
 
 export default {
@@ -206,7 +200,6 @@ export default {
       pageSize: 12,
       hashtag,
       SHOW_CONTENT_FILTER_MASONRY_GRID,
-      POST_ADD_BUTTON_POSITION_TOP,
     }
   },
   computed: {
@@ -364,65 +357,59 @@ export default {
   display: none;
 }
 
-.box-add-button-top {
-  float: right;
+.feed-top-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  margin-top: 0px;
 }
 
-.post-add-button-bottom {
+.filterButtonMenu {
+  flex: 1 1 auto;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.post-add-button {
   height: 54px !important;
   width: 54px !important;
   min-height: 54px !important;
   min-width: 54px !important;
   font-size: 26px !important;
+  box-shadow: $box-shadow-x-large !important;
   z-index: $z-index-sticky-float !important;
   position: fixed !important;
-  bottom: -5px !important;
-  left: 98vw !important;
-  transform: translate(-120%, -120%) !important;
-  box-shadow: $box-shadow-x-large !important;
+  right: max(20px, calc((100vw - $container-max-width-x-large) / 2 + 48px)) !important;
+  top: 81px !important;
+  transition: top 0.3s ease !important;
 }
 
-.post-add-button-top {
-  height: 54px !important;
-  width: 54px !important;
-  min-height: 54px !important;
-  min-width: 54px !important;
-  font-size: 26px !important;
-  z-index: $z-index-sticky-float !important;
-  position: fixed !important;
-  top: 80px !important;
-  box-shadow: $box-shadow-x-large !important;
+.main-navigation:has(.hide-navbar) ~ .ds-container .post-add-button {
+  top: 20px !important;
 }
 
-.top-filter-menu {
-  margin-top: 16px;
-}
-
-.top-info-bar,
-.top-filter-menu {
+.top-info-bar {
   display: flex;
   align-items: center;
 }
-.filterButtonMenu {
-  width: 95%;
-  position: fixed;
-  z-index: $z-index-sticky;
-  margin-top: -45px;
-  padding: 30px 0px 20px 0px;
-  background-color: #f5f4f6;
-}
 .newsfeed-controls {
-  margin-top: 46px;
+  margin-top: 8px;
+
+  &.newsfeed-controls--no-filter {
+    margin-top: -16px;
+    margin-bottom: 16px;
+
+    .top-info-bar {
+      padding-right: 70px;
+    }
+  }
 }
 .main-container .grid-column-helper {
   grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 357px)) !important;
 }
 
-@media screen and (max-width: 656px) {
-  .filterButtonMenu {
-    margin-top: -50px;
-  }
-}
 #my-filter {
   max-width: 1028px;
   background-color: white;
@@ -433,7 +420,7 @@ export default {
   z-index: $z-index-page-submenu;
 }
 .grid-margin-top {
-  margin-top: 26px;
+  margin-top: 8px;
 }
 @media screen and (min-height: 401px) {
   #my-filter {
@@ -475,25 +462,9 @@ export default {
     padding-bottom: 80px;
   }
 }
-@media screen and (max-width: 1200px) {
-  .box-add-button-top {
-    padding-right: 40px;
-  }
-  .post-add-button-top {
-    height: 44px !important;
-    width: 44px !important;
-    min-height: 44px !important;
-    min-width: 44px !important;
-    font-size: 23px;
-  }
-}
 @media screen and (max-width: 650px) {
-  //    .top-filter-menu{
-  //     margin-top: 24px;
-  //   }
-
   .newsfeed-controls {
-    margin-top: 32px;
+    margin-top: 8px;
   }
 }
 </style>