From 7b9ba2efbccb60275dbe5bddca4162f5befa7cc8 Mon Sep 17 00:00:00 2001
From: SweetPPro <sweetppro@users.noreply.github.com>
Date: Tue, 9 Nov 2021 19:56:34 +0100
Subject: [PATCH] improved mobile navbar/sidebar (#574)

* improved mobile navbar/sidebar

Sidebar is hidden and all menu items moved to hamburger menu on mobile devices

* improvements to menu rendering

-removed redundant code
-fixed an issue with emitting data to App.vue

* Update Navigation.vue

fixed linting errors

* Add minor refactors to the mobile menu PR.

- Fix indentation and line lengths.
- Simplify prop definitions in the Navigation component.
- Remove redundant computed methods and use prop variables directly in
  the Navigation compontent.
- Simplify menu rendering logic by:
  removing isSidebar, showLogout and using simpler v-if / else
  in the parent instead of the Navigation component.

* Update App.vue

removed orphaned isSideBar Boolean

Co-authored-by: Kailash Nadh <kailash@nadh.in>
---
 frontend/fontello/config.json            |  42 +++++---
 frontend/src/App.vue                     | 118 +++++------------------
 frontend/src/assets/icons/fontello.css   |   1 +
 frontend/src/assets/icons/fontello.woff2 | Bin 7484 -> 7552 bytes
 frontend/src/components/Navigation.vue   | 117 ++++++++++++++++++++++
 5 files changed, 170 insertions(+), 108 deletions(-)
 mode change 100644 => 100755 frontend/fontello/config.json
 mode change 100644 => 100755 frontend/src/assets/icons/fontello.woff2
 create mode 100644 frontend/src/components/Navigation.vue

diff --git a/frontend/fontello/config.json b/frontend/fontello/config.json
old mode 100644
new mode 100755
index bf748a3b..d3ea0a2c
--- a/frontend/fontello/config.json
+++ b/frontend/fontello/config.json
@@ -552,6 +552,20 @@
         "speedometer"
       ]
     },
+    {
+      "uid": "86efd4d8903ab613b84953efcef01406",
+      "css": "logout-variant",
+      "code": 984573,
+      "src": "custom_icons",
+      "selected": true,
+      "svg": {
+        "path": "M585.9 650.4L695.3 541H291V459H695.3L585.9 349.6 646.5 291 853.5 500 646.5 709ZM791 125Q826.2 125 850.6 149.4T875 209V402.3L791 320.3V209H209V791H791V679.7L875 597.7V791Q875 826.2 850.6 850.6T791 875H209Q173.8 875 149.4 850.6T125 791V209Q125 173.8 149.4 149.4T209 125H791Z",
+        "width": 1000
+      },
+      "search": [
+        "logout-variant"
+      ]
+    },
     {
       "uid": "f4ad3f6d071a0bfb3a8452b514ed0892",
       "css": "vector-square",
@@ -21790,20 +21804,6 @@
         "lock-plus"
       ]
     },
-    {
-      "uid": "86efd4d8903ab613b84953efcef01406",
-      "css": "logout-variant",
-      "code": 984573,
-      "src": "custom_icons",
-      "selected": false,
-      "svg": {
-        "path": "M585.9 650.4L695.3 541H291V459H695.3L585.9 349.6 646.5 291 853.5 500 646.5 709ZM791 125Q826.2 125 850.6 149.4T875 209V402.3L791 320.3V209H209V791H791V679.7L875 597.7V791Q875 826.2 850.6 850.6T791 875H209Q173.8 875 149.4 850.6T125 791V209Q125 173.8 149.4 149.4T209 125H791Z",
-        "width": 1000
-      },
-      "search": [
-        "logout-variant"
-      ]
-    },
     {
       "uid": "90e8ca4d57b7f017c8a63b1dc2917046",
       "css": "music-note-bluetooth",
@@ -74835,6 +74835,20 @@
       "search": [
         "set-split"
       ]
+    },
+    {
+      "uid": "b39a043bdb10d9d11ccecca6f17a07fe",
+      "css": "logout-variant",
+      "code": 64737,
+      "src": "custom_icons",
+      "selected": false,
+      "svg": {
+        "path": "M586.7 649.6L694.6 541.7H291.7V458.3H694.6L586.7 350.4 645.8 291.7 854.2 500 645.8 708.3 586.7 649.6M791.7 125C837.5 125 875 162.5 875 208.3V402.9L791.7 319.6V208.3H208.3V791.7H791.7V680.4L875 597.1V791.7C875 837.5 837.5 875 791.7 875H208.3C162.1 875 125 837.5 125 791.7V208.3C125 162.1 162.1 125 208.3 125H791.7Z",
+        "width": 1000
+      },
+      "search": [
+        "logout-variant"
+      ]
     }
   ]
 }
