add /list for mobile

src/components/MonitorList.vue

@@ -4,7 +4,7 @@
             No Monitors, please <router-link to="/add">add one</router-link>.
         </div>
 
-        <router-link v-for="(item, index) in sortedMonitorList" :key="index" :to="monitorURL(item.id)" class="item" :class="{ 'disabled': ! item.active }" @click="$root.cancelActiveList">
+        <router-link v-for="(item, index) in sortedMonitorList" :key="index" :to="monitorURL(item.id)" class="item" :class="{ 'disabled': ! item.active }">
             <div class="row">
                 <div class="col-6 col-md-8 small-padding" :class="{ 'monitorItem': $root.userHeartbeatBar == 'bottom' || $root.userHeartbeatBar == 'none' }">
                     <div class="info">

src/layouts/Layout.vue

@@ -52,22 +52,22 @@
         <!-- Mobile Only -->
         <div v-if="$root.isMobile" style="width: 100%;height: 60px;" />
         <nav v-if="$root.isMobile" class="bottom-nav">
-            <router-link to="/dashboard" class="nav-link" @click="$root.cancelActiveList">
+            <router-link to="/dashboard" class="nav-link">
                 <div><font-awesome-icon icon="tachometer-alt" /></div>
                 Dashboard
             </router-link>
 
-            <a href="#" :class=" { 'router-link-exact-active' : $root.showListMobile } " @click="$root.showListMobile = ! $root.showListMobile">
+            <router-link to="/list" class="nav-link">
                 <div><font-awesome-icon icon="list" /></div>
                 List
-            </a>
+            </router-link>
 
-            <router-link to="/add" class="nav-link" @click="$root.cancelActiveList">
+            <router-link to="/add" class="nav-link">
                 <div><font-awesome-icon icon="plus" /></div>
                 Add
             </router-link>
 
-            <router-link to="/settings" class="nav-link" @click="$root.cancelActiveList">
+            <router-link to="/settings" class="nav-link">
                 <div><font-awesome-icon icon="cog" /></div>
                 Settings
             </router-link>
@@ -101,7 +101,7 @@ export default {
     },
 
     watch: {
-        $route (to, from) {
+        $route(to, from) {
             this.init();
         },
     },

src/main.js

@@ -18,6 +18,8 @@ import Details from "./pages/Details.vue";
 import EditMonitor from "./pages/EditMonitor.vue";
 import Settings from "./pages/Settings.vue";
 import Setup from "./pages/Setup.vue";
+import List from "./pages/List.vue";
+
 import { appName } from "./util.ts";
 
 const routes = [
@@ -53,6 +55,10 @@ const routes = [
                                 path: "/add",
                                 component: EditMonitor,
                             },
+                            {
+                                path: "/list",
+                                component: List,
+                            },
                         ],
                     },
                     {

src/mixins/socket.js

@@ -25,7 +25,6 @@ export default {
             uptimeList: { },
             certInfoList: {},
             notificationList: [],
-            showListMobile: false,
             connectionErrorMsg: "Cannot connect to the socket server. Reconnecting...",
         }
     },
@@ -186,10 +185,6 @@ export default {
 
     methods: {
 
-        cancelActiveList() {
-            this.$root.showListMobile = false;
-        },
-
         storage() {
             return (this.remember) ? localStorage : sessionStorage;
         },

src/pages/List.vue

@@ -0,0 +1,14 @@
+<template>
+    <MonitorList />
+</template>
+
+<script>
+import MonitorList from "../components/MonitorList.vue";
+
+export default {
+    components: {
+        MonitorList,
+    },
+}
+</script>
+