<template>
    <client-only>
    <el-menu
        :default-active="activeIndex"
        mode="horizontal"
        :ellipsis="false"
        @select="handleSelect"
    >
        <el-menu-item index="/">
            <img
        style="width: 50px;"
        src="/logo.svg"
        alt="Element logo"
      />
        </el-menu-item>
        <el-menu-item index="/apply">立即申请</el-menu-item>
        <el-menu-item index="/about">关于我们</el-menu-item>
        <el-menu-item index="/status" disabled>设备监控</el-menu-item>
        <el-sub-menu index="/area" disabled>
        <template #title>区域服务</template>
       <!--  <el-menu-item index="/area/ln1">辽宁一区</el-menu-item>
        <el-menu-item index="/area/ln2">辽宁二区</el-menu-item>
        <el-menu-item index="/area/jx1">江西一区</el-menu-item>
        <el-sub-menu index="/area/jx2">
            <template #title>江西二区</template>
            <el-menu-item index="/area/jx2/gpu">GPU服务器</el-menu-item>
            <el-menu-item index="/area/jx2/web">网页服务器</el-menu-item>
            <el-menu-item index="/area/jx2/game">游戏服务器</el-menu-item>
        </el-sub-menu> -->
        </el-sub-menu>
        <el-menu-item index="/forum" disabled>论坛</el-menu-item>
        <el-menu-item index="/host" disabled>托管</el-menu-item>
        <div class="flex-grow" />
            <el-menu-item index="/login">登录</el-menu-item>
            <el-menu-item index="register">注册</el-menu-item>
    </el-menu>
    </client-only>
   
</template>

<script lang="ts" setup>

const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
  navigateTo(key)
}
</script>
<style>
.flex-grow {
  flex-grow: 1;
}
</style>