changes

app/assets/styles/main.scss

@@ -5,6 +5,14 @@
   font-size: 15px;
 }
 
+#__nuxt {
+  // like Bulma's .container
+  max-width: 1900px;
+  margin: 0 auto;
+  position: relative;
+  width: 100%;
+}
+
 // Tooltip Styles
 .tooltiptext {
   opacity: 0;
@@ -22,20 +30,9 @@
   box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.1);
 }
 
-.to-left {
-  right: 30px;
-}
-
-@mixin tooltipshow() {
+.control:hover .tooltiptext {
   opacity: 1;
   position: absolute;
   min-width: 300px;
   z-index: 999;
 }
-
-.control:hover .tooltiptext {
-  @include tooltipshow();
-}
-.control:hover .tooltiptext .to-left {
-  @include tooltipshow();
-}

app/assets/styles/utils.scss

@@ -109,6 +109,9 @@
   --container-5xl: 64rem;
   --container-6xl: 72rem;
   --container-7xl: 80rem;
+  --container-8xl: 88rem;
+  --container-9xl: 96rem;
+  --container-10xl: 104rem;
 }
 
 // ─── Shared mixin ──────────────────────────────────────────────────────────
@@ -260,7 +263,24 @@ $fractions: (
 }
 
 // ─── Container sizes (w- only) ─────────────────────────────────────────────
-$containers: ("3xs", "2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl");
+$containers: (
+  "3xs",
+  "2xs",
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "2xl",
+  "3xl",
+  "4xl",
+  "5xl",
+  "6xl",
+  "7xl",
+  "8xl",
+  "9xl",
+  "10xl"
+);
 
 @each $name in $containers {
   .w-#{$name} {

app/components/Modal.vue

@@ -12,7 +12,7 @@
         @click="closeModal"
       ></div>
       <div
-        class="modal-card"
+        class="modal-card max-w-8xl"
         :style="{
           width: $store.viewport <= 1 ? 'calc(100% - 2rem)' : width,
         }"

app/components/TopMenu.vue

@@ -127,16 +127,16 @@ const route = useRoute();
 const emit = defineEmits(["changeTab"]);
 const { $find, $filter, $store, $snackbar } = useNuxtApp();
 const lang = computed(() => $store.lang);
-const menu = $filter($store.common, { category: "topmenu" });
+const topmenus = $filter($store.common, { category: "topmenu" });
 const submenus = $filter($store.common, { category: "submenu" });
 // if($store.rights.length>0) {
 //   menu = menu.filter(v=>$findIndex($store.rights, {setting: v.id})>=0)
 // }
