<template>
    <div class="ht-base-layout-left-slider-demo">
        <ht-base-layout>
            <ht-base-header class="demo-layout-header">
                <div class="demo-layout-logo">
                    <img class="logo-img" src="http://39.106.250.14:8082/base-components/static/layout_logo.svg" alt="">
                </div>
                <div class="demo-layout-nav">
                    <ht-base-menu mode="horizontal" theme="primary" active-name="1">
                        <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-submenu name="3">
                            <span slot="title">
                              <ht-base-icon type='LiRa_user' size=14 />
                              顶部导航菜单
                            </span>
                            <ht-base-menu-group title="标题">
                                <ht-base-menu-item name="3-2">导航菜单3-1</ht-base-menu-item>
                                <ht-base-menu-item name="3-2">导航菜单3-2</ht-base-menu-item>
                            </ht-base-menu-group>
                            <ht-base-menu-group title="标题">
                                <ht-base-menu-item name="3-3" disabled>导航菜单3-3</ht-base-menu-item>
                            </ht-base-menu-group>
                        </ht-base-submenu>
                        <ht-base-menu-item name="4">
                            顶部导航菜单
                        </ht-base-menu-item>
                        <ht-base-submenu name="5">
                            <span slot="title" class="submenu-title-wrapper">
                              顶部导航菜单
                            </span>
                            <ht-base-menu-item name="5-1">导航菜单5-1</ht-base-menu-item>
                            <ht-base-menu-item name="5-2">导航菜单5-2</ht-base-menu-item>
                            <ht-base-menu-item name="5-3" disabled>导航菜单5-3</ht-base-menu-item>
                        </ht-base-submenu>
                    </ht-base-menu>
                </div>
            </ht-base-header>
            <ht-base-layout :style="{padding: '0 50px'}">
                <ht-base-breadcrumb class="demo-layout-breadcrumb">
                    当前位置：
                    <ht-base-breadcrumb-item to="/">首页</ht-base-breadcrumb-item>
                    <ht-base-breadcrumb-item to="/component/base-form-demo">商品列表</ht-base-breadcrumb-item>
                    <ht-base-breadcrumb-item>商品详情</ht-base-breadcrumb-item>
                </ht-base-breadcrumb>
                <ht-base-content class="demo-layout-content">
                    <ht-base-layout>
                        <ht-base-sider hide-trigger :style="{background: '#fff'}">
                            <ht-base-menu active-name="1-2" theme="light" width="auto" :open-names="['1']">
                                <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>
                        </ht-base-sider>
                        <ht-base-content class="demo-layout-content">
                            Content
                        </ht-base-content>
                    </ht-base-layout>
                </ht-base-content>
            </ht-base-layout>
            <ht-base-footer class="demo-layout-footer-center">2019 &copy; Tydic UX and Interactive Design Center</ht-base-footer>
        </ht-base-layout>
    </div>
</template>

<script>
    export default {
        name: 'HtBaseLayoutLeftSliderDemo',
        data() {
            return {
                current: ['phone'],
            }
        },
    }
</script>
<style lang="less">
    .ht-base-layout-left-slider-demo {
        overflow-x: scroll;

        .demo-layout-header {
            min-width: 960px;
            background: #228EF8;
            padding: 0 16px;
            display: flex;
            align-items: center;
            box-sizing: border-box;

            .demo-layout-logo .logo-img {
                width: 176px;
                height: 30px;
            }

            .demo-layout-nav {
                margin-left: auto;
            }
        }

        .demo-layout-content {
            padding: 24px;
            min-height: 280px;
            background: #fff;
        }

        .demo-layout-breadcrumb {
            margin: 20px 0;
        }

        .demo-layout-footer-center {
            text-align: center;
        }
    }
</style>

