hrm/app/components/TopMenu.vue

<template>
  <nav
    class="navbar is-fixed-top has-shadow px-3"
    role="navigation"
  >
    <div class="navbar-brand mr-5">
      <span class="navbar-item">
        <SvgIcon v-bind="{ name: 'dot.svg', size: 18, type: 'primary' }" />
        <span class="fsb-18 has-text-primary">HRM</span>
      </span>
      <a
        role="button"
        class="navbar-burger"
        id="burger"
        aria-label="menu"
        aria-expanded="false"
        data-target="navMenu"
        @click="handleClick()"
      >
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>
    <div
      class="navbar-menu"
      id="navMenu"
    >
      <div
        class="navbar-start"
        style="min-width: 650px"
      >
        <template
          v-for="(v, i) in leftmenu"
          :key="i"
          :id="v.code"
        >
          <a
            class="navbar-item px-2"
            v-if="!v.submenu"
            @click="changeTab(v)"
          >
            <span
              :class="`fs-15 ${currentTab.code === v.code ? 'activetab' : ''}`"
              style="font-weight: 500; padding: 3px 5px"
            >
              {{ v[lang] }}
            </span>
          </a>
          <div
            class="navbar-item has-dropdown is-hoverable"
            v-else
          >
            <a
              class="navbar-item px-2"
              @click="changeTab(v)"
            >
              <span
                :class="`icon-text ${currentTab.code === v.code ? 'activetab' : ''}`"
                style="padding: 3px 4px"
              >
                <span class="fsb-16">{{ v[lang] }}</span>
                <SvgIcon
                  style="padding-top: 5px"
                  v-bind="{
                    name: 'down2.svg',
                    type: currentTab.code === v.code ? 'white' : 'dark',
                    size: 15,
                  }"
                >
                </SvgIcon>
              </span>
            </a>
            <div class="navbar-dropdown has-background-light">
              <a
                class="navbar-item has-background-light fs-15 has-text-black py-1 border-bottom"
                v-for="x in v.submenu"
                @click="changeTab(v, x)"
              >
                {{ x[lang] }}
              </a>
            </div>
          </div>
        </template>
      </div>
      <div class="navbar-end">
        <a
          v-if="!$store.login"
          @click="openLogInModal"
          class="navbar-item fs-14 px-2"
        >
          <span
            class="px-2 py-1"
            style="border-radius: 6px; border: 1px solid #204853"
            >Đăng nhập</span
          >
        </a>
        <a
          class="navbar-item"
          @click="changeTab(tabConfig)"
          v-if="tabConfig"
        >
          <SvgIcon v-bind="{ name: 'configuration.svg', type: 'findata', size: 24 }"></SvgIcon>
        </a>
        <a
          class="navbar-item"
          @click="openProfile()"
          v-if="avatar && $store.login"
        >
          <Avatarbox v-bind="avatar"></Avatarbox>
        </a>
      </div>
    </div>
    <Modal
      v-if="showModal"
      v-bind="showModal"
      @close="showModal = undefined"
    />
  </nav>
</template>
<script setup>
import { watch } from "vue";
const router = useRouter();
const route = useRoute();
const emit = defineEmits(["changetab", "langChanged"]);
const { $find, $filter, $findIndex, $store } = useNuxtApp();
const lang = ref($store.lang);

// if ($store.rights.length > 0) {
//   menu = menu.filter((v) => $findIndex($store.rights, { setting: v.id }) >= 0);
// }

const showModal = ref();
function openLogInModal() {
  showModal.value = {
    component: "LogIn",
    width: "400px",
    height: "176px",
    title: "Đăng nhập",
  };
}

let leftmenu = ref(
  !$store.login
    ? $store.menu.slice(0, -1)
    : $store.login.fullname === "User"
      ? $store.menu.filter((m) => m.view)
      : $store.menu,
);
let currentTab = ref(leftmenu.value.length > 0 ? leftmenu.value[0] : undefined);
const subTab = ref();
const tabConfig = $find($store.menu, { code: "configuration" });
const avatar = ref();
const isAdmin = ref();
const handleClick = function () {
  const target = document.getElementById("burger");
  target.classList.toggle("is-active");
  const target1 = document.getElementById("navMenu");
  target1.classList.toggle("is-active");
};
const closeMenu = function () {
  if (!document) return;
  const target = document.getElementById("burger");
  const target1 = document.getElementById("navMenu");
  if (!target) return;
  if (target.classList.contains("is-active")) {
    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);
  closeMenu();
  let query = subtab ? { tab: tab.code, subtab: subtab.code } : { tab: tab.code };
  router.push({ query: query });
}
function openProfile() {
  let modal = {
    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($store.menu, { code: route.query.tab }) : undefined;
if (found || currentTab.value) changeTab(found || currentTab.value);
onMounted(() => {
  if (!$store.login) return;
  avatar.value = {
    image: null,
    text: $store.login.fullname.substring(0, 1).toUpperCase(),
    size: "two",
    type: "findata",
  };
  isAdmin.value = $store.login.type__code === "admin";
});
watch(
  () => $store.login,
  (newVal, oldVal) => {
    if (!newVal) return;
    avatar.value = {
      image: null,
      text: $store.login.fullname.substring(0, 1).toUpperCase(),
      size: "two",
      type: "findata",
    };
    isAdmin.value = $store.login.type__code === "admin";
    lang.value = $store.lang;
  },
);
</script>
<style scoped>
.navbar-dropdown {
  padding-block: 0.375rem;
  overflow: hidden;
}
.navbar-dropdown > .navbar-item {
  &:hover {
    background-color: hsl(30, 48%, 82%) !important;
  }

  &:last-child {
    border-bottom: none;
  }
}
</style>