Несколько вкладок в ионном 3 root не работает

Question

Я хочу разместить 2 панели вкладок в моем ионном приложении, одну слева и другую справа.

С помощью CSS я разместил его там, где я хочу, правые вкладки работают нормально.но когда я нажимаю на левые, они не работают.

Мой HTML:

    ion-tabs class="tabs-left">
    <ion-tab [root]="tab1" tabIcon="add" tabTitle="Add">
    </ion-tab>
    <ion-tab [root]="tab2" tabIcon="person" tabTitle="Profile">
    </ion-tab>
    <ion-tab [root]="tab3" tabIcon="list" tabTitle="List">
    </ion-tab>
    <ion-tab [root]="tab4" tabIcon="heart" tabTitle="Favourite">
    </ion-tab>
    </ion-tabs>

    <ion-tabs class="tabs-right">
    <ion-tab [root]="tab5" tabIcon="albums" tabTitle="Albums">
    </ion-tab>
    <ion-tab [root]="tab6" tabIcon="people" tabTitle="Friends">
    </ion-tab>
    </ion-tabs>

Мой CSS:

 .tabs-left{
    .tabbar {
        top: 0;
        width: auto;
        flex-direction: column;
        position: fixed;
        visibility: visible;
        opacity: 1;
        z-index: 111;
        width: 6vw;
    }
    .tab-button {
        color: white !important;
    }
    .tab-button[aria-selected=true] {
        color: #0016dd !important;
    }
}
.tabs-right {
    .tabbar {
        top: 0;
        width: 6vw;
        flex-direction: column;
        margin-left: 94vw;
    }
    .tab-button {
        color: white !important;
    }
    .tab-button[aria-selected=true] {
        color: #0016dd !important;
    }
}
ion-tab {
    contain: none !important;
}
ion-content {
    left: 6vw;
    right: 6vw;
}

Как мне сделать две вкладкифункционал