<template>
    <div class="ht-base-menu-collapse-demo">
        <ht-base-menu :theme="theme1" style="width: 256px;">
            <ht-base-submenu name="1">
                <template slot="title">
                    <ht-base-icon type='LiRa_setup' size=14 />
                    内容管理
                </template>
                <ht-base-menu-item name="1-1">文章管理</ht-base-menu-item>
                <ht-base-menu-item name="1-2">评论管理</ht-base-menu-item>
                <ht-base-menu-item name="1-3">举报管理</ht-base-menu-item>
            </ht-base-submenu>
            <ht-base-submenu name="2">
                <template slot="title">
                    <ht-base-icon type='LiRa_setup' size=14 />
                    用户管理
                </template>
                <ht-base-menu-item name="2-1">新增用户</ht-base-menu-item>
                <ht-base-menu-item name="2-2">活跃用户</ht-base-menu-item>
            </ht-base-submenu>
            <ht-base-submenu name="3">
                <template slot="title">
                    <ht-base-icon type='LiRa_setup' size=14 />
                    统计分析
                </template>
                <ht-base-menu-group title="使用">
                    <ht-base-menu-item name="3-1">新增和启动</ht-base-menu-item>
                    <ht-base-menu-item name="3-2">活跃分析</ht-base-menu-item>
                    <ht-base-menu-item name="3-3">时段分析</ht-base-menu-item>
                </ht-base-menu-group>
                <ht-base-menu-group title="留存">
                    <ht-base-menu-item name="3-4">用户留存</ht-base-menu-item>
                    <ht-base-menu-item name="3-5">流失用户</ht-base-menu-item>
                    <ht-base-submenu name="3-6">
                        <template slot="title">用户流失分布</template>
                        <ht-base-menu-group title="使用">
                            <ht-base-menu-item name="3-6-1">新增和启动</ht-base-menu-item>
                            <ht-base-menu-item name="3-6-2">活跃分析</ht-base-menu-item>
                            <ht-base-menu-item name="3-6-3">时段分析</ht-base-menu-item>
                        </ht-base-menu-group>
                    </ht-base-submenu>
                </ht-base-menu-group>
            </ht-base-submenu>
        </ht-base-menu>
        <br>
        <p>改变主题色</p>
        <ht-base-radio-group v-model="theme1">
            <ht-base-radio label="light"><span>浅色</span></ht-base-radio>
            <ht-base-radio label="dark"><span>深色</span></ht-base-radio>
        </ht-base-radio-group>
    </div>
</template>

<script>
  export default {
    name: 'HtBaseMenuCollapseDemo',
    data() {
      return {
        theme1: 'light'
      }
    }
  }
</script>
<style>
    .ht-base-menu-collapse-demo {

    }
</style>

