fuse-angular/src/app/main/apps/mail/mail.component.html

<div class="page-layout carded left-sidenav">

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

    <md-sidenav-container>

        <!-- SIDENAV -->
        <md-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
                    fuseMdSidenavHelper="carded-left-sidenav" md-is-locked-open="gt-md">
            <fuse-mail-main-sidenav></fuse-mail-main-sidenav>
        </md-sidenav>
        <!-- / SIDENAV -->

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

            <!-- CONTENT HEADER -->
            <div class="header" fxLayout="row" fxLayoutAlign="start center">

                <div class="search-wrapper" fxFlex fxLayout="row" fxLayoutAlign="start center">

                    <button md-button class="mat-icon-button sidenav-toggle"
                            fuseMdSidenavToggler="carded-left-sidenav"
                            fxHide.gt-md aria-label="Toggle Sidenav">
                        <md-icon>menu</md-icon>
                    </button>

                    <div class="search" flex fxLayout="row" fxLayoutAlign="start center">
                        <md-icon>search</md-icon>
                        <input fxFlex type="text" placeholder="Search for an e-mail or contact">
                    </div>
                </div>

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

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

                <!-- CONTENT TOOLBAR -->
                <div class="toolbar">

                    <span>Content toolbar</span>
                </div>
                <!-- / CONTENT TOOLBAR -->

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

                    <div fxLayout="row" fxFill>

                        <fuse-mail-list fxFlex [selectedMail]="selectedMail" (onMailSelect)="onMailSelect($event)"></fuse-mail-list>

                        <fuse-mail-details fxFlex [selectedMail]="selectedMail"></fuse-mail-details>

                    </div>

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

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

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

    </md-sidenav-container>

</div>