<template>
    <div class="home">
        <header>
            <h3>seeyon-ui-antd</h3>
        </header>
        <div class="content">
            <nav class="parent">
                <ul class="child">
                    <li v-for="item in menuData" :key="item.title">
                        <div class="title">{{item.title}}</div>
                        <ul>
                            <router-link :to="item1.path" v-for="item1 in item.components" :key="item1.name">
                                <li class="cmp">
                                    <span>{{item1.name}}</span>
                                </li>
                            </router-link>
                        </ul>
                    </li>
                </ul>
            </nav>
            <main>
                <router-view />
            </main>
        </div>
    </div>
</template>

<script>

export default {
    name: "Home",
    data() {
        const menuData = [
            {
                title: 'General',
                components: [
                    { name: 'Button', path: '/button' },
                    { name: 'Icon', path: '/icon' },
                ]
            },
            {
                title: 'Layout',
                components: [
                    { name: 'Grid', path: '/grid' },
                    { name: 'Layout', path: '/layout' },
                    { name: 'Space', path: '/space' },
                ]
            },
            {
                title: 'Navigation',
                components: [
                    { name: 'Affix', path: '/affix' },
                    { name: 'Breadcrumb', path: '/breadcrumb' },
                    { name: 'Dropdown', path: '/dropdown' },
                    { name: 'Menu', path: '/menu' },
                    { name: 'PageHeader', path: '/pageHeader' },
                    { name: 'Pagination', path: '/pagination' },
                    { name: 'Steps', path: '/steps' },
                ]
            },
            {
                title: 'Data Entry',
                components: [
                    { name: 'AutoComplete', path: '/autoComplete' },
                    { name: 'Cascader', path: '/cascader' },
                    { name: 'Checkbox', path: '/checkbox' },
                    { name: 'DatePicker', path: '/datePicker' },
                    { name: 'Form', path: '/form' },
                    { name: 'FormModel', path: '/formModel' },
                    { name: 'Input', path: '/input' },
                    { name: 'InputNumber', path: '/inputNumber' },
                    { name: 'Mentions', path: '/mentions' },
                    { name: 'Radio', path: '/radio' },
                    { name: 'Rate', path: '/rate' },
                    { name: 'Select', path: '/select' },
                    { name: 'Slider', path: '/slider' },
                    { name: 'Switch', path: '/switch' },
                    { name: 'TimePicker', path: '/timePicker' },
                    { name: 'Transfer', path: '/transfer' },
                    { name: 'TreeSelect', path: '/treeSelect' },
                    { name: 'Upload', path: '/upload' },
                ]
            },
            {
                title: 'Data Display',
                components: [
                    { name: 'Avatar', path: '/avatar' },
                    { name: 'Badge', path: '/badge' },
                    { name: 'Calendar', path: '/calendar' },
                    { name: 'Card', path: '/card' },
                    { name: 'Carousel', path: '/carousel' },
                    { name: 'Collapse', path: '/collapse' },
                    { name: 'Comment', path: '/comment' },
                    { name: 'Descriptions', path: '/descriptions' },
                    { name: 'Empty', path: '/empty' },
                    { name: 'List', path: '/list' },
                    { name: 'Popover', path: '/popover' },
                    { name: 'Statistic', path: '/statistic' },
                    { name: 'Table', path: '/table' },
                    { name: 'Tabs', path: '/tabs' },
                    { name: 'Tag', path: '/tag' },
                    { name: 'Timeline', path: '/timeline' },
                    { name: 'Tooltip', path: '/tooltip' },
                    { name: 'Tree', path: '/tree' },
                ]
            },
            {
                title: 'Feedback',
                components: [
                    { name: 'Alert', path: '/alert' },
                    { name: 'Drawer', path: '/drawer' },
                    { name: 'Message', path: '/message' },
                    { name: 'Modal', path: '/modal' },
                    { name: 'Notification', path: '/notification' },
                    { name: 'Popconfirm', path: '/popconfirm' },
                    { name: 'Progress', path: '/progress' },
                    { name: 'Result', path: '/result' },
                    { name: 'Skeleton', path: '/skeleton' },
                    { name: 'Spin', path: '/spin' },
                ]
            },
            {
                title: 'Other',
                components: [
                    { name: 'Anchor', path: '/anchor' },
                    { name: 'BackTop', path: '/backTop' },
                    { name: 'ConfigProvider', path: '/configProvider' },
                    { name: 'Divider', path: '/divider' },
                    { name: 'LocaleProvider', path: '/localeProvider' },

                ]
            },
        ]
        return {
            menuData,
        }
    }

};
</script>
<style lang="scss" scoped>
.home {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    header {
        text-align: center;
        height: 60px;
        margin: 0;
        box-shadow: 0 1px 10px #888888;
    }
    .content {
        padding: 20px;
        flex: 1;
        display: flex;
        nav {
            width: 300px;
            height: 100%;
        }
        main {
            flex: 1;
            padding-left: 100px;
            padding-top: 100px;
        }
    }
}
.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    &:hover {
        // overflow: auto;
        overflow: overlay;
    }
}
.title {
    color: rgba(0, 0, 0, 0.45);
}
.cmp {
    font-size: 14px;
    color: #314659;
    &:hover {
        color: #1890ff;
    }
}
ul,
li {
    box-sizing: border-box;
    list-style-type: none;
    font-size: 14px;
    padding: 8px 16px;
    &:hover {
        color: #1890ff;
    }
}
a {
    display: block;
    text-decoration: none;
    &.router-link-exact-active {
        background-color: #e6f7ff;
        border-right: 3px solid#1890ff;
        span {
            color: #1890ff;
        }
    }
}
::-webkit-scrollbar {
    width: 3px;
    height: 3px;
}

::-webkit-scrollbar-track {
    border-radius: 0;
    background: rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
}
</style>
