changes

components/TopMenu.vue

@@ -0,0 +1,122 @@
+<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>