modify and ad onMounded from router.js for css

abrahmandevs · Nov 3, 2023 · aca38a5 · aca38a5
1 parent 879c27f
commit aca38a5
Showing 1 changed file with 47 additions and 46 deletions.
diff --git a/src/router/router.js b/src/router/router.js
@@ -28,31 +28,32 @@ import DataTable from '../views/dashboard/components/DataTable.vue'
 import Product from '../views/dashboard/product/product.vue'
 import Brand from '../views/dashboard/product/Brand.vue'
 import Unit from '../views/dashboard/product/Unit.vue'
+import { onMounted } from "vue";
 
 const baseURL = window.location.origin;
-// const stylesheets = [
-//     { public: '/node_modules/bootstrap/dist/css/bootstrap.min.css' },
-//     { public: '/src/assets/css/bootstrap-extensions.css' },
-//     { public: '/src/assets/css/style.css' },
-//     { public: '/src/assets/css/global.css' },
-//     { user: '/src/assets/css/tailwind.css' },
-// ];
-const stylesheets = {
-    public: [
-        `/node_modules/bootstrap/dist/css/bootstrap.min.css`,
-        `/src/assets/css/bootstrap-extensions.css`,
-        `/src/assets/css/style.css`,
-        `/src/assets/css/global.css`,
-    ],
-    user: `/src/assets/css/tailwind.css`,
-};
+const stylesheets = [
+    { public: '/node_modules/bootstrap/dist/css/bootstrap.min.css' },
+    { public: '/src/assets/css/bootstrap-extensions.css' },
+    { public: '/src/assets/css/style.css' },
+    { public: '/src/assets/css/global.css' },
+    { user: '/src/assets/css/tailwind.css' },
+];
+// const stylesheets = {
+//     public: [
+//         `/node_modules/bootstrap/dist/css/bootstrap.min.css`,
+//         `/src/assets/css/bootstrap-extensions.css`,
+//         `/src/assets/css/style.css`,
+//         `/src/assets/css/global.css`,
+//     ],
+//     user: `/src/assets/css/tailwind.css`,
+// };
 
 const cssElement1 = document.getElementById("stylesheet1");
 const cssElement2 = document.getElementById("stylesheet2");
 const cssElement3 = document.getElementById("stylesheet3");
 const cssElement4 = document.getElementById("stylesheet4");
 
-const defaultStylesheet = stylesheets.public;
+// const defaultStylesheet = stylesheets.public;
 
 
 
@@ -245,37 +246,37 @@ router.beforeEach((to, from, next) => {
     const auth = authStore
     if (to.meta.stylesheet !== from.meta.stylesheet) {
 
-        if (to.meta.stylesheet !== from.meta.stylesheet) {
-            if (to.meta.stylesheet == 'public') {
-                cssElement1.href = baseURL + stylesheets[to.meta.stylesheet][0] || defaultStylesheet[0];
-                cssElement2.href = baseURL + stylesheets[to.meta.stylesheet][1] || defaultStylesheet[1];
-                cssElement3.href = baseURL + stylesheets[to.meta.stylesheet][2] || defaultStylesheet[2];
-                cssElement4.href = baseURL + stylesheets[to.meta.stylesheet][3] || defaultStylesheet[3];
-            } else {
-                cssElement1.href = stylesheets[to.meta.stylesheet];
-                cssElement2.href = '';
-                cssElement3.href = '';
-                cssElement4.href = '';
-            }
-        }
-
-        // const head = document.getElementsByTagName('head')
-        // stylesheets.forEach((sheets, index) => {
-        //     if (sheets.hasOwnProperty('public' && to.meta.stylesheet == 'public')) {
-        //         const link = document.createElement('link');
-        //         link.rel = 'stylesheet';
-        //         link.type = 'text/css';
-        //         link.href = sheets.public;
-        //         head.appendChild(link);
+        // if (to.meta.stylesheet !== from.meta.stylesheet) {
+        //     if (to.meta.stylesheet == 'public') {
+        //         cssElement1.href = baseURL + stylesheets[to.meta.stylesheet][0] || defaultStylesheet[0];
+        //         cssElement2.href = baseURL + stylesheets[to.meta.stylesheet][1] || defaultStylesheet[1];
+        //         cssElement3.href = baseURL + stylesheets[to.meta.stylesheet][2] || defaultStylesheet[2];
+        //         cssElement4.href = baseURL + stylesheets[to.meta.stylesheet][3] || defaultStylesheet[3];
         //     } else {
-        //         const link = document.createElement('link');
-        //         link.rel = 'stylesheet';
-        //         link.type = 'text/css';
-        //         link.href = sheets.user;
-        //         head.appendChild(link);
+        //         cssElement1.href = stylesheets[to.meta.stylesheet];
+        //         cssElement2.href = '';
+        //         cssElement3.href = '';
+        //         cssElement4.href = '';
         //     }
-        // });
-
+        // }
+        onMounted(() => {
+            const head = document.getElementsByTagName('head')
+            stylesheets.forEach((sheets, index) => {
+                if (sheets.hasOwnProperty('public' && to.meta.stylesheet == 'public')) {
+                    const link = document.createElement('link');
+                    link.rel = 'stylesheet';
+                    link.type = 'text/css';
+                    link.href = sheets.public;
+                    head.appendChild(link);
+                } else {
+                    const link = document.createElement('link');
+                    link.rel = 'stylesheet';
+                    link.type = 'text/css';
+                    link.href = sheets.user;
+                    head.appendChild(link);
+                }
+            });
+        })
     }
     // to and from are both route objects. must call `next`.
     if (to.meta.requiresAuth && !auth.isAuthenticated) {