-if (menu.length === 0) {
+if (topmenus.length === 0) {
   $snackbar($store.lang === "vi" ? "Bạn không có quyền truy cập" : "You do not have permission to access.");
 }
 
-menu.forEach((topmenu) => {
+topmenus.forEach((topmenu) => {
   let submenus = $filter($store.common, { category: "submenu", classify: topmenu.code });
   if ($store.rights.length > 0) {
     submenus = submenus.filter((x) => $findIndex($store.rights, { setting: x.id }) >= 0);
@@ -144,10 +144,10 @@ menu.forEach((topmenu) => {
   topmenu.submenu = submenus.length > 0 ? submenus : null;
 });
 
-const leftmenu = $filter(menu, { category: "topmenu", classify: "left" });
+const leftmenu = $filter(topmenus, { category: "topmenu", classify: "left" });
 const currentTab = ref(leftmenu[0]);
 const subTab = ref();
-const tabConfig = $find(menu, { code: "configuration" });
+const tabConfig = $find(topmenus, { code: "configuration" });
 const avatar = ref();
 const isAdmin = computed(() => $store.login.type__code === "admin");
 
@@ -175,8 +175,12 @@ function changeTab(tab, subtab) {
   subTab.value = subtab;
   emit("changeTab", tab, subtab);
   closeMenu();
-  const query = subtab ? { tab: tab.code, subtab: subtab.code } : { tab: tab.code };
-  router.push({ query });
+  router.push({
+    query: {
+      tab: tab.code,
+      subtab: subtab?.code,
+    },
+  });
 }
 function openProfile() {
   $store.commit("showmodal", {
@@ -186,7 +190,7 @@ function openProfile() {
     title: $store.lang === "vi" ? "Thông tin cá nhân" : "User profile",
   });
 }
-const foundTab = route.query.tab && $find(menu, { code: route.query.tab });
+const foundTab = route.query.tab && $find(topmenus, { code: route.query.tab });
 const foundSub = route.query.subtab && $find(submenus, { code: route.query.subtab });
 if (foundTab || currentTab.value) changeTab(foundTab || currentTab.value, foundSub);
 

app/components/menu/MenuAdd.vue

@@ -7,7 +7,7 @@
     <span class="tooltip">
       <span class="dot-twitter">+</span>
       <span
-        class="tooltiptext to-left"
+        class="tooltiptext"
         style="min-width: max-content"
         >{{ label }}</span
       >

app/components/menu/MenuNote.vue

@@ -12,7 +12,7 @@
     <span class="tooltip">
       <span class="dot-twitter">+</span>
       <span
-        class="tooltiptext to-left"
+        class="tooltiptext"
         style="min-width: max-content"
         >{{ label }}</span
       >

app/pages/index.vue

@@ -2,7 +2,7 @@
   <AppLoading v-if="!$store.ready" />
   <ClientOnly v-else>
     <TopMenu @changeTab="changeTab" />
-    <div class="container">
+    <main>
       <div
         class="mb-2 is-flex is-justify-content-space-between is-align-items-center is-gap-1"
         v-if="tab"
@@ -54,15 +54,18 @@
           v-bind="vbind"
         />
       </KeepAlive>
-    </div>
+    </main>
   </ClientOnly>
 </template>
 <script setup>
 const { $createMeta, $store, $copy, $id } = useNuxtApp();
 const componentMap = {};
 const componentKey = ref();
-var vbind = {};
-var tab, subtab, currentTab;
+const vbind = ref({});
+const tab = ref();
+const subtab = ref();
+const currentTab = ref();
+
 const toPascalCase = (str) => {
   if (!str || typeof str !== "string") return str;
   return str
@@ -70,18 +73,27 @@ const toPascalCase = (str) => {
     .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
     .join("");
 };
+
 function changeTab(_tab, _subtab) {
-  tab = _tab;
-  subtab = _subtab;
-  currentTab = subtab || tab;
-  if (currentTab.detail) {
-    vbind = $store.lang === "en" ? currentTab.detail_en || currentTab.detail : currentTab.detail;
+  tab.value = _tab;
+  subtab.value = _subtab;
+  currentTab.value = subtab.value || tab.value;
+  if (currentTab.value.detail) {
+    vbind.value =
+      $store.lang === "en" ? currentTab.value.detail_en || currentTab.value.detail : currentTab.value.detail;
   }
-  componentMap[vbind.component] = vbind.base || toPascalCase(vbind.component);
-  componentKey.value = vbind.component;
-  $store.commit("tabinfo", { tab, subtab, current: currentTab, vbind });
+  componentMap[vbind.value.component] = vbind.value.base || toPascalCase(vbind.value.component);
+  componentKey.value = vbind.value.component;
+
+  $store.commit("tabinfo", {
+    tab: tab.value,
+    subtab: subtab.value,
+    current: currentTab.value,
+    vbind: vbind.value,
+  });
+
   const meta = {
-    title: currentTab[$store.lang],
+    title: currentTab.value[$store.lang],
     image: undefined,
     description: "Utopia",
     type: "article",
@@ -89,25 +101,19 @@ function changeTab(_tab, _subtab) {
   };
   useHead($createMeta(meta));
 }
+
 function refresh() {
   const copy = $copy(componentKey.value) + $id();
   componentKey.value = undefined;
   setTimeout(() => (componentKey.value = copy));
 }
 </script>
-<style scoped>
-.container {
-  max-width: 1900px !important;
+<style lang="scss" scoped>
+@use "bulma/sass/utilities/mixins.scss" as *;
+main {
   padding: 1rem 2rem 2rem;
   @include mobile {
     padding: 1rem;
   }
-
-  .columns .column {
-    @include mobile {
-      padding-left: 0;
-      padding-right: 0;
-    }
-  }
 }
 </style>