css - 如何添加垂直面板并将其用作 Angular 中的切换器？

Question

我有这个 sideBar，它会在点击 "btn1" 按钮时显示。因此，我不想使用按钮，而是使用具有相同标题的垂直条。基本上我想完成这个:

Expected Result

下面 是我的代码到目前为止的样子。谁能指出我正确的方向？非常感谢。

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此处链接 - 将 stackblitz 中的完整 TS、HTML 和 CSS 替换为以下 3 个代码或 Open this

将您现有的 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应提问者的要求