<template>
  <div>
    <h-menu :defaultIndex="'a'">
      <h-menu-item index="a">123</h-menu-item>
      <h-menu-item index="b" disabled>123</h-menu-item>
      <h-menu-item index="c">123</h-menu-item>
    </h-menu>
  </div>
</template>

<script lang="ts" setup></script>

<style scoped lang="scss">
.vp-doc li + li {
  margin-top: 0;
}
</style>

<template>
  <div>
    <h-menu
      style="height: 100vh"
      mode="vertical"
      :logo="logo"
      :defaultIndex="'a'"
    >
      <h-menu-item index="a" icon="vue">Dashboard</h-menu-item>
      <h-menu-item index="b" icon="user">用户管理</h-menu-item>
      <!-- <h-menu-item index="c"></h-menu-item> -->
      <h-submenu index="c" icon="lock" title="权限管理">
        <h-menu-item index="c-1" icon="vue">Dashboard</h-menu-item>
        <h-menu-item index="c-2" icon="user">用户管理</h-menu-item>
        <h-menu-item index="c-3">权限管理</h-menu-item>
      </h-submenu>
    </h-menu>
  </div>
</template>

<script lang="ts" setup>
const logo = {
  imgSrc: 'https://cn.vuejs.org/logo.svg',
  text: 'Hare Admin'
}
</script>

<style scoped lang="scss">
.vp-doc li + li {
  margin-top: 0;
}
.vp-doc li > ol,
.vp-doc li > ul {
  margin: 0;
}
</style>

<template>
  <h-menu :defaultIndex="'a'" mode="vertical" style="width: 100px">
    <h-submenu index="a" title="a">
      <h-menu-item index="a-a">a-a</h-menu-item>
      <h-menu-item index="a-b">a-b</h-menu-item>
      <h-menu-item index="a-c">a-c</h-menu-item>
    </h-submenu>
    <h-menu-item index="b">b</h-menu-item>
    <h-menu-item index="c">c</h-menu-item>
  </h-menu>
</template>

<script lang="ts" setup></script>

<style lang="scss">
.vp-doc ul,
.vp-doc ol {
  padding-left: 0;
  margin: 0;
}
</style>