How to work with interchangeable menu?

I'm trying to implement an interchangeable menu, see below:

Whenyouclickonthethreechopsticksitopensaverticalmenuontherightsideofthescreen:

Whenheclicksonthethreechopstickshegoesbacktohiding,butthereisone.Whenitisinamobileformat,seehowtheapplicationbehaves.

WhenyouclickonthethreechopsticksitdisappearstheMenuiconmakingtheapplicationunusual,asyoucanseebelow:

1stsolutionwouldbetotrytoleavethemenuundertheiconofthethreechopsticks,butIalreadydideverythinganddidnotwork.2ndsolutionwouldbetocreateabuttoneventthatwhenclickingawaygobacktotheiconofthethreechopsticks,orcreateabuttononthemenuitselftoreturntotheiconofthethreechopsticks.

Thisisthepage:

<divclass="navbar">
  <div class="container" >
      <a class="navbar-toggle" (click)="display = true" ><i class="fa fa-bars"></i></a>

        <p-sidebar [(visible)]="display" position="right">
          <p-panelMenu [model]="items" [style]="{'width':'300px'}" blockScroll="true" styleClass="ui-sidebar-md"></p-panelMenu>
        </p-sidebar>
  </div>
</div>

I made this attempt, but it did not work:

<div class="ui-g">
  <div class="ui-g-12">
    <div class="navbar">
      <div class="container" >
          <a class="navbar-toggle" (click)="display = true" ><i class="fa fa-bars"></i></a>

      </div>
    </div>
  </div>
</div>

<div class="ui-g">
  <div class="ui-g-12">
    <p-sidebar [(visible)]="display" position="right">
      <p-panelMenu [model]="items" [style]="{'width':'300px'}" blockScroll="true" styleClass="ui-sidebar-md"></p-panelMenu>
    </p-sidebar>
  </div>
  </div>