system/components/TopMenu.vue

<template>
  <nav class="navbar is-fixed-top has-shadow px-3" role="navigation">
    <div class="navbar-brand mr-3">
      <span class="navbar-item mr-3">
        <SvgIcon v-bind="{ name: 'dot.svg',  size: 18, type: 'green' }"</SvgIcon>
        <span class="fsb-20" style="color:#008000">{{$dayjs().format('DD/MM')}}</span>
      </span>
      <span class="navbar-item header-logo" aria-label="về trang chủ"></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">
        <template v-for="(v,i) in leftmenu" :key="i" :id="v.code">
          <a class="navbar-item" v-if="!v.submenu" @click="changeTab(v)">
          <span :class="`fsb-17 ${currentTab.code===v.code? 'activetab' : ''}`">{{ v[lang] }}</span>
        </a>
        <div class="navbar-item has-dropdown is-hoverable" v-else>
          <a class="navbar-item" @click="changeTab(v)">
            <span :class="`icon-text ${currentTab.code===v.code? 'activetab' : ''}`">
              <span class="fsb-17">{{v[lang]}}</span>
              <SvgIcon style="padding-top:4px;" 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">
      <!-- <span class="navbar-item">
        <LanguageToggle @langChanged="changeLang"></LanguageToggle>
      </span> -->
      <a class="navbar-item" @click="changeTab(tabConfig)">
        <SvgIcon v-bind="{name: 'configuration.svg', type: 'findata', size: 24}"></SvgIcon>
      </a>
      <a class="navbar-item" @click="openProfile()" v-if="avatar">
        <Avatarbox v-bind="avatar" ></Avatarbox>
      </a>
      </div>
    </div>
  </nav>
</template>
<script setup>
  import { onMounted } from 'vue'
  import { useStore } from '~/stores/index'
  import { useRoute } from 'vue-router'
  const router = useRouter()
  const store = useStore()
  const route = useRoute()
  const emit = defineEmits(['changetab', 'langChanged'])
  const { $clone, $find, $filter } = useNuxtApp()
  var lang = ref(store.lang)
  var menu = $filter(store.common, {category: 'topmenu'})
  menu.map(v=>{
    let arr = $filter(store.common, {category: 'submenu', classify: v.code})
    v.submenu = arr.length>0? arr : null
  })
  var leftmenu = $filter(store.common, {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 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 changeLang(val) {
    lang.value = val
    emit('langChanged')
  }
  function changeTab(tab, subtab) {
    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: '400px', title: 'User profile'}
    store.commit('showmodal', modal)
  }
  let found = route.query.tab? $find(menu, {code: route.query.tab}) : null
  changeTab(found || leftmenu[0])
  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'
  })
</script>