saas-platform/frontend/saas-web/app/view/main/Navigation.scss

.x-navpanel {
    overflow: visible;

    .x-panel-bodyWrap {
        overflow: visible;
        
        .x-panel-body-nav {
            color: #404040;
            font-size: 13px;
            line-height: 17px;
            font-weight: 400;
            font-family: 'Open Sans', 'Helvetica Neue', helvetica, arial, verdana, sans-serif;
            background: #f6f6f6;
            overflow: visible;
    
            .x-autocontainer-outerCt {
                background-color: #3C4A57;
    
                .x-autocontainer-innerCt {
    
                    .x-navlist {
                        position: relative;
                        list-style: none;
                        padding: 0;
                        margin: 0;
                        width: 100%;
    
                        .x-navitem {
                            cursor: default;
                            position: relative;
                            list-style: none;
                            padding: 0;
                            margin: 0;
                            outline: none !important;
                            
                            .x-navitem-body {
                                background-color: #3C4A57;
    
                                .nav-inner-wrap {
                                    position: relative;
                                    position: relative;
                                    overflow: hidden;
                                    list-style: none;
                                    max-height: 64px;
                                    padding: 0 10px;
    
                                    .nav-inner-icon {
                                        color: #adb3b8;
                                        font-size: 18px;
                                        text-align: center;
                                        background-repeat: no-repeat;
                                        background-position: 0 center;
                                        margin-left: 10px;
                                        display: inline;
    
                                        &:before {
                                            line-height: 64px;
                                        }
                                    }
    
                                    .nav-inner-text {
                                        cursor: default;
                                        color: #adb3b8;
                                        margin-left: 20px;
                                        margin-right: 24px;
                                        font-size: 14px;
                                        line-height: 64px;
                                        display: inline;
                                    }
                                }
                            }
                            .x-navitem-menu {
                                position: absolute;
                                z-index: 9999;
                                margin-left: 100%;
                                top: 0;
                                background: white;
                                overflow: hidden;
                                // animation: name duration timing-function delay iteration-count direction;

                                .nav-menu-body {
                                    display: flex;
                                    padding: 5px;
                                    border: 4px solid #c7c7c7;
                                    border-color: rgba(0,0,0,.2);
                                    border-left: 0;
                                    border-top-right-radius: 4px;
                                    border-bottom-right-radius: 4px;

                                    .menu {
                                        width: 200px;
                                        border-right: 1px dashed #ccc;
                                        letter-spacing: 1px;
                                        color: #444;

                                        &:last-child {
                                            border: none;
                                        }
                                        
                                        .menu-title {
                                            padding-left: 10px;
                                        }

                                        .menu-content {
                                            list-style: none;
                                            padding-left: 10px;
                                            padding-right: 10px;

                                            .menuitem {
                                                margin: 5px 0;

                                                .item-text {
                                                    cursor: pointer;
                                                }

                                                .item-icon {
                                                    cursor: pointer;
                                                    display: none;
                                                    float: right;
                                                    font-style: inherit;
                                                    background: green;
                                                    color: white;
                                                    border-radius: 4px;
                                                }

                                                &:hover {

                                                    .item-icon {
                                                        display: block;
                                                    }
                                                
                                                    .tem-text {
                                                        color: blue;
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                        .x-navitem-over {
                            .x-navitem-body {
                                background-color: #475360;
                            }
                        }
                    }
                }
            }
        }
    }
}