changes

app/layouts/default.vue

@@ -1,7 +1,5 @@
 <template>
   <div
-    style="min-height: 100vh"
-    class="has-background-blue-100"
     data-theme="light"
     lang="vi"
   >
@@ -28,6 +26,7 @@ import { onMounted } from "vue";
 import { useRoute } from "vue-router";
 import SnackBar from "@/components/snackbar/SnackBar.vue";
 import Modal from "@/components/Modal.vue";
+import { throttle } from "es-toolkit";
 
 const route = useRoute();
 const { $getdata, $requestLogin, $store } = useNuxtApp();
@@ -36,16 +35,16 @@ const snackbar = ref(undefined);
 const showmodal = ref(undefined);
 function getViewport() {
   let viewport;
-  var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+  const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
   if (width <= 768)
-    viewport = 1; //'mobile'
+    viewport = 1; // 'mobile'
   else if (width >= 769 && width <= 1023)
-    viewport = 2; //'tablet'
+    viewport = 2; // 'tablet'
   else if (width >= 1024 && width <= 1215)
-    viewport = 3; //'desktop'
+    viewport = 3; // 'desktop'
   else if (width >= 1216 && width <= 1407)
-    viewport = 4; //'widescreen'
-  else if (width >= 1408) viewport = 5; //'fullhd'
+    viewport = 4; // 'widescreen'
+  else if (width >= 1408) viewport = 5; // 'fullhd'
   $store.commit("viewport", viewport);
 }
 async function checkRedirect() {
@@ -91,6 +90,8 @@ async function checkLogin() {
 onMounted(() => {
   checkRedirect();
   getViewport();
+  const throttledGetViewport = throttle(getViewport, 400);
+  window.addEventListener("resize", throttledGetViewport);
 });
 watch(
   () => $store.snackbar,