\ No newline at end of file
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index ca2e24a2..d54c12e1 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -10,9 +10,11 @@
           </div>
         </template>
         <template slot="end">
-            <b-navbar-item tag="div">
-              <a href="#" @click.prevent="doLogout">{{ $t('users.logout') }}</a>
-            </b-navbar-item>
+          <navigation v-if="isMobile" :isMobile="isMobile"
+            :activeItem="activeItem" :activeGroup="activeGroup" @toggleGroup="toggleGroup" />
+          <b-navbar-item v-else tag="div">
+            <a href="#" @click.prevent="doLogout">{{ $t('users.logout') }}</a>
+          </b-navbar-item>
         </template>
     </b-navbar>
 
@@ -20,88 +22,15 @@
       <section class="sidebar">
         <b-sidebar
           position="static"
-          mobile="reduce"
+          mobile="hide"
           :fullheight="true"
           :open="true"
           :can-cancel="false"
         >
           <div>
             <b-menu :accordion="false">
-              <b-menu-list>
-                <b-menu-item :to="{name: 'dashboard'}" tag="router-link"
-                  :active="activeItem.dashboard"
-                  icon="view-dashboard-variant-outline" :label="$t('menu.dashboard')">
-                </b-menu-item><!-- dashboard -->
-
-                <b-menu-item :expanded="activeGroup.lists"
-                  :active="activeGroup.lists" data-cy="lists"
-                  v-on:update:active="(state) => toggleGroup('lists', state)"
-                  icon="format-list-bulleted-square" :label="$t('globals.terms.lists')">
-                  <b-menu-item :to="{name: 'lists'}" tag="router-link"
-                    :active="activeItem.lists" data-cy="all-lists"
-                    icon="format-list-bulleted-square" :label="$t('menu.allLists')"></b-menu-item>
-
-                  <b-menu-item :to="{name: 'forms'}" tag="router-link"
-                    :active="activeItem.forms" class="forms"
-                    icon="newspaper-variant-outline" :label="$t('menu.forms')"></b-menu-item>
-                </b-menu-item><!-- lists -->
-
-                <b-menu-item :expanded="activeGroup.subscribers"
-                  :active="activeGroup.subscribers" data-cy="subscribers"
-                  v-on:update:active="(state) => toggleGroup('subscribers', state)"
-                  icon="account-multiple" :label="$t('globals.terms.subscribers')">
-                  <b-menu-item :to="{name: 'subscribers'}" tag="router-link"
-                    :active="activeItem.subscribers" data-cy="all-subscribers"
-                    icon="account-multiple" :label="$t('menu.allSubscribers')"></b-menu-item>
-
-                  <b-menu-item :to="{name: 'import'}" tag="router-link"
-                    :active="activeItem.import" data-cy="import"
-                    icon="file-upload-outline" :label="$t('menu.import')"></b-menu-item>
-
-                  <b-menu-item :to="{name: 'bounces'}" tag="router-link"
-                    :active="activeItem.bounces" data-cy="bounces"
-                    icon="email-bounce" :label="$t('globals.terms.bounces')"></b-menu-item>
-                </b-menu-item><!-- subscribers -->
-
-                <b-menu-item :expanded="activeGroup.campaigns"
-                  :active="activeGroup.campaigns" data-cy="campaigns"
-                  v-on:update:active="(state) => toggleGroup('campaigns', state)"
-                  icon="rocket-launch-outline" :label="$t('globals.terms.campaigns')">
-                  <b-menu-item :to="{name: 'campaigns'}" tag="router-link"
-                    :active="activeItem.campaigns" data-cy="all-campaigns"
-                    icon="rocket-launch-outline" :label="$t('menu.allCampaigns')"></b-menu-item>
-
-                  <b-menu-item :to="{name: 'campaign', params: {id: 'new'}}" tag="router-link"
-                    :active="activeItem.campaign" data-cy="new-campaign"
-                    icon="plus" :label="$t('menu.newCampaign')"></b-menu-item>
-
-                  <b-menu-item :to="{name: 'media'}" tag="router-link"
-                    :active="activeItem.media" data-cy="media"
-                    icon="image-outline" :label="$t('menu.media')"></b-menu-item>
-
-                  <b-menu-item :to="{name: 'templates'}" tag="router-link"
-                    :active="activeItem.templates" data-cy="templates"
-                    icon="file-image-outline" :label="$t('globals.terms.templates')"></b-menu-item>
-
-                  <b-menu-item :to="{name: 'campaignAnalytics'}" tag="router-link"
-                    :active="activeItem.campaignAnalytics" data-cy="analytics"
-                    icon="chart-bar" :label="$t('globals.terms.analytics')"></b-menu-item>
-                </b-menu-item><!-- campaigns -->
-
-                <b-menu-item :expanded="activeGroup.settings"
-                  :active="activeGroup.settings" data-cy="settings"
-                  v-on:update:active="(state) => toggleGroup('settings', state)"
-                  icon="cog-outline" :label="$t('menu.settings')">
-
-                  <b-menu-item :to="{name: 'settings'}" tag="router-link"
-                    :active="activeItem.settings" data-cy="all-settings"
-                    icon="cog-outline" :label="$t('menu.settings')"></b-menu-item>
-
-                  <b-menu-item :to="{name: 'logs'}" tag="router-link"
-                    :active="activeItem.logs" data-cy="logs"
-                    icon="newspaper-variant-outline" :label="$t('menu.logs')"></b-menu-item>
-                </b-menu-item><!-- settings -->
-              </b-menu-list>
+              <navigation v-if="!isMobile" :isMobile="isMobile"
+                :activeItem="activeItem" :activeGroup="activeGroup" @toggleGroup="toggleGroup" />
             </b-menu>
           </div>
         </b-sidebar>
