@import "../../../assets/css/variable";

.sidebar {
    $sidebar-color: hsla(0,0%,100%,.65);
    position: relative;
    width: $main-menu-width;
    box-shadow: 2px 0 6px rgba(0,21,41,.35);
    flex: 0 0 $main-menu-width;
    order: 0;
    color: $sidebar-color;
    background-color: #001529;
    transition: all .2s;
    z-index: 10;
    @if lightness($slider-bar-bg-color) < 50% {
        color: #fff;
    }

    .menu-index-logo {
        color: $white;
        height: $header-height;
        text-align: center;
        line-height: $header-height;
        font-weight: 700;
        font-size: 24px;
        transition: all .2s;
        background: #002140;
        overflow: hidden;
        & h1{
            display: inline-block;
            vertical-align: middle;
            font-size: 20px;
            margin: 0;
            font-family: Myriad Pro,Helvetica Neue,Arial,Helvetica,sans-serif;
            font-weight: 600;
            color: white;
        }
    }

    .sidebar-menu {
        overflow-y: auto;
        max-height: calc( 100% - 64px );
    }

    .sidebar-menu::-webkit-scrollbar {
        width: 4px;
    }

    .sidebar-menu::-webkit-scrollbar-track {
        background-color: #161d26;
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius: 2em;
    }

    .sidebar-menu::-webkit-scrollbar-thumb {
        background-color: #888888;
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius: 2em;
    }

    .sidebar-icon-img {
        width: 16px;
        height: 16px;
        margin-right: 6px;
    }

    .logo-p{
        position: relative;
        top: -2px;
        display: inline-block;
        vertical-align: middle;
        width: 32px;
    }

    .close{
        position: absolute;
        top: 0;
        left: $main-menu-width;
        width: $header-height;
        height: $header-height;
        background-color: $slider-bar-bg-color;
        cursor: pointer;
        text-align: center;
        line-height: 64px;
        font-size: 20px;
        color: #aaa;
        transition: all .2s;
        &:hover{
            background:rgba(0,0,0,.025)
        }
    }

    &.sidebar-collapsed{
        width: $main-menu-collapsed-width;
        flex: 0 0 $main-menu-collapsed-width;
        .ne-menu-item{
            padding-right: 12px;
            text-align: center;
        }
        .close{
            left: $main-menu-collapsed-width;
        }
    }
}

.sidebar-collapsed {
    .ant-menu-inline-collapsed {
        width: $main-menu-collapsed-width;
    }

    .ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title {
        padding: 0 24px;
    }

    .sidebar-icon-img {
        width: 24px;
        height: 24px;
        margin-right: 0;
    }

    .sidebar-icon-title {
        display: none;
    }

    .ant-menu-item:hover,
    .ant-menu-item-active,
    .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
    .ant-menu-submenu-active,
    .ant-menu-submenu-title:hover {
        color: white;
    }

    .ant-menu-inline-collapsed > .ant-menu-item {
        white-space: normal;
        padding: 0 24px;
    }
}