sidenav

Dependencias

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

Exemplo de uso

    <div sidenav>
      <img style="filter:invert(100%)" src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png" class="sidenav-image" alt="">
      <div sidenav-item><i class="material-icons">directions_bike</i><span class="text">Usuário</span></div>
      <div jump-bottom>
        <div sidenav-item><i class="material-icons">account_circle</i><span class="text">Pessoa</span></div>
      </div>
    </div>

    <div side-container>
      <h1>Usuários</h1>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum cum quos repellendus eos saepe sed tempore incidunt est similique officia ut voluptatem, dolores hic ex aspernatur inventore qui fugit illo!
    </div>