Я пытаюсь создать адаптивную панель администратора
<nav class="navbar navbar-expand-lg navbar-light bg-light static-top">
<a [routerLink]="['/']"><img src="../../../assets/img/monash-logo-mono@2x.png" class="logo" /></a>
<button class="navbar-toggler" type="button" (click)="toggle()" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-light bg-light collapse navbar-collapse" [ngClass]="{'show': !isCollapsed}" id="navbarNav">
<div class="d-flex justify-content-between">
<div>
<form class="navbar-form navbar-right" role="search" method="get" id="searchform" action="">
<div class="form-group">
<input name="s" id="s" type="text" class="search-query form-control" autocomplete="off"
placeholder="Search...">
</div>
</form>
</div>
</div>
</div>
</nav>
<main class="content">
<div class="row" style="height: 100%;">
<div class="col-3" style="background: blue;">
<nav class="container">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab"
aria-controls="v-pills-home" aria-selected="true">Home</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab"
aria-controls="v-pills-profile" aria-selected="false">Profile</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab"
aria-controls="v-pills-messages" aria-selected="false">Messages</a>
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab"
aria-controls="v-pills-settings" aria-selected="false">Settings</a>
</div>
</nav>
</div>
<div class="col-9">
<router-outlet></router-outlet>
</div>
</div>
</main>
<!-- TODO: footer -->
Пытаюсь создать что-то подобное 
При переключении на маленький экран ящик должен перекрываться значком, чтобы щелкнуть
