FileMaster

Edit File: _sidebar-icon-hover.scss

@media (min-width: 47.9375rem) {

[data-sidebar-style="icon-hover"][data-layout="horizontal"] {
		.header .header-content {
		    padding-left: 1.875rem;	
		}
		
	}
	
    [data-sidebar-style="icon-hover"][data-layout="vertical"]{
		
		
		.dlabnav{
			.metismenu{
				li.mm-active{
					&>ul{
						display:none;
					}
				}
			}
			.header-info2{
				justify-content:space-between;
				img{
					order:1;
					margin-right:0
				}	
			}
		}
		.iconhover-toggle{
			.dlabnav{
				.metismenu{
					li.mm-active{
						&>ul{
							display:block;
						}
					}
				}
				
				
			}
		}
		
        .nav-header {
            width: 7rem;
			border-radius: 0 0 0 0!important;
            .brand-logo {
                padding-left: 1.875rem;
				@at-root [direction="rtl"]#{&} {
					padding-left:1.875rem;
					padding-right:1.875rem;
				}
                .logo-abbr {
                    display: block;
                }

.brand-title {
                    display: none;
                }
            }

.nav-control {
                display: none;
            }
        }

.header {
            padding-left: 7rem;

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

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

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

.dlabnav {
            overflow: visible;
            position: absolute;
            left: -10.5rem;
            // z-index: 1;
			
			@include custommq($min: 47.9375rem, $max: 87.5rem) {
                left: -10rem;
            }

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

.nav-label {
                display: none;
            }
			.header-profile{
				img{
					order:1;
				} 
				.header-info{
					margin-left:0!important;
					padding-left:0!important;
					margin-right:0.625rem;
				}
			} 
            .metismenu {
                &>li {
					padding: 0 1.5625rem;
                    &>a {
                        display: flex;
                        justify-content: space-between;
						padding: 1.25rem 1.25rem;
						border-radius: 1rem;
						
                        &>svg,
                        &>i {
                            order: 1;
							margin-right:0;
							margin-top:0;
							padding-right: 0;
							height: auto;
							width: auto;
							line-height: 1;
							@at-root [direction="rtl"]#{&} {
								padding-left:0;
								padding-right:0;
							}
                        }
						
                    }
					&:hover > a,
					&.mm-active > a{
						background: var(--rgba-primary-1);
						color:var(--primary);
						i{
							color:var(--primary);
						}
					}
					
                }

ul {
					border-left: 0;
					padding-left:0;
					padding-right:0;
					@at-root [direction="rtl"]#{&} {
						padding-right:0;
						padding-left:0;
					}
					@at-root [data-theme-version="dark"]#{&} {
						border-color:$d-border;
					}
					&:after{
						left:auto;
						right:1.75rem;
						@at-root [direction="rtl"]#{&} {
							left:1.75rem;
							right:auto;
						}
					}
                    a {
                        position: relative;
						padding-left: 1.3rem;
						@at-root [direction="rtl"]#{&} {
							padding-right: 1.25rem;
						}
                        &::before {
							left: 1.25rem;
							right: auto;
						
                            @at-root [direction="rtl"]#{&} {
                                right: auto;
                                left:-0.3125rem;
                            }
                        }
                    }
                }

.has-arrow {
                    &::after {
                        right: 5rem;
						opacity:0;
						
                        @at-root [direction="rtl"]#{&} {
                            right: auto;
                            left: 5rem;
                        }
                    }
                }
            }
			
			.copyright,
			.plus-box{
				display:none;
			}
			&.mm-show{
				display:none;
			}
		}

.iconhover-toggle{

.nav-header {
                // width: 20.5rem;
                width: var(--width);
		
                .brand-logo {
                    padding-left: 1.6rem;
    
    
                    .brand-title {
                        display: block;
                    }
                }
				@include respond ('laptop'){
					width:17rem;
				}
            }
			&.mm-show{
				display:block;
			}
            .header {
                padding-left: 4.38rem;
				
				@at-root [direction="rtl"]#{&} {
                    padding-right: 4.38rem;
                    padding-left: 0.9375rem;
                }
            }

