Merge pull request #13177 from yashhash2/my-awesome-changes

Add Swipe Gesture Support for Side Navigation in Kolibri

Author: rtibbles

packages/kolibri/components/pages/AppBarPage/index.vue

@@ -3,6 +3,12 @@
   <!-- TODO useScrollPosition to set scrollPosition...
     here or in router, but somewhere -->
   <div class="main">
+    <div
+      v-if="windowIsSmall"
+      ref="swipeZone"
+      class="swipe-zone"
+    ></div>
+
     <ScrollingHeader :scrollPosition="0">
       <transition mode="out-in">
         <AppBar
@@ -58,6 +64,8 @@
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import { isTouchDevice } from 'kolibri/utils/browserInfo';
   import useUser from 'kolibri/composables/useUser';
+  import { ref, getCurrentInstance } from 'vue';
+  import { useSwipe } from '@vueuse/core';
   import ScrollingHeader from '../ScrollingHeader';
   import AppBar from './internal/AppBar';
   import SideNav from './internal/SideNav';
@@ -71,11 +79,26 @@
     },
     mixins: [commonCoreStrings],
     setup() {
+      const instance = getCurrentInstance();
+      const isRtl = ref(instance?.proxy.isRtl);
+      const swipeZone = ref(null);
+      const navShown = ref(false);
+      useSwipe(swipeZone, {
+        onSwipeEnd: (e, direction) => {
+          if (direction === 'right' && !navShown.value && !isRtl.value) {
+            navShown.value = true;
+          } else if (direction === 'left' && !navShown.value && isRtl.value) {
+            navShown.value = true;
+          }
+        },
+      });
       const { windowIsSmall } = useKResponsiveWindow();
       const { isAppContext } = useUser();
       return {
         windowIsSmall,
         isAppContext,
+        swipeZone,
+        navShown,
       };
     },
     props: {
@@ -102,7 +125,6 @@
     data() {
       return {
         appBarHeight: 124,
-        navShown: false,
         lastScrollTop: 0,
         hideAppBars: true,
         throttledHandleScroll: null,
@@ -222,4 +244,15 @@
     background-color: white;
   }
 
+  .swipe-zone {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 5;
+    width: 30px;
+    background: red;
+    opacity: 0;
+  }
+
 </style>

packages/kolibri/components/pages/AppBarPage/internal/SideNav.vue

@@ -9,6 +9,7 @@
     <transition :name="showAppNavView ? 'bottom-nav' : 'side-nav'">
       <div
         v-show="navShown"
+        ref="sideNavInside"
         class="side-nav"
         :class="showAppNavView ? 'bottom-offset' : ''"
         :style="{
@@ -266,6 +267,8 @@
   import useNav from 'kolibri/composables/useNav';
   import useUser from 'kolibri/composables/useUser';
   import useUserSyncStatus from 'kolibri/composables/useUserSyncStatus';
+  import { useSwipe } from '@vueuse/core';
+  import { ref, getCurrentInstance } from 'vue';
   import SyncStatusDisplay from '../../../SyncStatusDisplay';
   import LearnOnlyDeviceNotice from './LearnOnlyDeviceNotice';
   import TotalPoints from './TotalPoints';
@@ -298,7 +301,21 @@
       BottomNavigationBar,
     },
     mixins: [commonCoreStrings],
-    setup() {
+    setup(props, { emit }) {
+      const instance = getCurrentInstance();
+      const isRtl = instance?.proxy.isRtl;
+
+      const sideNavInside = ref(null);
+      useSwipe(sideNavInside, {
+        threshold: 100,
+        onSwipeEnd: (e, direction) => {
+          if (direction === 'left' && !isRtl) {
+            emit('toggleSideNav');
+          } else if (direction === 'right' && isRtl) {
+            emit('toggleSideNav');
+          }
+        },
+      });
       const { windowIsSmall, windowIsLarge } = useKResponsiveWindow();
       const {
         canManageContent,
@@ -330,6 +347,7 @@
         userSyncStatus: status,
         userLastSynced: lastSynced,
         navItems,
+        sideNavInside,
       };
     },
     props: {