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">
        <div class="header-container">
                <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 mat-icon-button class="example-icon screen_share-icon set-white-color">
                <button mat-icon-button class="example-icon delete_outline_icon set-white-color">
    <section class="content-container">

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

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

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;

    background: #272727;

    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;

    background-color: #272727;

    display: flex;
    justify-content: space-between;
    padding: 15px;

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

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

    padding-top: 25px;
    padding-bottom: 25px !important;
    color: #272727;

    margin-bottom: 3px;
    margin-top: 3px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #dfdfdf;
    text-align: center;

    padding: 16px;
    border-radius: 7px;
    font-size: 26px;

    background-color: #000;

    color: #40ffe1;

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


Step7: see Output.

Submit a Comment

Your email address will not be published. Required fields are marked *


Select Categories