safekat/httpdocs/themes/focus2/scss/layout/sidebar/_sidebar-icon-hover.scss

@media (min-width: 767px) {

    [data-sidebar-style="icon-hover"][data-layout="vertical"] {
        .nav-header {
            width: 4.38rem;

            .brand-logo {
                padding-left: 1.6rem;

                .logo-abbr {
                    display: block;
                }

                .brand-title {
                    display: none;
                }
            }

            .nav-control {
                display: none;
            }
        }

        .header {
            padding-left: 4.38rem;

            @at-root [direction="rtl"]#{&} {
                padding-right: 4.38rem;
                padding-left: 0.9375rem;
            }

            .header-content {
                padding-left: 1.375rem;

                @at-root [direction="rtl"]#{&} {
                    padding-right: 1.375rem;
                    padding-left: 0;
                }
            }
        }

        .quixnav {
            overflow: visible;
            position: absolute;
            left: -12.8125rem;
            // z-index: 1;

            @include custommq($min: 1200px, $max: 1350px) {
                left: -10rem;
            }

            @at-root [direction="rtl"]#{&} {
                left: auto;
                right: -12.8125rem;
            }

            .nav-label {
                display: none;
            }

            .metismenu {
                &>li {
                    &>a {
                        display: flex;
                        justify-content: space-between;
    
                        &>i {
                            order: 1;
                        }
                    }
                }

                ul {
                    a {
                        position: relative;

                        &::before {
                            position: absolute;
                            content: "\f764";
                            right: 1.75rem;
                            font-family:"Material Design Icons";
                            font-size: 13px;

                            @at-root [direction="rtl"]#{&} {
                                right: auto;
                                left: 1.75rem;
                            }
                        }
                    }
                }

                .has-arrow {
                    &::after {
                        right: 5rem;

                        @at-root [direction="rtl"]#{&} {
                            right: auto;
                            left: 5rem;
                        }
                    }
                }
            }
        }

        .icon-hover-toggle {

            .nav-header {
                width: 17.1875rem;
    
                .brand-logo {
                    padding-left: 1.6rem;
    
                    .logo-abbr {
                        display: none;
                    }
    
                    .brand-title {
                        display: block;
                    }
                }
            }
    
            .header {
                padding-left: 4.38rem;

                @at-root [direction="rtl"]#{&} {
                    padding-right: 4.38rem;
                    padding-left: 0.9375rem;
                }
            }

            .quixnav {
                left: 0;

                @at-root [direction="rtl"]#{&} {
                    left: auto;
                    right: 0;
                }
            }
        }

        .content-body {
            margin-left: 4.375rem;

            @at-root [direction="rtl"]#{&} {
                margin-left: 0;
                margin-right: 4.375rem;
            }
        }

        .footer {
            padding-left: 4.375rem;

            @at-root [direction="rtl"]#{&} {
                margin-left: 0;
                margin-right: 4.375rem;
            }
        }
    }



}