menu.html

<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top px-5 py-3" style="margin-left: 230px">

  <div style="height: 55px;"></div>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
    aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">

    <div class="navbar-nav mr-auto">
      <div class="btn-group">
        <button type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
          aria-expanded="false">My Dashboard
        </button>
        <div class="dropdown-menu dropdown-menu-left">
          <button class="dropdown-item" type="button">My Dashboard 1</button>
          <button class="dropdown-item" type="button">My Dashboard 2</button>
        </div>
      </div>
    </div>

    <div class="navbar-nav ml-auto">
      <button type="button" class="btn btn-outline-light mr-1">Last Reading: 8:30</button>
      <button type="button" class="btn btn-outline-light mr-1"><i class="fas fa-water"></i> &nbsp;OK</button>
      <button type="button" class="btn btn-outline-light mr-1">100% <i class="fas fa-battery-full fa-rotate-270"></i></button>
      <button type="button" class="btn btn-outline-light"><i class="fas fa-bell"></i></button>
    </div>
  </div>
</nav>

<!-- side bar -->
<div class="bg-dark-secondary fixed-top" style="width: 230px; height: 100vh;">
  <img src="/img/logo.svg" width="55px" class="py-3" style="display: block; margin: auto;">
  <nav class="nav flex-column my-5">
    <h6 class="dropdown-header px-3">My Dashboard</h6>
    <a class="nav-link active" href="#"><i class="fas fa-columns"></i> &nbsp;&nbsp;Dashboard</a>
    <a class="nav-link" href="#"><i class="fas fa-chart-line"></i> &nbsp;&nbsp;Trends</a>
    <a class="nav-link" href="#"><i class="fas fa-cog"></i> &nbsp;&nbsp;Settings</a>
    <h6 class="dropdown-header px-3 pt-4">Tools</h6>
    <a class="nav-link" href="#"><i class="fas fa-recycle"></i> &nbsp;&nbsp;Can it Compost?</a>
    <a class="nav-link" href="#"><i class="fas fa-book"></i> &nbsp;&nbsp;Docs</a>
    <a class="nav-link" href="#"><i class="fas fa-info-circle"></i> &nbsp;&nbsp;About</a>
    <h6 class="dropdown-header px-3 pt-4">User</h6>
    <a class="nav-link" href="#"><i class="fas fa-user"></i> &nbsp;&nbsp;Profile</a>
    <a class="nav-link" href="#"><i class="fas fa-sign-out-alt"></i> &nbsp;&nbsp;Log Out</a>
  </nav>
</div>