fix(mobile): settings swiper flow (#3715)

Satellite-im · Jun 22, 2022 · 22d5f98 · 22d5f98
1 parent 0e47133
commit 22d5f98
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 17 deletions.
diff --git a/components/interactables/AsideMenu/AsideMenu.html b/components/interactables/AsideMenu/AsideMenu.html
@@ -1,10 +1,5 @@
 <div class="aside-menu hidden-scroll" v-scroll-lock="true">
-  <menu-icon
-    size="1.5x"
-    v-if="toggleable"
-    v-on:click="toggle"
-    class="menu-toggle"
-  />
+  <InteractablesClose v-if="$device.isMobile" :action="closeModal" />
   <aside class="menu">
     <div v-for="group in menuContent">
       <p class="menu-label">{{ group.title }}</p>

diff --git a/components/interactables/AsideMenu/AsideMenu.less b/components/interactables/AsideMenu/AsideMenu.less
@@ -8,7 +8,7 @@
     margin-bottom: @normal-spacing;
   }
 
-  .menu-toggle {
+  .close-button {
     position: absolute;
     right: 2rem;
     top: 2.4rem;

diff --git a/components/interactables/AsideMenu/AsideMenu.vue b/components/interactables/AsideMenu/AsideMenu.vue
@@ -17,10 +17,6 @@ export default Vue.extend({
       type: String,
       default: '',
     },
-    /**
-     * Should we include the aside menu toggle icon
-     */
-    toggleable: Boolean,
     /**
      * Callable method or function emitted when the menu is toggled
      */
@@ -51,6 +47,21 @@ export default Vue.extend({
       default: () => () => {},
     },
   },
+  mounted() {
+    if (this.$device.isMobile) {
+      this.$store.commit('ui/setSettingsRoute', '')
+    }
+  },
+  methods: {
+    /**
+     * @method closeModal DocsTODO
+     * @description
+     * @example
+     */
+    closeModal() {
+      this.$store.commit('ui/toggleSettings', { show: false })
+    },
+  },
 })
 </script>
 

diff --git a/components/views/settings/Sidebar.vue b/components/views/settings/Sidebar.vue
@@ -2,7 +2,6 @@
   <InteractablesAsideMenu
     :menu-content="sidebarLayout"
     :title="title"
-    :toggleable="toggleable"
     :toggle="toggle"
     :active="ui.settingsRoute"
     custom
@@ -17,7 +16,6 @@ import { SettingsRoutes } from '~/store/ui/types'
 
 export default Vue.extend({
   props: {
-    toggleable: Boolean,
     toggle: {
       type: Function,
       default: () => {},

diff --git a/components/views/settings/modal/Modal.html b/components/views/settings/modal/Modal.html
@@ -9,7 +9,6 @@
         <UiSimpleScroll scrollMode="vertical" scrollShow="scroll">
           <SettingsSidebar
             :title="$t('pages.settings.settings')"
-            :toggleable="$device.isMobile"
             :toggle="toggleSidebar"
             :handleRouteChange="changeRoute"
           />

diff --git a/components/views/settings/modal/Modal.vue b/components/views/settings/modal/Modal.vue
@@ -43,9 +43,6 @@ export default Vue.extend({
       })
     },
   },
-  mounted() {
-    this.showSidebar(this.$device.isMobile)
-  },
   methods: {
     /**
      * Opens and closes the left hand sidebar