Sidebar modal

Show sidebar on dark background.

This component requires bootstrap.js or just modal.js.
LeftRight
<!-- Source -->
<div class="flex-between"><a class="btn btn-primary" href="#" data-toggle="modal" data-target="#sidebar-modal-example">Left</a><a class="btn btn-primary" href="#" data-toggle="modal" data-target="#sidebar-modal-right-example">Right</a></div>
<div class="sidebar-modal fade" id="sidebar-modal-example">
  <div class="sidebar-dialog modal-dialog">
    <div class="sidebar sidebar-dark bg-dark sidebar-expand"><a class="sidebar-brand" href="#">Brand</a>
      <ul class="sidebar-nav">
        <li class="nav-item"><a class="nav-link" href="#">Nav item 1</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Nav item 2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Nav item 3</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Nav item 4</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Nav item 5</a></li>
      </ul>
    </div>
  </div>
</div>
<div class="sidebar-modal sidebar-modal-right fade" id="sidebar-modal-right-example">
  <div class="sidebar-dialog modal-dialog">
    <div class="sidebar sidebar-dark bg-dark sidebar-expand">
      <a class="sidebar-brand" href="#">Brand</a>
      <ul class="sidebar-nav">
        <li class="nav-item"><a class="nav-link" href="#">Nav item 1</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Nav item 2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Nav item 3</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Nav item 4</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Nav item 5</a></li>
      </ul>
    </div>
  </div>
</div>