split mobile mixin from socket mixin

src/layouts/Layout.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="$root.theme">
+    <div :class="classes">
         <div v-if="! $root.socket.connected && ! $root.socket.firstConnect" class="lost-connection">
             <div class="container-fluid">
                 {{ $root.connectionErrorMsg }}
@@ -79,29 +79,45 @@
 import Login from "../components/Login.vue";
 
 export default {
+
     components: {
         Login,
     },
+
     data() {
         return {}
     },
-    computed: {},
+
+    computed: {
+
+        // Theme or Mobile
+        classes() {
+            const classes = {};
+            classes[this.$root.theme] = true;
+            classes["mobile"] = this.$root.isMobile;
+            return classes;
+        }
+
+    },
+
     watch: {
         $route (to, from) {
             this.init();
         },
     },
+
     mounted() {
         this.init();
     },
+
     methods: {
         init() {
             if (this.$route.name === "root") {
                 this.$router.push("/dashboard")
             }
         },
-
     },
+
 }
 </script>
 

src/main.js

@@ -10,6 +10,7 @@ import EmptyLayout from "./layouts/EmptyLayout.vue";
 import Layout from "./layouts/Layout.vue";
 import socket from "./mixins/socket";
 import theme from "./mixins/theme";
+import mobile from "./mixins/mobile";
 import Dashboard from "./pages/Dashboard.vue";
 import DashboardHome from "./pages/DashboardHome.vue";
 import Details from "./pages/Details.vue";
@@ -78,7 +79,8 @@ const router = createRouter({
 const app = createApp({
     mixins: [
         socket,
-        theme
+        theme,
+        mobile
     ],
     data() {
         return {

src/mixins/mobile.js

@@ -0,0 +1,25 @@
+export default {
+
+    data() {
+        return {
+            windowWidth: window.innerWidth,
+        }
+    },
+
+    created() {
+        window.addEventListener("resize", this.onResize);
+    },
+
+    methods: {
+        onResize() {
+            this.windowWidth = window.innerWidth;
+        },
+    },
+
+    computed: {
+        isMobile() {
+            return this.windowWidth <= 767.98;
+        },
+    }
+
+}

src/mixins/socket.js

@@ -27,7 +27,6 @@ export default {
             uptimeList: { },
             certInfoList: {},
             notificationList: [],
-            windowWidth: window.innerWidth,
             showListMobile: false,
             connectionErrorMsg: "Cannot connect to the socket server. Reconnecting...",
         }
@@ -193,10 +192,6 @@ export default {
             this.$root.showListMobile = false;
         },
 
-        onResize() {
-            this.windowWidth = window.innerWidth;
-        },
-
         storage() {
             return (this.remember) ? localStorage : sessionStorage;
         },
@@ -270,10 +265,6 @@ export default {
 
     computed: {
 
-        isMobile() {
-            return this.windowWidth <= 767.98;
-        },
-
         timezone() {
 
             if (this.userTimezone === "auto") {