.sidebar{
    height: 100vh;
    width: 260px;
    background-color: var(--bg-white);
    position: fixed;
    left: -260px;
    top: 0;
    z-index: 999999;
    @include transitionMedium;
    display: flex;
	flex-direction: column;
	overflow-y: scroll;
	scrollbar-width: none;
	
    &.show{
        left: 0;
    }
    &.right{
        left: auto;
        right: -260px;
        
        &.show{
            left: auto;
            right: 0;            
        }
    }
	.nav-label {
		margin: 20px 0 0;
		padding: 20px 0 8px;
		text-transform: uppercase;
		font-size: 14px;
		letter-spacing: 0.05rem;
		border-top: 1px solid var(--border-color);
		color: #000;
		font-weight: 600;
	}
	
	.sidebar-bottom{
		margin-top: auto;
		padding: 20px;
		
		.ver-info{
			margin: 0;
			font-size: 13px;
			display: block;
		}
		.name{
			margin-bottom: 5px;
		}
		ul{
			display: flex;
			
			li{
				width: 25%;
				a{
					display: block;
					text-align: center;
					padding: 15px;
					font-size: 18px;
					color: var(--title);
				}
			}
		}	
	}
	
	.author-box{
		background-color: var(--primary);
		display: flex;
		align-items: center;
		padding: 20px 15px;
		margin-bottom: 30px;
			
		.dz-media{
			border-radius: var(--border-radius-base);
			-webkit-border-radius: var(--border-radius-base);
			border: 2px solid #fff;
			width: 45px;
			height: 45px;
			overflow: hidden;
			margin-right: 12px;
			img{
				border-radius: var(--border-radius-base);				
			}
		}
		span{
			color: #fff;
		}
		.name{
			color: #fff;
			margin-bottom: 0;
		}
	}
	
	.navbar-nav{
		padding: 0 18px;
		margin-bottom: 30px;
		
		& > .nav-label:first-child{
			border-top: 0;
			margin: 0;
			padding-top: 0;
		}
		li{
			& > a{
				position: relative;
				padding: 8px 15px 8px 0;
				color: inherit;
				display: flex;
				align-items: center;
				font-weight: 400;
				color: #000;
				
				&:after{
					content: "\f105";
					font-family: "Font Awesome 6 Free";
					right: 0;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					opacity: 0.5;
					font-weight: 700;
					color: #000;
					font-size: 10px;
				}
				.custom-switch{
                    margin-left: auto;
                    align-items: center;
                    display: flex;
                }
				.badge{
					margin-left: auto;
					font-size: 10px;
					min-width: 20px;
					min-height: 20px;
					padding: 0;
					height: 20px;
					line-height: 18px;
				}
			}
		}
	}
}
.dark-overlay{
	display: none;
	&.active{
		display: block;
	}
	position: fixed;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
	background-color: rgba(0,0,0,0.5);
	@include transitionMedium;
	z-index: 99999;
}
/* .menu-toggler{
    position: relative;
	
    &.show{
        &:after{
			content: "";
			position: fixed;
			height: 100%;
			width: 100%;
			left: 0;
			top: 0;
			background-color: rgba(0,0,0,0.5);
			@include transitionMedium;
			z-index: 99999;
		}
    }
} */