shalu-velofex/apps/web-velofex/src/layouts/header/header.vue

<script setup lang="ts">
import { computed } from 'vue';

import { SvgArrowRightIcon } from '@vben/icons';

import useAvatar from '@/assets/image/user.png';
import { $t } from '@/locales';

import Logo from '#/assets/image/logo.png';
// import { useLoginModalStore } from '#/store';

import SelectLang from '../select-lang.vue';
import Avatar from './avatar.vue';

// const loginModalStore = useLoginModalStore();

const token = localStorage.getItem('token_a');

const menus = computed(() => [
  { title: $t('homeMenu.toolDownloads'), path: '/Views/Tools/Index.html' },
  {
    title: $t('homeMenu.aIGeneratedApps'),
    path: '/Views/Designer/AIGenerateApp.html',
  },
  {
    title: $t('homeMenu.aIAssistants'),
    path: '/Views/Designer/AIAssistant.html',
  },
  {
    title: $t('homeMenu.shaluAcademy'),
    path: `/Views/Account/SSOIndex.html?system=design&token=${token}`,
  },
  {
    title: $t('homeMenu.applicationMarket'),
    path: '/Views/Designer/systemAppStore.html?tab=application',
  },
]);

function openLogin() {}

function handleClick(path: string) {
  window.open(path, '_blank');
}
</script>

<template>
  <div class="mb-[32px] flex items-center justify-between">
    <img :src="Logo" alt="logo" class="logo" height="30px" width="138px" />
    <ul class="menu flex gap-[60px] text-xs">
      <li
        v-for="menuItem in menus"
        :key="menuItem.title"
        class="flex items-center gap-2"
        @click="handleClick(menuItem.path)"
      >
        <span>{{ menuItem.title }}</span>
        <SvgArrowRightIcon class="arrow size-2" />
      </li>
    </ul>
    <div class="flex gap-2">
      <SelectLang />
      <Avatar :avatar="useAvatar" class="cursor-pointer" @click="openLogin" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.logo {
  cursor: pointer;
}

.menu li {
  color: #462424;
  cursor: pointer;

  &:hover {
    color: #7a003d;

    :deep(path) {
      fill: #7a003d;
    }
  }
}
</style>