Manage Responsive Sidebar With Header In Angular

Step1: Create New Angular Project.

ng new demo

Step2: Create below components.

ng g c sidebar
ng g c header

Step3: Write below code in your header.component.html

<section class="app-container">
    <header>
        <div class="header-container">
            <div>
                <button mat-icon-button class="example-icon set-white-color add-new-case-btn">
                    <mat-icon class="set-New-case-color">add</mat-icon>
                    New Case
                </button>
            </div>
            <div>
                <button mat-icon-button class="example-icon screen_share-icon set-white-color">
                    <mat-icon>screen_share</mat-icon>
                </button>
                <button mat-icon-button class="example-icon delete_outline_icon set-white-color">
                    <mat-icon>delete_outline</mat-icon>
                </button>
            </div>
        </div>
    </header>
    <section class="content-container">
    </section>
</section>

Step4: Write below code in your sidebar.component.html

<mat-drawer-container class="example-container">
    <mat-drawer mode="side" opened>
        <div class="header-logo">
            Logo
        </div>
        <div class="icon-div-container">
            <mat-icon class="set-sidebar-icon active">search</mat-icon>
        </div>
        <div class="icon-div-container">
            <mat-icon class="set-sidebar-icon">people</mat-icon>
        </div>
        <div class="icon-div-container">
            <mat-icon class="set-sidebar-icon">supervised_user_circle</mat-icon>
        </div>
    </mat-drawer>
    <mat-drawer-content>
        <app-header></app-header>
    </mat-drawer-content>
</mat-drawer-container>

Step5: Add below CSS in your sidebar.component.css

.app-container .content-container {
    height: calc( 100% - 50px);
    overflow: auto;
    padding: 10px;
    word-break: break-all;
  }

  .header-background{
    background: #272727;
  }

  .set-white-color{
    color: white;
  }

  ::ng-deep button.add-new-case-btn span.mat-button-wrapper{
    padding: 6px;
    border: 1px solid #9e9e9e;
    border-radius: 4px;
    color: #dfdfdf;
  }

  .example-spacer {
    flex: 1 1 auto;
  }

  header{
    background-color: #272727;
  }

  .header-container{
    display: flex;
    justify-content: space-between;
    padding: 15px;
  }

  .example-container {
    width: 100%;
    height: 100%;
  }

  ::ng-deep .mat-drawer{
    background-color: #272727;
  }

  .header-logo{
    padding-top: 25px;
    padding-bottom: 25px !important;
    color: #272727;
  }

  .icon-div-container{
    margin-bottom: 3px;
    margin-top: 3px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #dfdfdf;
    text-align: center;
  }

  .set-sidebar-icon{
    padding: 16px;
    border-radius: 7px;
    font-size: 26px;
  }

  .active{
    background-color: #000;
  }

  .set-New-case-color{
    color: #40ffe1;
  }
  

Step6: Add your sidebar component to app.component.html

<app-sidebar></app-sidebar>

Step7: see Output.