.dlabnav {
                left: 0;
				//.metismenu > li > a > i{
				//	opacity:1;
				//}
				.metismenu .has-arrow:after{
					opacity:1;
				}

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

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

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

@at-root [direction="rtl"]#{&} {
                margin-left: 0;
                margin-right: 7rem;
            }
        }
    }
	[data-header-position="fixed"][data-layout="horizontal"][data-sidebar-position="fixed"][data-container="boxed"][data-sidebar-style="icon-hover"]{
		.content-body {
			padding-top: 13.5rem;
		} 
	}
	[data-header-position="fixed"][data-layout="horizontal"][data-sidebar-position="fixed"][data-container="wide-boxed"][data-sidebar-style="icon-hover"]{
		.content-body {
			padding-top: 13.5rem;
		} 
	}
	[data-sidebar-style="icon-hover"][data-layout="horizontal"][data-container="boxed"]{
		.dlabnav .metismenu > li > ul.mm-collapse {
			left: auto;
			right: unset;
		}
	}
	[data-sidebar-style="full"][data-layout="horizontal"][data-container="boxed"]{
		.dlabnav .metismenu > li > ul.mm-collapse {
			left: auto;
			right: unset;
		}
	}
	[data-sidebar-style="icon-hover"][data-layout="horizontal"][data-container="wide-boxed"]{
		.dlabnav .metismenu > li > ul.mm-collapse {
			left: auto;
			right: unset;
		}
	}
	[data-sidebar-style="full"][data-layout="horizontal"][data-container="wide-boxed"]{
		.dlabnav .metismenu > li > ul.mm-collapse {
			left: auto;
			right: unset;
		}
	}
	[data-container="boxed"][data-sidebar-position="fixed"][data-sidebar-style="icon-hover"][data-layout="vertical"]{ 
		 .iconhover-toggle{
			 .dlabnav{
				z-index: 99999;
				height: calc(100% - 80px);
				left: calc(calc(100% - 1199px) / 2);
				box-shadow: 20px 20px 20px 0 rgba(0,0,0,0.1);
				width:var(--width);
				.metismenu{
					li{
						a{
							span{
								opacity:1;
							}
						}
					}
				}
				.sidebar-info{
					display:flex !important;
				}
			}
			 
		}
		.dlabnav{
			left: auto;
			width:7rem;
			position:fixed;
			.metismenu{
				li{
					a{
						i{
							margin-top:2px;
						}
						span{
							opacity:0;
							width:0;
						}
					}
				}
			}
			.sidebar-info{
				display:none !important;
			 }
		} 	
		
	 }
 [data-container="wide-boxed"][data-sidebar-style="icon-hover"][data-layout="vertical"]{
	.dlabnav{
		position:absolute;
	}
	.menu-toggle .dlabnav{
		position:absolute;
	}
	 &[data-sidebar-position="fixed"]{
		.iconhover-toggle{
			 .dlabnav{
				z-index: 99999;
				height: calc(100% - 20px);
				left: calc(calc(100% - 1480px) / 2);
				box-shadow: 20px 20px 20px 0 rgba(0,0,0,0.1);
				width: var(--width);
				.metismenu{
					li{
						a{
							span{
								opacity:1;
							}
						}
					}
				}
				.sidebar-info{
					display:flex !important;
				}
			}
		}
		.dlabnav{
			position:fixed;
			left: auto;
			width:7rem;
			.metismenu{
				li{
					a{
						i{
							margin-top:2px;
						 }
						span{
							opacity:0;
							width:0;
						}
					}
				}
			}
			.sidebar-info{
				display:none !important;
			}
		} 	
		
	 }
 }
	
	
}

Back