.sidebar,.sidebar-wave{position:fixed;top:0;bottom:0;

  }

.sidebar img {
    width: 100px;
    height: 100px;
    display: block;
    margin: 60px auto;
    border-radius: 50%;
}


.sidebar-wave{
    transform: rotate(180deg);
}

  body{
      padding-top:5rem;
      overflow-x:hidden;
      height:100%
}
  .sidebar{
      left: -200px;
      height:100%;
      width:200px;
      transform:translateX(0);
      transition:transform .3s ;
      z-index: 999;
    }
    .sidebar a{
          text-align:center;
          display:block;
          height:66px;
          border-top:1px solid rgba(255,255,255,.05);
          
          line-height:66px;color:rgba(255,255,255,1);
          transform:translateX(-200px);
          transition:color .3s
    }
    .sidebar a:focus,.sidebar a:hover{
        text-decoration:none;
        background-color:rgba(255,255,255,.05);
        color:#FFF
    }
    .sidebar-wave{
        left:0;
        right:0;
        width:100%;
        height:100%;
        fill: rgba(0, 0, 0, 0.8);;
        z-index:-1
    }
    .has-sidebar .sidebar{
      transform: translatex(200px);

    }