changes

app/components/TopMenu.vue

@@ -1,14 +1,13 @@
 <template>
   <nav
-    class="navbar has-shadow sticky px-3"
-    style="top: 0"
+    class="navbar has-shadow sticky top-0 px-3"
     role="navigation"
   >
     <div class="navbar-brand mr-5">
-      <span class="navbar-item is-gap-1">
+      <div class="navbar-item is-gap-1">
         <div class="size-4 has-background-primary rounded-full"></div>
         <span class="fs-16 font-semibold has-text-primary">{{ $dayjs().format("DD/MM") }}</span>
-      </span>
+      </div>
       <a
         class="navbar-item p-0 has-text-primary"
         @click="changeTab(leftmenu[0])"
@@ -34,7 +33,7 @@
         aria-label="menu"
         aria-expanded="false"
         data-target="navMenu"
-        @click="handleClick()"
+        @click="toggleBurger"
       >
         <span aria-hidden="true"></span>
         <span aria-hidden="true"></span>
@@ -125,7 +124,7 @@ import Avatarbox from "~/components/common/Avatarbox.vue";
 import { watch } from "vue";
 const router = useRouter();
 const route = useRoute();
-const emit = defineEmits(["changetab", "langChanged"]);
+const emit = defineEmits(["changeTab"]);
 const { $find, $filter, $store, $snackbar } = useNuxtApp();
 const lang = ref($store.lang);
 const menu = $filter($store.common, { category: "topmenu" });
@@ -145,18 +144,19 @@ menu.forEach((topmenu) => {
 });
 
 const leftmenu = $filter(menu, { category: "topmenu", classify: "left" });
-var currentTab = ref(leftmenu[0]);
-var subTab = ref();
-var tabConfig = $find(menu, { code: "configuration" });
-var avatar = ref();
-var isAdmin = ref();
-const handleClick = function () {
+const currentTab = ref(leftmenu[0]);
+const subTab = ref();
+const tabConfig = $find(menu, { code: "configuration" });
+const avatar = ref();
+const isAdmin = ref();
+
+function toggleBurger() {
   const target = document.getElementById("burger");
   target.classList.toggle("is-active");
   const target1 = document.getElementById("navMenu");
   target1.classList.toggle("is-active");
-};
-const closeMenu = function () {
+}
+function closeMenu() {
   if (!document) return;
   const target = document.getElementById("burger");
   const target1 = document.getElementById("navMenu");
@@ -165,28 +165,27 @@ const closeMenu = function () {
     target.classList.remove("is-active");
     target1.classList.remove("is-active");
   }
-};
+}
 function changeTab(tab, subtab) {
   if (tab.submenu && tab.submenu.length > 0 && !subtab && !tab.detail) {
     subtab = tab.submenu[0];
   }
   currentTab.value = tab;
   subTab.value = subtab;
-  emit("changetab", tab, subtab);
+  emit("changeTab", tab, subtab);
   closeMenu();
   let query = subtab ? { tab: tab.code, subtab: subtab.code } : { tab: tab.code };
   router.push({ query: query });
 }
 function openProfile() {
-  let modal = {
+  $store.commit("showmodal", {
     component: "user/Profile",
     width: "1100px",
     height: "360px",
     title: $store.lang === "vi" ? "Thông tin cá nhân" : "User profile",
-  };
-  $store.commit("showmodal", modal);
+  });
 }
-let found = route.query.tab ? $find(menu, { code: route.query.tab }) : undefined;
+const found = route.query.tab && $find(menu, { code: route.query.tab });
 if (found || currentTab.value) changeTab(found || currentTab.value);
 onMounted(() => {
   if (!$store.login) return;
@@ -200,7 +199,7 @@ onMounted(() => {
 });
 watch(
   () => $store.login,
-  (newVal, oldVal) => {
+  (newVal) => {
     if (!newVal) return;
     avatar.value = {
       image: null,