sidenav-angular/src/styles.scss

html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  .sidenav-container{
    margin: 0;
    padding:0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    position: absolute;
    overflow: hidden;
    
    &.left{
      &.fixed{
        .sidenav-drawer-container {
          transition: left 0.3s;
          left: 0;
        }
        .sidenav-content {
          margin-left: 240px;
        }
      } 

      &.hover {
        .sidenav-drawer-container{
          transition: left 0.3s;
          left: -180px;
          &:hover {
            left: 0;
          }
        }
        .sidenav-content {
          margin-left: 60px;
        }
      }
      .sidenav-drawer>ul li>a>i {
        float: right;
        right: 10px;
      }

    }

    &.right{
      &.fixed {
        .sidenav-drawer-container{
          transition: right 0.3s;
          right: 0;        
        }
        .sidenav-content {
          margin-right: 240px;
        }
      }
      
      
      &.hover{
        .sidenav-drawer-container{
          transition: right 0.3s;
          right: -180px;
          &:hover {
            right: 0;
          }
        }
        .sidenav-content {
          margin-right: 60px;
        }

      } 

      .sidenav-drawer>ul li>a{
        >i {
          float: left;
          left: 10px;
        }
        >span {
          margin-left:40px;
        }
      }
    }

    .sidenav-drawer-container{
      z-index: 99999;
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      width:240px;
      box-sizing: border-box;
      box-shadow: 3px 0 6px rgba(0, 0, 0, 0.3);
      background-color: rgba(255, 0, 0, 1);
      
			.sidenav-drawer{
				.sidenav-background{
					position: absolute;
					z-index: 1;
					height: 100%;
					width: 100%;
					display: block;
					top: 0;
					left: 0;
					background-size: cover;
					background-position: center center;
	
					&:after {
						position: absolute;
						z-index: 3;
						width: 100%;
						height: 100%;
						content: "";
						display: block;
						background: #fff;
						opacity: .93;
						background-color: rgba(255, 0, 0, 1);
						opacity: .6;
					}
				}
				>ul{
					position: relative;
					z-index: 4;
					padding: 0;
					padding-bottom: 120px;
					list-style-type: none;
					margin: 10px 0 0 0;
					width: 258px;
					box-sizing: border-box;

					sidenav-drawer-item>li {
						padding: 4px 30px 4px 10px;
						width: 100%;
						box-sizing: border-box;
						> a {
							border-radius: 6px;
							color: #ffffff;
							display: block;
							padding: 10px 10px 10px 10px;
							position: relative;
							box-sizing: border-box;
							transition: all 0.3s;
							text-decoration: none;
							overflow: hidden;
							z-index: 0;
							&:hover {
								background-color: rgba(255, 255, 255, 0.3);
							}
							i {
								width: 20px;
								height: 20px;
								font-size: 20px;
								position: absolute;
								top: 50%;
								margin-top: -10px;
							}
							span {
								display: inline-block;
								max-width: 145px;
							}
						}
						&.active-item > a {
							// background-color: rgba(255, 255, 255, 0.5);
							background-color: #f90;
							color: #ffffff;
						}
					}
				} 
			}
    }

    .sidenav-content{    
      position: relative;
      z-index: 1;
      display: block;
      height: 100%;
      overflow: auto;
		}
  }
}