how can make Burger Menu with Angular?

How can make Burger Menu with Angular ? I do not understand how to do in Typescript I am quite a beginner.

when i switch my screen to smartphone mode should i hide the nav menu ?

homepage.component.html

<div class="wrapper">
<div class="sidebar-wrapper">
<div class="title-content">
<h1 class="title-wrapper">Furniture</h1>
<button (click)="burgerMenuClick">&#9776;</button>
</div>
<nav class="sidebar-wrapper-nav">
<ul>
<li class="list-wrapper">
Home
</li>
<li class="list-wrapper">
Shop
</li>
<li class="list-wrapper">
Product
</li>
<li class="list-wrapper">
Cart
</li>
</ul>
</nav>
</div>
<div class="main-content-wrapper">
<img src="https://colorlib.com/preview/theme/amado/img/product-img/pro-big-1.jpg">
<img src="https://colorlib.com/preview/theme/amado/img/product-img/pro-big-1.jpg">
<img src="https://colorlib.com/preview/theme/amado/img/product-img/pro-big-1.jpg">
</div>
</div>


homepage.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-homepage',
templateUrl: './homepage.component.html',
styleUrls: ['./homepage.component.css']
})
export class HomepageComponent implements OnInit {

constructor() { }

ngOnInit() {
this.burgerMenuClick();
}

burgerMenuClick() {

}

}

Continue reading...