All the enabled layouts are now enlisted on the sidebar in accordance with config.ts

src/app/config.ts

@@ -1,14 +1,22 @@
 export const config = {
   dashboard: {
     route: 'dashboard',
-    defaultLayout: 'terminal-ide-vertical',
-    enabledLayouts: [
+    currentLayout: 'terminal-ide-web',
+    enabledLayouts:  new Set([
+      'terminal-ide-web',
+      'terminal-web',
+      'web-only'
+      ]),
+    allLayouts:  new Set([
+      'terminal-ide-web',
       'terminal-ide-vertical',
       'terminal-ide-horizontal',
       'terminal-only',
-      'ide-only'
-    ]
-
+      'terminal-web',
+      'ide-web-vertical',
+      'ide-only',
+      'web-only'
+    ]),
   },
   ide: {
     route: 'ide',

src/app/dashboard/dashboard.component.scss

@@ -51,10 +51,10 @@
     padding-top: $hair;
     background-color: $tao-gray-50;
     overflow-y: scroll;
-    max-height: 55vmin;
+    max-height: 95vmin;
 
-    div[class*="web"] & {
-      max-height: 95vmin;
+    div[class="terminal-ide-web"] & {
+      max-height: 55vmin;
     }
   }
 
@@ -63,13 +63,14 @@
   }
 
   .tfw-sidebar {
-    background-color: $tao-turqoise-300;
+    background-color: $tao-gray-100;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    column-gap: 15px;
     align-items: center;
-    padding-top: 75px;
-    border-left: 1px solid $tao-plum-500;
+    box-shadow: -15px -5px 19px -11px rgba(0,0,0,0.75);
+    z-index: 999;
 
   }
 

src/app/dashboard/dashboard.component.ts

@@ -13,7 +13,8 @@ import { config } from '../config';
 export class DashboardComponent implements OnInit, OnDestroy {
   deploying = false;
   deploymentNotificationSubscription: Subscription;
-  layout: string = config.dashboard.defaultLayout ;
+  enabledLayouts: Set<string> = config.dashboard.enabledLayouts;
+  layout: string = config.dashboard.currentLayout ;
   command_handlers = {'layout': this.layoutHandler.bind(this)};
 
   constructor(private deploymentNotificationService: DeploymentNotificationService,
@@ -32,7 +33,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
   }
 
   layoutHandler(data: LayoutCommand) {
-    if (data.layout.match('terminal-ide-vertical|terminal-only|hraw|default-open|default-closed')) {
+    if (data.layout in (this.enabledLayouts)) {
       this.layout = data.layout;
     }
     else {

src/app/sidebar/sidebar.component.html

@@ -1,4 +1,4 @@
-<div class="tfw-ide-pin">
-  <img src="images/IDE.svg">
-  <img class="active" src="images/IDE_active.svg">
+<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 src="images/{{layoutIter}}.svg"></div>
 </div>

src/app/sidebar/sidebar.component.scss

@@ -4,13 +4,11 @@
 img {
   width: 50px;
   height: auto;
+  padding-top: 75px;
 }
 
 .tfw-ide-pin {
 
   cursor: pointer;
 
-  & .active {
-    display: none;
-  }
 }

src/app/sidebar/sidebar.component.ts

@@ -1,15 +1,16 @@
 import { Component, OnInit } from '@angular/core';
+import { config } from '../config';
 
 @Component({
   selector: 'app-sidebar',
   templateUrl: './sidebar.component.html',
   styleUrls: ['./sidebar.component.scss']
 })
+
 export class SidebarComponent implements OnInit {
-
-  constructor() { }
-
+  layout: string = config.dashboard.currentLayout;
+  enabledLayouts: Set<string> = config.dashboard.enabledLayouts;
+  constructor() {}
   ngOnInit() {
   }
-
 }