@import "~@/assets/styles/variables.scss";

$iconSize: 17px;

.sidebar-container {
    display: flex;
    flex-direction: column;
    width: $side-bar-width;
    background-color: $--menu-background-color;
    font-size: 0;
    flex-shrink: 0;
    height: 100vh;
    z-index: 10;
    box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
    transition: all 0.2s ease-in-out;

    //移动端时为fixed
    &.mobile {
        position: fixed;
    }

    //折叠设置
    &.collapse-sidebar {
        width: $iconSize + 20px * 2;

        .sidebar-item-content {
            display: none;
        }
    }

    //自动隐藏
    &.hide-sidebar {
        width: 0;
        pointer-events: none;
        transform: translateX(-$side-bar-width);
    }

    .sidebar-logo-container {
        position: relative;
        width: 100%;
        height: $nav-height;
        line-height: $nav-height;
        text-align: center;

        .sidebar-logo-link {
            height: 100%;
            width: 100%;

            .sidebar-logo {
                width: 32px;
                height: 32px;
                vertical-align: middle;
                margin-right: 12px;
            }

            .sidebar-title {
                display: inline-block;
                margin: 0;
                color: #fff;
                font-weight: 600;
                line-height: $nav-height;
                font-size: 14px;
                font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
                vertical-align: middle;
            }
        }

        &.collapse {
            .sidebar-logo {
                margin-right: 0;
            }
        }
    }

    .el-scrollbar {
        flex: 1;
    }
}

.el-menu {
    border: none;
    height: 100%;
    width: 100%;

    .svg-icon {
        margin-right: 16px;
        width: $iconSize;
        height: $iconSize;
    }

    //菜单hover
    .el-menu-item:hover,
    .el-submenu__title:hover {
        color: $--menu-item-hover-color;

    }

    //子级菜单激活时，父级同样高亮
    .el-menu-item.is-active,
    .is-active > .el-submenu__title {
        color: $--color-primary !important;
    }

    //子级菜单的背景颜色
    &.el-menu--inline,
    .el-submenu .el-submenu > .el-submenu__title {
        background-color: $sub-menu-background;
    }

    //子级菜单内阴影
    &.el-menu--inline {
        box-shadow: inset 0 2px 8px rgba(0, 0, 0, .45)
    }

    //箭头图标与字体同色
    .el-submenu__title i {
        color: inherit;
    }

    //折叠时的弹出菜单
    &.el-menu--popup {
        max-height: 88vh;
        margin-bottom: 0.5vh;
        overflow-y: overlay;

        .popover-menu__title {
            cursor: auto;
            color: $--menu-item-hover-color;
            text-align: center;
            border-bottom: 1px solid $sub-menu-background;
        }
    }
}




