Hides app bars on scroll down and show on scroll up

learningequality · Nov 21, 2023 · fe1099b · fe1099b
1 parent 05b93f4
commit fe1099b
Showing 1 changed file with 74 additions and 17 deletions.
diff --git a/kolibri/core/assets/src/views/CorePage/AppBarPage.vue b/kolibri/core/assets/src/views/CorePage/AppBarPage.vue
@@ -4,17 +4,20 @@
     here or in router, but somewhere -->
   <div class="main">
     <ScrollingHeader :scrollPosition="0">
-      <AppBar
-        ref="appBar"
-        class="app-bar"
-        :title="title"
-        @toggleSideNav="navShown = !navShown"
-        @showLanguageModal="languageModalShown = true"
-      >
-        <template #sub-nav>
-          <slot name="subNav"></slot>
-        </template>
-      </AppBar>
+      <transition mode="out-in">
+        <AppBar
+          v-if="showAppBarsOnScroll"
+          ref="appBar"
+          class="app-bar"
+          :title="title"
+          @toggleSideNav="navShown = !navShown"
+          @showLanguageModal="languageModalShown = true"
+        >
+          <template #sub-nav>
+            <slot name="subNav"></slot>
+          </template>
+        </AppBar>
+      </transition>
       <KLinearLoader
         v-if="isLoading"
         type="indeterminate"
@@ -32,12 +35,15 @@
       <slot></slot>
     </div>
 
-    <SideNav
-      ref="sideNav"
-      :navShown="navShown"
-      @toggleSideNav="navShown = !navShown"
-      @shouldFocusFirstEl="findFirstEl()"
-    />
+    <transition mode="out-in">
+      <SideNav
+        v-if="showAppBarsOnScroll"
+        ref="sideNav"
+        :navShown="navShown"
+        @toggleSideNav="navShown = !navShown"
+        @shouldFocusFirstEl="findFirstEl()"
+      />
+    </transition>
     <LanguageSwitcherModal
       v-if="languageModalShown"
       ref="languageSwitcherModal"
@@ -61,6 +67,7 @@
   import SideNav from 'kolibri.coreVue.components.SideNav';
   import { LearnerDeviceStatus } from 'kolibri.coreVue.vuex.constants';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
+  import { isTouchDevice } from 'kolibri.utils.browserInfo';
   import MeteredConnectionNotificationModal from 'kolibri-common/components/MeteredConnectionNotificationModal';
   import AppBar from '../AppBar';
   import StorageNotification from '../StorageNotification';
@@ -108,6 +115,8 @@
         appBarHeight: 0,
         languageModalShown: false,
         navShown: false,
+        lastScrollTop: 0,
+        hideAppBars: true,
       };
     },
     computed: {
@@ -139,6 +148,13 @@
       showStorageNotification() {
         return this.userDeviceStatus === LearnerDeviceStatus.INSUFFICIENT_STORAGE;
       },
+      showAppBarsOnScroll() {
+        let show = true;
+        if (this.isAppContext && isTouchDevice) {
+          show = this.hideAppBars;
+        }
+        return show;
+      },
     },
     watch: {
       windowBreakpoint() {
@@ -150,13 +166,30 @@
       this.$nextTick(() => {
         this.appBarHeight = this.$refs.appBar.$el.scrollHeight || 0;
       });
+      window.addEventListener('scroll', this.handleScroll);
+    },
+    beforeUnmount() {
+      window.removeEventListener('scroll', this.handleScroll);
     },
     methods: {
       findFirstEl() {
         this.$nextTick(() => {
           this.$refs.sideNav.focusFirstEl();
         });
       },
+      handleScroll() {
+        const scrollTop = window.scrollY;
+        //Is user scrolling up?
+        if (scrollTop > this.lastScrollTop) {
+          this.hideAppBars = false;
+        } else {
+          this.hideAppBars = true;
+        }
+
+        setTimeout(() => {
+          this.lastScrollTop = scrollTop;
+        }, 100);
+      },
     },
   };
 
@@ -167,6 +200,30 @@
 
   @import '~kolibri-design-system/lib/styles/definitions';
 
+  .v-leave {
+    opacity: 1;
+  }
+
+  .v-leave-active {
+    transition: opacity 0.5s;
+  }
+
+  .v-leave-to {
+    opacity: 0;
+  }
+
+  .v-enter {
+    opacity: 0;
+  }
+
+  .v-enter-active {
+    transition: opacity 0.5s;
+  }
+
+  .v-enter-to {
+    opacity: 1;
+  }
+
   .app-bar {
     @extend %dropshadow-8dp;