Layout changes finally work from backend commands

src/app/config.ts

@@ -1,11 +1,13 @@
 export const config = {
   dashboard: {
     route: 'dashboard',
-    currentLayout: 'terminal-ide-web',
+    currentLayout: 'ide-only',
     enabledLayouts:  new Set([
       'terminal-ide-web',
       'terminal-web',
-      'web-only'
+      'terminal-only',
+      'web-only',
+      'ide-only'
       ]),
     allLayouts:  new Set([
       'terminal-ide-web',

src/app/dashboard/dashboard.component.html

@@ -17,7 +17,7 @@
         <app-terminal></app-terminal>
     </div>
     <div class="tfw-sidebar">
-      <app-sidebar></app-sidebar>
+      <app-sidebar [layout]="layout"></app-sidebar>
     </div>
 
     <div class="tfw-terminal-footer"></div>

src/app/dashboard/dashboard.component.ts

@@ -33,7 +33,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
   }
 
   layoutHandler(data: LayoutCommand) {
-    if (data.layout in (this.enabledLayouts)) {
+    if (this.enabledLayouts.has(data.layout)) {
       this.layout = data.layout;
     }
     else {

src/app/sidebar/sidebar.component.html

@@ -1,4 +1,4 @@
 <div class="tfw-ide-pin" *ngFor="let layoutIter of enabledLayouts">
-  <div *ngIf="layout === layoutIter"><img src="images/{{layoutIter}}_active.svg"></div>
+  <div *ngIf="layout === layoutIter"><img class="active" src="images/{{layoutIter}}_active.svg"></div>
   <div *ngIf="layout !== layoutIter"><img src="images/{{layoutIter}}.svg"></div>
 </div>

src/app/sidebar/sidebar.component.scss

@@ -8,7 +8,9 @@ img {
 }
 
 .tfw-ide-pin {
-
   cursor: pointer;
 
+  & .active {
+    box-shadow: 0 4px 8px 0 rgba($tao-blue-500, 0.1), 0 4px 10px 0 rgba($tao-blue-500, 0.09);
+  }
 }

src/app/sidebar/sidebar.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { config } from '../config';
 
 @Component({
@@ -8,9 +8,10 @@ import { config } from '../config';
 })
 
 export class SidebarComponent implements OnInit {
-  layout: string = config.dashboard.currentLayout;
+  @Input() layout: string;
   enabledLayouts: Set<string> = config.dashboard.enabledLayouts;
   constructor() {}
   ngOnInit() {
   }
+
 }

src/assets/scss/mixins/_layout.scss

@@ -105,7 +105,10 @@ $layouts: (
   @each $k, $v in $map {
     #{$sel}#{$k} {
       @if (length($v) == 0) {
-        display: none
+        // We need to make sure the DOM element is displayed but not visible
+        visibility: hidden;
+        position: absolute;
+        z-index: -10000000;
       }
       @else {
         grid-column-start: nth($v, 1);