<div class="page-layout plain overflow-hidden pb-8">
  <!-- <div class="header-bg dark-blue background-size-contain" style="background-image: url('assets/images/home-bg-black.png')"></div> -->

  <!-- Left Sidebar -->
  <egret-sidebar name="layout-left-sidebar-card" class="default-bg-mobile h-100vh-70px" [perfectScrollbar]>
    <div class="sidebar-header pt-24 px-16">
      <h5 class="mb-16">Sidebar header</h5>
    </div>
    <div>
      <mat-list>
        <mat-list-item>List item 1</mat-list-item>
        <mat-list-item>List item 2</mat-list-item>
        <mat-list-item>List item 3</mat-list-item>
        <mat-list-item>List item 4</mat-list-item>
        <mat-list-item>List item 4</mat-list-item>
        <mat-list-item>List item 4</mat-list-item>
        <mat-list-item>List item 4</mat-list-item>
        <mat-list-item>List item 4</mat-list-item>
        <mat-list-item>List item 4</mat-list-item>
        <mat-list-item>List item 4</mat-list-item>
        <mat-list-item>List item 4</mat-list-item>
        <mat-list-item>List item 4</mat-list-item>
        <mat-list-item>List item 4</mat-list-item>
        <mat-list-item>List item 4</mat-list-item>
        <mat-list-item>List item 4</mat-list-item>
        <mat-list-item>List item 4</mat-list-item>
        <mat-list-item>List item 4</mat-list-item>
        <mat-list-item>List item 4</mat-list-item>
        <mat-list-item>List item 4</mat-list-item>
        <mat-list-item>List item 4</mat-list-item>
        <mat-list-item>List item 4</mat-list-item>
        <mat-list-item>List item 4</mat-list-item>
        <mat-list-item>List item 4</mat-list-item>
        <mat-list-item>List item 4</mat-list-item>
        <mat-list-item>List item 4</mat-list-item>
        <mat-list-item>List item 4</mat-list-item>
        <mat-list-item>List item 4</mat-list-item>
        <mat-list-item>List item 4</mat-list-item>
        <mat-list-item>List item 4</mat-list-item>
        <mat-list-item>List item 4</mat-list-item>
        <mat-list-item>List item 4</mat-list-item>
      </mat-list>
    </div>
  </egret-sidebar>

  <!-- body content -->
  <div class="content">
    <!-- Body content header -->
    <div class="content-header blue text-white p-24">
      <h4 class="text-white">Left sidebar card</h4>
    </div>

    <!-- content card -->
    <div class="content-body">
      <div class="content-card default-bg">
        <!-- card header -->
        <div class="card-header px-24 py-8 border-bottom">
          <button
            fxHide
            fxShow.lt-md
            mat-icon-button
            egretSidebarToggler="layout-left-sidebar-card"
            class="mr-8"
          >
            <mat-icon>menu</mat-icon>
          </button>

          Card toolbar
        </div>
        <!-- Card body -->
        <div class="card-body p-24 h-100vh-280px" [perfectScrollbar]>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima
          sapiente earum aspernatur quia officia eaque beatae rem molestiae fuga
          tempora, architecto doloremque facilis, illum, soluta ducimus dolorum
          tempore nemo inventore! Lorem ipsum dolor, sit amet consectetur
          adipisicing elit. Minima sapiente earum aspernatur quia officia eaque
          beatae rem molestiae fuga tempora, architecto doloremque facilis,
          illum, soluta ducimus dolorum tempore nemo inventore! Lorem ipsum
          dolor, sit amet consectetur adipisicing elit. Minima sapiente earum
          aspernatur quia officia eaque beatae rem molestiae fuga tempora,
          architecto doloremque facilis, illum, soluta ducimus dolorum tempore
          nemo inventore! Lorem ipsum dolor, sit amet consectetur adipisicing
          elit. Minima sapiente earum aspernatur quia officia eaque beatae rem
          molestiae fuga tempora, architecto doloremque facilis, illum, soluta
          ducimus dolorum tempore nemo inventore! Lorem ipsum dolor, sit amet
          consectetur adipisicing elit. Minima sapiente earum aspernatur quia
          officia eaque beatae rem molestiae fuga tempora, architecto doloremque
          facilis, illum, soluta ducimus dolorum tempore nemo inventore!
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam
            commodi omnis consequuntur sint quos deleniti, accusantium iusto
            earum quia pariatur, quasi ea expedita fuga libero! Porro nisi dicta
            nemo laudantium.
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam
            commodi omnis consequuntur sint quos deleniti, accusantium iusto
            earum quia pariatur, quasi ea expedita fuga libero! Porro nisi dicta
            nemo laudantium.
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam
            commodi omnis consequuntur sint quos deleniti, accusantium iusto
            earum quia pariatur, quasi ea expedita fuga libero! Porro nisi dicta
            nemo laudantium.
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam
            commodi omnis consequuntur sint quos deleniti, accusantium iusto
            earum quia pariatur, quasi ea expedita fuga libero! Porro nisi dicta
            nemo laudantium.
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam
            commodi omnis consequuntur sint quos deleniti, accusantium iusto
            earum quia pariatur, quasi ea expedita fuga libero! Porro nisi dicta
            nemo laudantium.
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam
            commodi omnis consequuntur sint quos deleniti, accusantium iusto
            earum quia pariatur, quasi ea expedita fuga libero! Porro nisi dicta
            nemo laudantium.
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam
            commodi omnis consequuntur sint quos deleniti, accusantium iusto
            earum quia pariatur, quasi ea expedita fuga libero! Porro nisi dicta
            nemo laudantium.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
