Setup Side nav side tabs

file.css

/* START setup tabs in side nav*/

.nav-tabs  li.active > a,
.nav-tabs  li.active > a:hover,
.nav-tabs  li.active > a:focus {
  color: #555555;
  cursor: default;
  background-color: #ffffff;
  border: 1px solid #ffffff;
  border-bottom-color: transparent;
}

.nav-tabs .nav-item {
  margin-right: -2px;
}

.nav-tabs .nav-link {
  /*border: 1px solid white;*/
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  border-color: white white white;
}

/* END setup tabs in side nav*/

file.html

<div style="width: 200px; float: left;">
  <nav class="nav nav-tabs navbar-expand-sm">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="nav-content">
      <ul class="nav flex-column">
        <li class="nav-item">
          <a class="nav-link" [routerLink]="['/consultant']" [routerLinkActive]="['active']">Consultant</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" [routerLink]="['/farmer']" [routerLinkActive]="['active']">Farmer</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" [routerLink]="['#']" [routerLinkActive]="['active']">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>
  </nav>

</div>