@@ -136,15 +65,22 @@
 <script>
 import Vue from 'vue';
 import { mapState } from 'vuex';
-import { uris } from './constants';
+
+import Navigation from './components/Navigation.vue';
 
 export default Vue.extend({
   name: 'App',
 
+  components: {
+    Navigation,
+  },
+
   data() {
     return {
       activeItem: {},
       activeGroup: {},
+      showLogout: Boolean,
+      windowWidth: window.innerWidth,
     };
   },
 
@@ -168,20 +104,6 @@ export default Vue.extend({
       this.activeGroup = state ? { [group]: true } : {};
     },
 
-    doLogout() {
-      const http = new XMLHttpRequest();
-
-      const u = uris.root.substr(-1) === '/' ? uris.root : `${uris.root}/`;
-      http.open('get', `${u}api/logout`, false, 'logout_non_user', 'logout_non_user');
-      http.onload = () => {
-        document.location.href = uris.root;
-      };
-      http.onerror = () => {
-        document.location.href = uris.root;
-      };
-      http.send();
-    },
-
     reloadApp() {
       this.$api.reloadApp().then(() => {
         this.$utils.toast('Reloading app ...');
@@ -204,12 +126,20 @@ export default Vue.extend({
     version() {
       return process.env.VUE_APP_VERSION;
     },
+
+    isMobile() {
+      return this.windowWidth <= 768;
+    },
   },
 
   mounted() {
     // Lists is required across different views. On app load, fetch the lists
     // and have them in the store.
     this.$api.getLists({ minimal: true });
+
+    window.addEventListener('resize', () => {
+      this.windowWidth = window.innerWidth;
+    });
   },
 });
 </script>
diff --git a/frontend/src/assets/icons/fontello.css b/frontend/src/assets/icons/fontello.css
index a6738310..9fb2be4b 100644
--- a/frontend/src/assets/icons/fontello.css
+++ b/frontend/src/assets/icons/fontello.css
@@ -79,3 +79,4 @@
 .mdi-chart-bar:before { content: '\e824'; } /* '' */
 .mdi-email-bounce:before { content: '\e825'; } /* '' */
 .mdi-speedometer:before { content: '\e826'; } /* '' */
+.mdi-logout-variant:before { content: '󰗽'; } /* '\f05fd' */
diff --git a/frontend/src/assets/icons/fontello.woff2 b/frontend/src/assets/icons/fontello.woff2
old mode 100644
new mode 100755
index 24f0383eb51d6cc6f42428cbfdb1b702329605da..b2e48a99e90344c602c696cccc276d794f08b9b7
GIT binary patch
literal 7552
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
WbOcr!^uNWxPwYK|n`XPiUK;?|BXbr2

literal 7484
zcmV-C9mC>xPew8T0RR9103AF44*&oF065eD037510RR9100000000000000000000
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
G+P)n*PA{SW

diff --git a/frontend/src/components/Navigation.vue b/frontend/src/components/Navigation.vue
new file mode 100644
index 00000000..a79ddbdb
--- /dev/null
+++ b/frontend/src/components/Navigation.vue
@@ -0,0 +1,117 @@
+<template>
+  <b-menu-list>
+    <b-menu-item :to="{name: 'dashboard'}" tag="router-link" :active="activeItem.dashboard"
+    icon="view-dashboard-variant-outline" :label="$t('menu.dashboard')">
+    </b-menu-item><!-- dashboard -->
+
+    <b-menu-item :expanded="activeGroup.lists" :active="activeGroup.lists" data-cy="lists"
+      v-on:update:active="(state) => toggleGroup('lists', state)" icon="format-list-bulleted-square"
+      :label="$t('globals.terms.lists')">
+      <b-menu-item :to="{name: 'lists'}" tag="router-link" :active="activeItem.lists"
+      data-cy="all-lists" icon="format-list-bulleted-square" :label="$t('menu.allLists')">
+      </b-menu-item>
+
+      <b-menu-item :to="{name: 'forms'}" tag="router-link" :active="activeItem.forms"
+      class="forms" icon="newspaper-variant-outline" :label="$t('menu.forms')">
+      </b-menu-item>
+    </b-menu-item><!-- lists -->
+
+    <b-menu-item :expanded="activeGroup.subscribers" :active="activeGroup.subscribers"
+      data-cy="subscribers" v-on:update:active="(state) => toggleGroup('subscribers', state)"
+      icon="account-multiple" :label="$t('globals.terms.subscribers')">
+
+      <b-menu-item :to="{name: 'subscribers'}" tag="router-link"
+        :active="activeItem.subscribers" data-cy="all-subscribers" icon="account-multiple"
+        :label="$t('menu.allSubscribers')">
+      </b-menu-item>
+
+      <b-menu-item :to="{name: 'import'}" tag="router-link" :active="activeItem.import"
+        data-cy="import" icon="file-upload-outline" :label="$t('menu.import')">
+      </b-menu-item>
+
+      <b-menu-item :to="{name: 'bounces'}" tag="router-link" :active="activeItem.bounces"
+        data-cy="bounces" icon="email-bounce" :label="$t('globals.terms.bounces')">
+      </b-menu-item>
+    </b-menu-item><!-- subscribers -->
+
+    <b-menu-item :expanded="activeGroup.campaigns" :active="activeGroup.campaigns"
+      data-cy="campaigns" v-on:update:active="(state) => toggleGroup('campaigns', state)"
+      icon="rocket-launch-outline" :label="$t('globals.terms.campaigns')">
+
+      <b-menu-item :to="{name: 'campaigns'}" tag="router-link" :active="activeItem.campaigns"
+       data-cy="all-campaigns" icon="rocket-launch-outline" :label="$t('menu.allCampaigns')">
+      </b-menu-item>
+
+      <b-menu-item :to="{name: 'campaign', params: {id: 'new'}}" tag="router-link"
+        :active="activeItem.campaign" data-cy="new-campaign" icon="plus"
+        :label="$t('menu.newCampaign')">
+      </b-menu-item>
+
+      <b-menu-item :to="{name: 'media'}" tag="router-link" :active="activeItem.media"
+        data-cy="media" icon="image-outline" :label="$t('menu.media')">
+      </b-menu-item>
+
+      <b-menu-item :to="{name: 'templates'}" tag="router-link" :active="activeItem.templates"
+        data-cy="templates" icon="file-image-outline" :label="$t('globals.terms.templates')">
+      </b-menu-item>
+
+      <b-menu-item :to="{name: 'campaignAnalytics'}" tag="router-link"
+        :active="activeItem.campaignAnalytics" data-cy="analytics" icon="chart-bar"
+        :label="$t('globals.terms.analytics')">
+      </b-menu-item>
+    </b-menu-item><!-- campaigns -->
+
+    <b-menu-item :expanded="activeGroup.settings" :active="activeGroup.settings"
+      data-cy="settings" v-on:update:active="(state) => toggleGroup('settings', state)"
+      icon="cog-outline" :label="$t('menu.settings')">
+
+      <b-menu-item :to="{name: 'settings'}" tag="router-link" :active="activeItem.settings"
+        data-cy="all-settings" icon="cog-outline" :label="$t('menu.settings')">
+      </b-menu-item>
+
+      <b-menu-item :to="{name: 'logs'}" tag="router-link" :active="activeItem.logs"
+        data-cy="logs" icon="newspaper-variant-outline" :label="$t('menu.logs')">
+      </b-menu-item>
+    </b-menu-item><!-- settings -->
+
+    <b-menu-item v-if="isMobile" icon="logout-variant" :label="$t('users.logout')"
+      @click.prevent="doLogout">
+    </b-menu-item>
+  </b-menu-list>
+</template>
+
+
+<script>
+import { uris } from '../constants';
+
+export default {
+  name: 'navigation',
+
+  props: {
+    activeItem: Object,
+    activeGroup: Object,
+    isMobile: Boolean,
+  },
+
+  methods: {
+    toggleGroup(group, state) {
+      this.$emit('toggleGroup', group, state);
+    },
+
+    doLogout() {
+      const http = new XMLHttpRequest();
+
+      const u = uris.root.substr(-1) === '/' ? uris.root : `${uris.root}/`;
+      http.open('get', `${u}api/logout`, false, 'logout_non_user', 'logout_non_user');
+      http.onload = () => {
+        document.location.href = uris.root;
+      };
+      http.onerror = () => {
+        document.location.href = uris.root;
+      };
+      http.send();
+    },
+  },
+};
+
+</script>