SideNav on the left and right in one page

Hello, I've been trying to use the sidenav on left and right side of the page, but  the right sidenav is displaying on the left sidenav (it is hiding the left sidenav ). app.component.html <div class="container-fluid"> <!-- <div class="row" style="min-height:60px"> <nav-bar></nav-bar> </div> --> <divclass="row"id="body-display"> <!-- <app-side-nav></app-side-nav> --> <app-side-nav-bar></app-side-nav-bar> <divclass="col-md-8 col-3"style="margin-top: 100px;"> <new-base-template></new-base-template> </div> <divclass="col col-lg-2"id="sidebar"> <app-recent-activities></app-recent-activities> </div> </div> </div> In the above code the <app-side-nav-bar></app-side-nav-bar> is the left sidenav and <app-recent-activities></app-recent-activities> is the right sidenav the above components have this code: <mdb-sidenav #sidenav class="fixed" [fixed]="true"> <logo> <!-- Logo --> <li> <divclass="logo-wrapper waves-light"> <ahref="#"><imgsrc="http://mdbootstrap.com/img/logo/mdb-transparent.png"class="img-fluid flex-center"></a> </div> </li> <!--/. Logo --> </logo> <links> <!--Social--> <li> <ulclass="social"> <li><aclass="icons-sm fb-ic"><iclass="fa fa-facebook"></i></a></li> <li><aclass="icons-sm pin-ic"><iclass="fa fa-pinterest"></i></a></li> <li><aclass="icons-sm gplus-ic"><iclass="fa fa-google-plus"></i></a></li> <li><aclass="icons-sm tw-ic"><iclass="fa fa-twitter"></i></a></li> </ul> </li> <!--/Social--> <!--Search Form--> <li> <formclass="search-form"role="search"> <divclass="form-group md-form mt-0 pt-1 waves-light"mdbWavesEffect> <inputtype="text"class="form-control"placeholder="Search"> </div> </form> </li> <!--/.Search Form--> <!-- Side navigation links --> <li> <ulclass="collapsible collapsible-accordion"> <mdb-squeezebox [multiple]="false"aria-multiselectable="false"> <!-- Collapsible link --> <mdb-item> <mdb-item-headmdbWavesEffect><iclass="fa fa-chevron-right"></i> Collapsible menu</mdb-item-head> <mdb-item-body> <ul> <li><ahref="#"class="waves-effect"mdbWavesEffect>Link 1</a></li> <li><ahref="#"class="waves-effect"mdbWavesEffect>Link 2</a></li> </ul> </mdb-item-body> </mdb-item> <!-- Simple link --> <mdb-itemclass="no-collase"> <mdb-item-headmdbWavesEffect><iclass="fa fa-hand-pointer-o"></i> Simple link</mdb-item-head> <mdb-item-body></mdb-item-body> </mdb-item> <!-- Collapsible link --> <mdb-item> <mdb-item-headmdbWavesEffect><iclass="fa fa-eye"></i> Collapsible menu 2</mdb-item-head> <mdb-item-body> <ul> <li><ahref="#"class="waves-effect"mdbWavesEffect>Link 1</a></li> <li><ahref="#"class="waves-effect"mdbWavesEffect>Link 2</a></li> </ul> </mdb-item-body> </mdb-item> <!-- Simple link --> <mdb-itemclass="no-collase"> <mdb-item-headmdbWavesEffect><iclass="fa fa-diamond"></i> Simple link 2</mdb-item-head> <mdb-item-body></mdb-item-body> </mdb-item> </mdb-squeezebox> </ul> </li> <!--/. Side navigation links --> </links> <divclass="sidenav-bg mask-strong"></div> </mdb-sidenav> is there anyway i can position the right sidenav i.e <app-recent-activities></app-recent-activities> on the right side of the page? Thank you

---