feat: create setting to disable touch gestures

components/layout/navigation/sidenav/TouchHandlerMixin.js

@@ -3,6 +3,7 @@ import { mapActions, mapGetters } from 'vuex'
 export default {
   computed: {
     ...mapGetters('navigation', ['isSideNavActive', 'isSearchActive']),
+    ...mapGetters('user', ['getUserSettings']),
   },
 
   methods: {
@@ -12,6 +13,11 @@ export default {
     ]),
 
     touchHandler(direction, event) {
+      if (!this.getUserSettings.touchGestures.value) {
+        console.debug('`touchGestures` setting is disabled, skipping...')
+        return
+      }
+
       const touchThreshold = screen.availWidth * 0.25
       // console.debug(touchThreshold, event)
 

pages/usage.vue

@@ -11,13 +11,6 @@
       />
 
       <ContentContainer
-        title="Touch navigation"
-        text="Devices with touch support can swipe `left-to-right` to open the navigation menu, and `right-to-left` to open the search menu."
-      />
-
-      <ContentContainer
-        title="Keyboard page controls"
-        text="Keyboard's `right` and `left` arrows will navigate pages similar to clicking the page controls buttons."
         img="/img/usage_examples/keyboard-controls"
         text="Keyboard's `right` and `left` arrows will navigate pages similar to clicking the page controls buttons."
         title="Keyboard page controls"

store/user.js

@@ -170,6 +170,14 @@ export const state = () => ({
   },
 
   settings: {
+    touchGestures: {
+      name: 'Touch gestures',
+      description:
+        'Swiping `left-to-right` will open the navigation menu, and `right-to-left` will open the search menu.',
+      value: true,
+      defaultValue: true,
+    },
+
     hoverControls: {
       name: 'Hover controls',
       description: 'Page controls will be fixed over the content.',