<template>
    <div class="ht-base-layout-slider-demo">
        <div class="layout">
            <div class="demo-layout-sider">
                <div class="demo-layout-logo">
                    <img class="logo-img" src="http://39.106.250.14:8082/base-components/static/layout_logo.svg" alt="">
                </div>
                <ht-base-menu theme="dark" style="width: auto;">
                    <ht-base-submenu name="1">
                        <template slot="title">
                            <ht-base-icon type='LiRa_setup' size=14 />
                            侧边导航菜单
                        </template>
                        <ht-base-menu-item name="1-1">导航菜单 1_1</ht-base-menu-item>
                        <ht-base-menu-item name="1-2">导航菜单 1_2</ht-base-menu-item>
                        <ht-base-menu-item name="1-3">导航菜单 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-group title="标题">
                            <ht-base-menu-item name="2-1">导航菜单 2_1</ht-base-menu-item>
                            <ht-base-menu-item name="2-2">导航菜单 2_2</ht-base-menu-item>
                        </ht-base-menu-group>
                        <ht-base-menu-group title="标题">
                            <ht-base-menu-item name="2-3">导航菜单 2_3</ht-base-menu-item>
                            <ht-base-menu-item name="2-4">导航菜单 2_4</ht-base-menu-item>
                        </ht-base-menu-group>
                    </ht-base-submenu>
                    <ht-base-submenu name="3">
                        <template slot="title">
                            <ht-base-icon type='LiRa_setup' size=14 />
                            侧边导航菜单
                        </template>
                        <ht-base-menu-item name="3-1">导航菜单 3_1</ht-base-menu-item>
                        <ht-base-menu-item name="3-2">导航菜单 3_2</ht-base-menu-item>
                        <ht-base-submenu name="3-3">
                            <template slot="title">导航菜单 3_3</template>
                            <ht-base-menu-item name="3-3-1">导航菜单 3_3_1</ht-base-menu-item>
                            <ht-base-menu-item name="3-3-2">导航菜单 3_3_2</ht-base-menu-item>
                            <ht-base-menu-item name="3-3-3">导航菜单 3_3_3</ht-base-menu-item>
                        </ht-base-submenu>
                    </ht-base-submenu>
                </ht-base-menu>
            </div>
            <ht-base-layout style="height: 300px;overflow-y: scroll;border-top:1px solid #ccc;">
                <ht-base-content>
                    <ht-base-menu mode="horizontal" theme="light" 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>
                    <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>
                    <div class="demo-layout-content"></div>
                </ht-base-content>
            </ht-base-layout>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'HtBaseLayoutSliderDemo',
        data() {
            return {
                current: ['setting:1'],
            }
        },
    }
</script>
<style lang="less">
    .ht-base-layout-slider-demo {
        overflow-x: scroll;
        .layout {
            min-width: 960px;
            display: flex;
            wrap: no-wrap;
            .demo-layout-sider{
                width: 200px;
                height: 300px;
                overflow-y: scroll;
                background: #595959;
                .demo-layout-logo {
                    width: 200px;
                    height: 64px;
                    background: #595959;
                    .logo-img {
                        width: 100%;
                        height: 100%;
                        padding: 10px;
                        transition: 1s;
                    }
                }
            }
            .demo-layout-breadcrumb {
                margin: 20px;
            }
            .demo-layout-content {
                width: calc(~"100% - 40px");
                min-height: 400px;
                border: 1px solid #f5f5f5;
                margin: 20px;
                background: #ffffff;
            }
        }
    }
</style>

