<template>
    <div class="ht-base-menu-group-demo">
        <ht-base-menu :theme="theme1" style="width: 256px">
            <ht-base-menu-group title="标题">
                <ht-base-menu-item name="1">
                    <ht-base-icon type="LiRa_telephone" size=14 />
                    侧栏导航菜单
                </ht-base-menu-item>
                <ht-base-menu-item name="2">
                    <ht-base-icon type="LiRa_comment" size=14 />
                    侧栏导航菜单
                </ht-base-menu-item>
            </ht-base-menu-group>
            <ht-base-menu-group title="标题">
                <ht-base-menu-item name="3">
                    <ht-base-icon type="LiRa_user" size=14 />
                    侧栏导航菜单
                </ht-base-menu-item>
            </ht-base-menu-group>
        </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: 'HtBaseMenuGroupDemo',
        data() {
            return {
                theme1: 'light'
            }
        }
    }
</script>
