add optional topica menu when categories are active

webapp/components/FilterMenu/CategoriesMenu.vue

@@ -0,0 +1,58 @@
+<template>
+  <dropdown ref="menu" placement="top-start" :offset="8" class="filter-menu">
+    <base-button
+      slot="default"
+      :filled="filterActive"
+      :ghost="!filterActive"
+      slot-scope="{ toggleMenu }"
+      @click.prevent="toggleMenu()"
+    >
+      <ds-text uppercase>{{ $t('admin.categories.name') }}</ds-text>
+    </base-button>
+    <template slot="popover">
+      <div class="filter-menu-options">
+        <h2 class="title">{{ $t('filter-menu.filter-by') }}</h2>
+        <categories-filter v-if="categoriesActive" />
+      </div>
+    </template>
+  </dropdown>
+</template>
+
+<script>
+import Dropdown from '~/components/Dropdown'
+import { mapGetters } from 'vuex'
+import CategoriesFilter from './CategoriesFilter'
+
+export default {
+  name: 'CategoriesMenu',
+  components: {
+    Dropdown,
+    CategoriesFilter,
+  },
+  props: {
+    placement: { type: String },
+    offset: { type: [String, Number] },
+  },
+  data() {
+    return {
+      categoriesActive: this.$env.CATEGORIES_ACTIVE,
+    }
+  },
+  computed: {
+    ...mapGetters({
+      filterActive: 'posts/isActive',
+    }),
+  },
+}
+</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>

webapp/components/FilterMenu/FilterMenu.vue

@@ -14,7 +14,6 @@
       <div class="filter-menu-options">
         <h2 class="title">{{ $t('filter-menu.filter-by') }}</h2>
         <following-filter />
-        <categories-filter v-if="categoriesActive" />
       </div>
       <div class="filter-menu-options">
         <h2 class="title">{{ $t('filter-menu.order-by') }}</h2>
@@ -29,24 +28,17 @@ import Dropdown from '~/components/Dropdown'
 import { mapGetters } from 'vuex'
 import FollowingFilter from './FollowingFilter'
 import OrderByFilter from './OrderByFilter'
-import CategoriesFilter from './CategoriesFilter'
 
 export default {
   components: {
     Dropdown,
     FollowingFilter,
-    CategoriesFilter,
     OrderByFilter,
   },
   props: {
     placement: { type: String },
     offset: { type: [String, Number] },
   },
-  data() {
-    return {
-      categoriesActive: this.$env.CATEGORIES_ACTIVE,
-    }
-  },
   computed: {
     ...mapGetters({
       filterActive: 'posts/isActive',

webapp/layouts/default.vue

@@ -15,6 +15,13 @@
             >
               <base-button icon="bars" @click="toggleMobileMenuView" circle />
             </ds-flex-item>
+            <ds-flex-item
+              v-if="categoriesActive && isLoggedIn"
+              :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
+              style="flex-grow: 0; flex-basis: auto"
+            >
+              <categories-menu></categories-menu>
+            </ds-flex-item>
             <ds-flex-item
               :width="{ base: '45%', sm: '45%', md: '45%', lg: '50%' }"
               :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
@@ -90,6 +97,7 @@ import FilterMenu from '~/components/FilterMenu/FilterMenu.vue'
 import PageFooter from '~/components/PageFooter/PageFooter'
 import AvatarMenu from '~/components/AvatarMenu/AvatarMenu'
 import InviteButton from '~/components/InviteButton/InviteButton'
+import CategoriesMenu from '~/components/FilterMenu/CategoriesMenu.vue'
 
 export default {
   components: {
@@ -102,6 +110,7 @@ export default {
     FilterMenu,
     PageFooter,
     InviteButton,
+    CategoriesMenu,
   },
   mixins: [seo],
   data() {
@@ -109,6 +118,7 @@ export default {
       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: {