First try appcommon as library

projects/common/src/lib/components/side-panel/side-panel.component.html

@@ -0,0 +1,10 @@
+<div class="side-panel hidden collapsed" [ngClass]="{'hidden':!visible,'collapsed':collapsed}">
+  <div *ngIf="collapsable" class="arrow rounded-right p-2" (click)="handleToggleClick($event)">
+    <i class="fa fa-chevron-left" aria-hidden="true"></i>
+  </div>
+  <div class="content">
+    <ng-content>
+
+    </ng-content>
+  </div>
+</div>

projects/common/src/lib/components/side-panel/side-panel.component.scss

@@ -0,0 +1,42 @@
+.side-panel {
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  width: 22rem;
+  left: 0px;
+  transition: left 0.3s;
+  background-color: white;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+}
+
+.side-panel.collapsed {
+  left:-22rem;
+}
+
+.arrow {
+  position: absolute;
+  top: 1rem;
+  left: 100%;  
+  background-color: inherit;
+  cursor:pointer;
+}
+
+.arrow i {
+  transition: transform 0.3s;
+}
+
+.collapsed .arrow i {
+  -webkit-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+
+.side-panel.hidden {
+  left: -24rem;
+}
+
+.content {
+  height:100%;
+  width:100%;
+  overflow:hidden;
+  overflow-y:auto;
+}

projects/common/src/lib/components/side-panel/side-panel.component.ts

@@ -0,0 +1,24 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'side-panel',
+  templateUrl: 'side-panel.component.html',
+  styleUrls: ['side-panel.component.scss']
+})
+
+
+export class SidePanelComponent  {
+  @Input() public visible: boolean;
+  @Input() public collapsed: boolean;
+  @Input() public collapsable: boolean;
+
+  constructor() {
+    this.collapsable = false;
+  }
+
+  handleToggleClick(event) {
+    if (this.collapsable) {
+      this.collapsed = !this.collapsed;
+    }
+  }
+}