feat(webapp): hide navbar by scroll, filter button for content

webapp/components/FilterMenu/FilterMenu.vue

@@ -11,37 +11,20 @@
       <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>
 
 <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>

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>

webapp/components/HeaderMenu/HeaderMenu.vue

@@ -1,5 +1,9 @@
 <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">
@@ -59,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>
@@ -207,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'
@@ -237,9 +242,12 @@ export default {
   },
   data() {
     return {
+      hideNavbar: false,
+      prevScrollpos: 0,
       links,
       LOGOS,
       SHOW_GROUP_BUTTON_IN_HEADER,
+      SHOW_CONTENT_FILTER_HEADER_MENU,
       isHeaderMenu: headerMenu.MENU.length > 0,
       menu: headerMenu.MENU,
       mobileSearchVisible: false,
@@ -258,14 +266,32 @@ export default {
     },
   },
   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">
+#navbar {
+  padding: 10px 10px;
+}
+.hide-navbar {
+  display: none;
+}
 .margin-right-20 {
   margin-right: 20px;
 }

webapp/constants/filter.js

@@ -0,0 +1,2 @@
+export const SHOW_CONTENT_FILTER_HEADER_MENU = false
+export const SHOW_CONTENT_FILTER_MASONRY_GRID = true

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" />

webapp/locales/de.json

@@ -267,8 +267,12 @@
       "happy": "Glücklich",
       "surprised": "Erstaunt"
     },
-    "filterALL": "Alle Beiträge anzeigen",
     "filterFollow": "Beiträge von Benutzern filtern, denen ich folge",
+    "filterMasonryGrid": {
+      "myFriends": "Beiträge von meinen Freunden",
+      "myTopics": "Meine Themen",
+      "noFilter": "Beiträge filtern"
+    },
     "inappropriatePicture": "Dieses Bild kann für einige Menschen unangemessen sein.",
     "languageSelectLabel": "Sprache Deines Beitrags",
     "languageSelectText": "Sprache wählen",
@@ -371,6 +375,7 @@
   "filter-menu": {
     "all": "Alle",
     "categories": "Themen",
+    "deleteFilter": "Filter löschen",
     "emotions": "Emotionen",
     "filter-by": "Filtern nach ...",
     "following": "Benutzern, denen ich folge",

webapp/locales/en.json

@@ -267,8 +267,12 @@
       "happy": "Happy",
       "surprised": "Surprised"
     },
-    "filterALL": "View all contributions",
     "filterFollow": "Filter contributions from users I follow",
+    "filterMasonryGrid": {
+      "myFriends": "Posts From My Friends",
+      "myTopics": "My topics",
+      "noFilter": "Filter Posts"
+    },
     "inappropriatePicture": "This image may be inappropriate for some people.",
     "languageSelectLabel": "Language of your contribution",
     "languageSelectText": "Select Language",
@@ -371,6 +375,7 @@
   "filter-menu": {
     "all": "All",
     "categories": "Topics",
+    "deleteFilter": "Delete filter",
     "emotions": "Emotions",
     "filter-by": "Filter by ...",
     "following": "Users I follow",

webapp/pages/index.spec.js

@@ -73,6 +73,9 @@ describe('PostIndex', () => {
       $route: {
         query: {},
       },
+      $env: {
+        CATEGORIES_ACTIVE: true,
+      },
     }
   })