pipicar/resources/assets/sass/components/sidebar.scss

.sidebar-platform {
        position: fixed;
        left: 0;
        top: 58px;
        z-index: 1002;
        background:url("../../img/sidebar-bg.jpg") no-repeat;
        height: 100%;
        transition: 0.15s allease;
        background-size: cover;
    ul {
        list-style: none;
        padding-inline-start: 0;
    }

    .sidebar-content {
        position: relative;
        z-index: 2;
        overflow: auto;
        height: 100%;

        &::-webkit-scrollbar-track {
            background-color: transparent;
        }

        &::-webkit-scrollbar {
            width: 0;
        }

        &::-webkit-scrollbar-thumb {
            background-color: transparent;
        }

        li {
            a, .tree-toggle {
                color: $text-color;
                width: 100%;
                line-height: 1.5;
                display: flex;
                align-items: center;
                text-decoration: none;
                min-height: 40px;
                font-size: 1rem;
                cursor: pointer;
                transition: 0.3s all ease;

                &:hover {
                    background-color: $border-color!important;
                }

                &:focus-visible {
                    border: none;
                }

                .menu-icon {
                    text-align: center;
                    &:active {
                        color: white;
                        background-color: $text-color;
                    }
                }
            }

            .tree-toggle {
                position: relative;

                .has-more {
                    position: absolute;
                    top: 8px;
                    right: 10px;
                    font-size: 12px;
                    border-radius: 50%;
                    width: 25px;
                    height: 25px;
                    text-align: center;
                    line-height: 25px;
                    transform: rotate(-90deg);
                    transition: 0.2s all ease;
                }

                &.active {
                    border-top: 1px solid #dcdcdc;

                    .has-more {
                        transform: rotate(0);
                        background-color: $border-color;
                        color: $text-color;
                    }
                }
            }
        }

        .tree-content {
            border-bottom: 1px solid #dcdcdc;
        }

        .tree-parent {
            li {
                a, .tree-toggle {
                    padding-left: 30px!important;

                    .menu-icon {
                        display: none;
                    }
                }
            }
        }

        .tree-child {
            li {
                a, .tree-toggle {
                    padding-left: 40px!important;
                }
            }
        }
    }
}

#app.menu-open {
    .sidebar-platform {
        width: 250px;

        .sidebar-content {
            overflow: auto!important;
            li {
                a, .tree-toggle {
                    padding: 0 20px 0 17px;

                    span {
                        margin-left: 10px;
                    }

                    .menu-icon {
                        min-height: 40px;
                        height: 40px;
                        max-height: 40px;
                        line-height: 40px;
                    }
                }
                .tree-content{
                    a, .tree-toggle {
                        span {
                            margin-left: 0;
                        }
                    }
                }
            }
        }
    }
}

#app:not(.menu-open) {
    .sidebar-platform {
        width: 50px;

        .sidebar-content {
            li {
                position: relative;

                a, .tree-toggle {
                    span {
                        display: none;
                    }

                    .menu-icon {
                        min-height: 50px;
                        height: 50px;
                        max-height: 50px;
                        min-width: 50px;
                        width: 50px;
                        max-width: 50px;
                        line-height: 50px;
                        font-size: 17px;
                    }

                    .has-more {
                        display: none;
                    }
                    &.active{
                        border-top: none!important;
                    }
                }

                .tree-content {
                    display: none !important;
                }

                &:hover {
                    a, .tree-toggle {
                        .menu-icon {
                            color: $primary-color;
                        }
                    }
                }


                &.li-parent {
                    position: static;
                    &:hover {
                        & + .li-parent{
                            margin-top: 50px;
                        }
                        position: absolute;
                        left: 50px;
                        z-index: 2;
                        border-radius: 4px;
                        box-shadow: $box-shadow;
                        background-color: #fff;
                        width: 250px;

                        a, .tree-toggle {
                            span {
                                display: block;
                            }
                        }

                        & > a, .tree-toggle.parent {
                            position: relative;
                            left: -50px;
                            width: 300px;
                            color: $primary-color;
                            border-radius: 4px;
                            box-shadow: 0 2px 4px rgb(0 0 0 / 15%), 0 0 2px rgb(0 0 0 / 12%);
                            background-color: #fff;
                            span{
                                margin-left: 20px;
                            }
                            .menu-icon {
                                color: $primary-color;
                            }
                        }

                        .tree-toggle.parent{
                            .waves-ripple{
                                display: none!important;
                            }
                        }


                        .tree-content {
                            width: 250px;
                            display: block !important;

                            &.tree-parent {
                                max-height: 400px;
                                overflow: auto;

                                &::-webkit-scrollbar-track {
                                    background-color: transparent;
                                }

                                &::-webkit-scrollbar {
                                    width: 0;
                                }

                                &::-webkit-scrollbar-thumb {
                                    background-color: transparent;
                                }

                                .tree-toggle.child {
                                    color: $gray-color;
                                    padding: 0 0 0 20px!important;
                                    cursor: default!important;
                                    &:hover{
                                        background-color: transparent !important;
                                    }
                                    .waves-ripple{
                                        display: none!important;
                                    }
                                }

                                .li-child {
                                    a {
                                        padding: 0 0 0 30px!important;
                                        &:hover{
                                            background-color: #f2f2f2!important;
                                        }
                                    }
                                }
                            }

                            &.tree-child {
                                margin-bottom: 10px;
                                padding-bottom: 10px;
                            }
                        }
                    }
                }
            }
        }
    }
}