How to work with Angular Primeng Slidebar?

Question

Look at the two components:

Sidebar

Menu - Panelmenu

First I’ll show you how the application is behaving, then I’ll show you what I’m trying to implement.

The system is behaving like this;

The button to click and the menu appears.

By clicking on the menu the button disappears and the menu appears.

What I need to do is that when I click on the button the menu appears, but keep showing the button and when I click on the button again the menu disappears, but continuing to show the button

But I don’t know how to do this because I’m new as an Angular programmer and need help.

Here is my code:

<div class="container">

<p-sidebar [(visible)]="display" >
    <p-panelMenu [model]="items" [style]="{'width':'300px'}"></p-panelMenu>
</p-sidebar>

<button type="text" (click)="display = true" pButton icon="fa-external-link-square" label="Show"></button>

</div>

For those who want to have access to my project this is my repository;

REPOSITORY