javascript - Cum să restrângi un panou?

Am făcut multe cercetări pe această temă și nu pot găsi o soluție bună. Practic, am un panou în aplicația mea (Panou 2) și aș dori să îl pliez spre stânga când se apasă butonul și, dacă butonul este apăsat din nou, atunci să îl extind spre dreapta.

Iată codul meu care funcționează: PLUNKER

  <div fxFlex fxLayout="row" fxLayoutAlign="space-between stretch" style="background-color:green;">
      <div fxFlex [fxShow]="explorerShow"  style="background-color:white;">        
 <div  (click)="toggleDirection()" > <img src="../../../assets/images/button1.png" alt="Button" style = 'float: right'>
 </div>
      Panel 2
 </div>

Răspuns #1

Folosește fxHide și [fxShow]="expand" pe elementul Panoul 2

<div class="container">

  <div class="content" fxLayout="row" fxFlexFill>

      <div class="sec1" fxFlex="20%" fxHide [fxShow]="expand">
          SIDEBAR
      </div>
      <div class="sec2" fxFlex="100%">
          BODY
      </div>
  </div>

  <button (click)="expand = !expand">Toggle Sidebar</button>

</div>

Iată un stackblitz funcțional | plunkr-ul tău

ACTUALIZARE: Iată un stackblitz cu animație