cz-hjjc-admin/src/layout/components/Navbar/index.vue

<template>
  <div>
    <header class="navbar navbar-expand-md d-print-none">
      <div class="container-xl">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
          <router-link to="/">
            <svg xmlns="http://www.w3.org/2000/svg" width="110" height="32" viewBox="0 0 232 68" class="navbar-brand-image">
              <path d="M64.6 16.2C63 9.9 58.1 5 51.8 3.4 40 1.5 28 1.5 16.2 3.4 9.9 5 5 9.9 3.4 16.2 1.5 28 1.5 40 3.4 51.8 5 58.1 9.9 63 16.2 64.6c11.8 1.9 23.8 1.9 35.6 0C58.1 63 63 58.1 64.6 51.8c1.9-11.8 1.9-23.8 0-35.6zM33.3 36.3c-2.8 4.4-6.6 8.2-11.1 11-1.5.9-3.3.9-4.8.1s-2.4-2.3-2.5-4c0-1.7.9-3.3 2.4-4.1 2.3-1.4 4.4-3.2 6.1-5.3-1.8-2.1-3.8-3.8-6.1-5.3-2.3-1.3-3-4.2-1.7-6.4s4.3-2.9 6.5-1.6c4.5 2.8 8.2 6.5 11.1 10.9 1 1.4 1 3.3.1 4.7zM49.2 46H37.8c-2.1 0-3.8-1-3.8-3s1.7-3 3.8-3h11.4c2.1 0 3.8 1 3.8 3s-1.7 3-3.8 3z" fill="#066fd1" style="fill: var(--tblr-primary, #066fd1)"></path>
            </svg>
          </router-link>
        </div>
        <div class="navbar-nav flex-row order-md-last">

          <div class="d-none d-md-flex">
            <a class="nav-link px-0 hide-theme-dark" data-bs-toggle="tooltip" data-bs-placement="bottom" aria-label="Enable dark mode" data-bs-original-title="Enable dark mode">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"></path></svg>
            </a>
            <a class="nav-link px-0 hide-theme-light" data-bs-toggle="tooltip" data-bs-placement="bottom" aria-label="Enable light mode" data-bs-original-title="Enable light mode">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"></path></svg>
            </a>
            <div class="nav-item d-none d-md-flex me-3">
              <a class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6"></path><path d="M9 17v1a3 3 0 0 0 6 0v-1"></path></svg>
                <span class="badge bg-red"></span>
              </a>
            </div>
          </div>
          <div class="nav-item">
            <a class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
              <span class="avatar avatar-sm" style=""></span>
              <div class="d-none d-xl-block ps-2">
                <div>{{ name }}</div>
                <!--                <div class="mt-1 small text-secondary">UI Designer</div>-->
              </div>
            </a>
          </div>
        </div>
      </div>
    </header>

    <header class="navbar-expand-md">
      <div class="collapse navbar-collapse" id="navbar-menu">
        <el-menu class="container-xl"
                 :text-color="variables.menuText"
                 :background-color="variables.menuBg"
                 :active-text-color="variables.menuActiveText"
                 :default-active="activeMenu"
                 mode="horizontal" @select="menuSelect">
          <Item v-for="(item, index) in permission_routes" :key="item.key" :item="item" :base-path="item.path"></Item>
        </el-menu>
      </div>
<!--      <div class="collapse navbar-collapse" id="navbar-menu">-->
<!--        <div class="navbar">-->
<!--          <div class="container-xl">-->
<!--            <div class="row flex-fill align-items-center">-->
<!--              <div class="col">-->
<!--                <ul class="navbar-nav">-->
<!--                  <Item v-for="(item, index) in permission_routes" :key="item.key" :item="item"></Item>-->
<!--                </ul>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
    </header>
  </div>
</template>

<script>
import variables from "@/styles/variables.scss"
import { mapGetters } from 'vuex'
import Item from "./Item.vue"
export default {
  components: {
    Item
  },
  data () {
    return {
      activeMenu: ""
    }
  },
  computed: {
    variables () {
      return variables
    },
    ...mapGetters([
      'sidebar',
      'avatar',
      'name',
      'permission_routes',
    ]),
    // activeMenu() {
    //   const route = this.$route
    //   const { meta, path, matched } = route
    //   // if set path, the sidebar will highlight the path you set
    //   if (meta.activeMenu) {
    //     return meta.activeMenu
    //   }
    //   console.log(matched[matched.length-1].parent.path)
    //   return matched[matched.length-1].parent.path
    // },
  },
  methods: {
    menuSelect (index,path) {
      this.activeMenu = path[0]
    },
    async logout() {
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    }
  },
  created() {
  }
}
</script>

<style lang="scss" scoped>
@import url('~@/styles/navbar.css');
</style>