fashion-ssr-vue3/components/business/account/left.vue

<script lang='ts' setup>
import defaultAvatar from '~/assets/icons/user.svg'
import { useUserStore } from '~/stores/modules/user'

const userStore = useUserStore()
const { avatar, nickname } = storeToRefs(userStore)
const route = useRoute()
const activeMenu = ref('')

const menus = [
  { icon: 'dashboard', title: 'Dashboard', path: '/account/panel' },
  { icon: 'rfqs', title: 'RFQs', path: '/account/rfqs' },
  { icon: 'favourite', title: 'Favourites', path: '/account/favourites', query: 'tab=products' },
  { icon: 'order', title: 'Orders', path: '/account/orders', query: 'tab=submitted' },
  // { icon: 'message', title: 'Messages', path: '/account/messages' },
  { icon: 'notice', title: 'Notice', path: '/account/notice' },
  { icon: 'setting', title: 'Settings', path: '/account/settings', query: 'tab=profile' },
]
watch(() => route.path, (path) => {
  activeMenu.value = path
}, {
  immediate: true,
  deep: true,
})
</script>

<template>
  <div class="py-30px px-20px">
    <div class="mb-40px">
      <div class="flex justify-center">
        <img v-if="avatar" :src="avatar" class="w-60px h-60px b-rd-50% mb-10px" alt="" srcset="">
        <svgo-user v-else class="!w-60px !h-60px b-rd-50%" />
      </div>
      <div class="mt-16px mb-10px text-#111 overflow-hidden text-ellipsis line-clamp-1'">
        {{ nickname }}
      </div>
      <!-- <div class="text-#D98808 flex items-center justify-center">
        <img src="~/assets/images/my_vip.png" class="w-20px h-16px mr-4px" alt="" srcset="">
        V1
      </div> -->
    </div>

    <el-menu :default-active="activeMenu" class="el-menu-vertical-my">
      <el-menu-item v-for="item in menus" :key="item.path" :index="item.path">
        <el-icon>
          <business-account-icon-group :icon="item.icon" />
        </el-icon>
        <template #title>
          <nuxt-link :to="`${item.path}${item.query ? `?${item.query}` : ''}`" class="ml-4px">
            {{ item.title }}
          </nuxt-link>
        </template>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<style lang='less' scoped>
.el-menu-vertical-my {
    .el-menu-item {
        padding-left: unset !important;
        padding-right: unset !important;
        color: #999!important;
        background-color: #FAFAFA;
        &:hover{
            color:#C58C64!important;
            background-color: #FAFAFA!important;
        }
        a {
            color: #999999;
            font-size: 18px;
             &:hover{
                color: #C58C64!important;
            }
        }

        &.is-active {
            color: #C58C64!important;
            a {
                color: #C58C64;
                &.router-link-active {
                    color:#C58C64;
                }
            }
        }

    }
}
</style>