fuse-angular/src/app/main/content/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.html

<div class="page-layout carded left-sidenav tabbed single-scroll" fusePerfectScrollbar>

    <!-- TOP BACKGROUND -->
    <div class="top-bg mat-accent-bg"></div>
    <!-- / TOP BACKGROUND -->

    <mat-sidenav-container>

        <!-- SIDENAV -->
        <mat-sidenav class="sidenav" align="start" opened="true" mode="side"
                     fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">

            <!-- SIDENAV HEADER -->
            <div class="header p-24" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
                <h2>Sidenav header</h2>
            </div>
            <!-- / SIDENAV HEADER -->

            <!-- SIDENAV CONTENT -->
            <div class="content p-24" fusePerfectScrollbar>

                <fuse-demo-sidenav></fuse-demo-sidenav>

            </div>
            <!-- / SIDENAV CONTENT -->

        </mat-sidenav>
        <!-- / SIDENAV -->

        <!-- CENTER -->
        <div class="center">

            <!-- CONTENT HEADER -->
            <div class="header white-fg p-24">

                <div fxLayout="row" fxLayoutAlign="start center">

                    <button mat-button class="mat-icon-button sidenav-toggle mr-8"
                            fuseMatSidenavToggler="carded-left-sidenav" fxHide.gt-md>
                        <mat-icon>menu</mat-icon>
                    </button>

                    <h2>Left sidenav with tabs and page scroll</h2>

                </div>

            </div>
            <!-- / CONTENT HEADER -->

            <!-- CONTENT CARD -->
            <div class="content-card mat-white-bg">

                <!-- CONTENT -->
                <div class="content">

                    <mat-tab-group>

                        <mat-tab label="Tab 1">
                            <div class="tab-content p-24" fusePerfectScrollbar>
                                <!-- PUT YOUR TAB CONTENT HERE -->
                                <fuse-demo-content></fuse-demo-content>
                                <!-- / PUT YOUR TAB CONTENT HERE -->
                            </div>
                        </mat-tab>

                        <mat-tab label="Tab 2">
                            <div class="tab-content p-24" fusePerfectScrollbar>
                                <!-- PUT YOUR TAB CONTENT HERE -->
                                <fuse-demo-content></fuse-demo-content>
                                <!-- / PUT YOUR TAB CONTENT HERE -->
                            </div>
                        </mat-tab>

                        <mat-tab label="Tab 3">
                            <div class="tab-content p-24" fusePerfectScrollbar>
                                <!-- PUT YOUR TAB CONTENT HERE -->
                                <fuse-demo-content></fuse-demo-content>
                                <!-- / PUT YOUR TAB CONTENT HERE -->
                            </div>
                        </mat-tab>

                        <mat-tab label="Tab 4">
                            <div class="tab-content p-24" fusePerfectScrollbar>
                                <!-- PUT YOUR TAB CONTENT HERE -->
                                <fuse-demo-content></fuse-demo-content>
                                <!-- / PUT YOUR TAB CONTENT HERE -->
                            </div>
                        </mat-tab>

                        <mat-tab label="Tab 5">
                            <div class="tab-content p-24" fusePerfectScrollbar>
                                <!-- PUT YOUR TAB CONTENT HERE -->
                                <fuse-demo-content></fuse-demo-content>
                                <!-- / PUT YOUR TAB CONTENT HERE -->
                            </div>
                        </mat-tab>

                        <mat-tab label="Tab 6">
                            <div class="tab-content p-24" fusePerfectScrollbar>
                                <!-- PUT YOUR TAB CONTENT HERE -->
                                <fuse-demo-content></fuse-demo-content>
                                <!-- / PUT YOUR TAB CONTENT HERE -->
                            </div>
                        </mat-tab>

                        <mat-tab label="Tab 7">
                            <div class="tab-content p-24" fusePerfectScrollbar>
                                <!-- PUT YOUR TAB CONTENT HERE -->
                                <fuse-demo-content></fuse-demo-content>
                                <!-- / PUT YOUR TAB CONTENT HERE -->
                            </div>
                        </mat-tab>

                        <mat-tab label="Tab 8">
                            <div class="tab-content p-24" fusePerfectScrollbar>
                                <!-- PUT YOUR TAB CONTENT HERE -->
                                <fuse-demo-content></fuse-demo-content>
                                <!-- / PUT YOUR TAB CONTENT HERE -->
                            </div>
                        </mat-tab>

                        <mat-tab label="Tab 9">
                            <div class="tab-content p-24" fusePerfectScrollbar>
                                <!-- PUT YOUR TAB CONTENT HERE -->
                                <fuse-demo-content></fuse-demo-content>
                                <!-- / PUT YOUR TAB CONTENT HERE -->
                            </div>
                        </mat-tab>

                        <mat-tab label="Tab 10">
                            <div class="tab-content p-24" fusePerfectScrollbar>
                                <!-- PUT YOUR TAB CONTENT HERE -->
                                <fuse-demo-content></fuse-demo-content>
                                <!-- / PUT YOUR TAB CONTENT HERE -->
                            </div>
                        </mat-tab>

                    </mat-tab-group>

                </div>
                <!-- / CONTENT -->

            </div>
            <!-- / CONTENT CARD -->

        </div>
        <!-- / CENTER -->

    </mat-sidenav-container>

</div>