如何添加垂直面板並將其用作Angular中的切換器？

Question

點擊“btn1”按鈕時，我顯示了這個sideBar 。 因此，我沒有按鈕，而是想要一個具有相同標題的垂直條 。 基本上我想完成這個：

預期結果

下面是我的代碼到目前為止的樣子。 誰能指出我正確的方向？ 非常感謝提前。

DEMO

<button (click)="openTab()">btn1</button>
<p-sidebar [modal]="false" class="menuPanel" [(visible)]="opened" 
   position="left" [showCloseIcon]="true" autoZIndex="true" 
   baseZIndex="99999">
   This is the Title
</p-sidebar>

Answer 1

在這里使用你現有的DEMO stackblitz鏈接 - 用下面的3個代碼替換stackblitz中的完整TS，HTML和CSS或者打開這個

使用以下內容替換現有的app.component.html ：

<!-- <button (click)="openTab()">btn1</button> -->
<p-sidebar [modal]="false" class="menuPanel" [(visible)]="opened" position="left" [showCloseIcon]="false" autoZIndex="true" baseZIndex="99999">
  <div id="panelHeader" (click)='menuPanelClose()'> Click here to close menu </div>
  <div id="panelBody"> This is the Title ... <br/> background panel visibility is {{togglePanel}} </div>
</p-sidebar>

<div id='menuToggler' ng-if="togglePanel == true"  (click)="panelClick()">
  This is toggle Panel
</div>

用以下內容替換現有的app.component.css ：

#panelHeader{width: 100%; height:10vh; background: lightpink;}
#panelBody { background:lightcyan; height:90vh;}
#menuToggler{writing-mode: vertical-lr;background: lightgreen;width: 40px;padding: 10px;height: 100%;left: 0;position: absolute;top: 0;font-family: "Open Sans", "Helvetica Neue", sans-serif;font-size: 14px;}

用以下內容替換現有的app.component.ts ：

import { Component } from '@angular/core';
import {SidebarModule} from 'primeng/sidebar';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{
  opened = false;
  togglePanel:boolean = true;


  openTab() {
    this.opened = true;
  }

  panelClick(){
    this.opened = true;
    this.togglePanel = false;
  }

  menuPanelClose(){
    this.opened = false;
    this.togglePanel = true;
  }

}

更新 ：提問者不希望菜單切換器的另一個<p-sidebar>

更新2 ：在提問者的請求上發布新的stackblitz