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() {
   }
-
 }

src/assets/images/terminal-only.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 59"><title>terminalonly</title><path d="M65.06,59H2.94C1.32,59,0,57.35,0,55.31V3.69C0,1.65,1.32,0,2.94,0H65.06C66.68,0,68,1.65,68,3.69V55.31C68,57.35,66.68,59,65.06,59ZM2.94,1.05A2.42,2.42,0,0,0,.84,3.69V55.31A2.42,2.42,0,0,0,2.94,58H65.06a2.42,2.42,0,0,0,2.1-2.64V3.69a2.42,2.42,0,0,0-2.1-2.64Z"/><path d="M18.82,12.75a.16.16,0,0,1,.13.06l12,13.47a1.13,1.13,0,0,1,0,1.58L19,41.33a.18.18,0,0,1-.22,0,.1.1,0,0,1-.05-.17l12-13.47a.93.93,0,0,0,0-1.31L18.68,13a.1.1,0,0,1,.05-.17A.14.14,0,0,1,18.82,12.75Z"/><path d="M18.82,41.76a.52.52,0,0,1-.27-.07.49.49,0,0,1-.26-.35l0-.18.15-.22,12-13.46a.57.57,0,0,0,0-.82L18.28,13.06v-.27a.53.53,0,0,1,.26-.35l.09,0,.18,0a.56.56,0,0,1,.41.18L31.22,26a1.52,1.52,0,0,1,0,2.08l-12,13.47A.54.54,0,0,1,18.82,41.76Zm-.15-.68h0Zm0-28Z"/><path d="M18.82,41.63a.54.54,0,0,1-.21-.05.38.38,0,0,1-.19-.26.32.32,0,0,1,.09-.29l12-13.47a.71.71,0,0,0,0-1l-12-13.46a.34.34,0,0,1-.08-.29.38.38,0,0,1,.19-.26.44.44,0,0,1,.52.09l12,13.47a1.37,1.37,0,0,1,0,1.9l-12,13.47A.41.41,0,0,1,18.82,41.63Zm.05-.28h0Zm-.1-.18Zm.09-28.39h0Z"/><path d="M18.82,42a.79.79,0,0,1-.38-.09.73.73,0,0,1-.39-.52.72.72,0,0,1,.18-.61l12-13.46a.33.33,0,0,0,0-.5l-12-13.47a.68.68,0,0,1-.18-.59.73.73,0,0,1,.39-.53.8.8,0,0,1,1,.17l12,13.47a1.76,1.76,0,0,1,0,2.4l-12,13.47A.77.77,0,0,1,18.82,42Zm0-29.1L30.77,26.33a1.06,1.06,0,0,1,0,1.48l-12,13.47,0,0h0l12-13.46a1,1,0,0,0,0-1.42Z"/><path d="M44.35,41.93H30.14a.75.75,0,1,1,0-1.5H44.35a.75.75,0,0,1,0,1.5Z"/></svg>

src/assets/images/terminal-only_active.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 59"><defs><style>.cls-1{fill:#277eec;}</style></defs><title>terminalonly_active</title><path class="cls-1" d="M65.06,59H2.94C1.32,59,0,57.35,0,55.31V3.69C0,1.65,1.32,0,2.94,0H65.06C66.68,0,68,1.65,68,3.69V55.31C68,57.35,66.68,59,65.06,59ZM2.94,1.05A2.42,2.42,0,0,0,.84,3.69V55.31A2.42,2.42,0,0,0,2.94,58H65.06a2.42,2.42,0,0,0,2.1-2.64V3.69a2.42,2.42,0,0,0-2.1-2.64Z"/><path class="cls-1" d="M18.82,12.75a.16.16,0,0,1,.13.06l12,13.47a1.13,1.13,0,0,1,0,1.58L19,41.33a.18.18,0,0,1-.22,0,.1.1,0,0,1-.05-.17l12-13.47a.93.93,0,0,0,0-1.31L18.68,13a.1.1,0,0,1,.05-.17A.14.14,0,0,1,18.82,12.75Z"/><path class="cls-1" d="M18.82,41.76a.52.52,0,0,1-.27-.07.49.49,0,0,1-.26-.35l0-.18.15-.22,12-13.46a.57.57,0,0,0,0-.82L18.28,13.06v-.27a.53.53,0,0,1,.26-.35l.09,0,.18,0a.56.56,0,0,1,.41.18L31.22,26a1.52,1.52,0,0,1,0,2.08l-12,13.47A.54.54,0,0,1,18.82,41.76Zm-.15-.68h0Zm0-28Z"/><path class="cls-1" d="M18.82,41.63a.54.54,0,0,1-.21-.05.38.38,0,0,1-.19-.26.32.32,0,0,1,.09-.29l12-13.47a.71.71,0,0,0,0-1l-12-13.46a.34.34,0,0,1-.08-.29.38.38,0,0,1,.19-.26.44.44,0,0,1,.52.09l12,13.47a1.37,1.37,0,0,1,0,1.9l-12,13.47A.41.41,0,0,1,18.82,41.63Zm.05-.28h0Zm-.1-.18Zm.09-28.39h0Z"/><path class="cls-1" d="M18.82,42a.79.79,0,0,1-.38-.09.73.73,0,0,1-.39-.52.72.72,0,0,1,.18-.61l12-13.46a.33.33,0,0,0,0-.5l-12-13.47a.68.68,0,0,1-.18-.59.73.73,0,0,1,.39-.53.8.8,0,0,1,1,.17l12,13.47a1.76,1.76,0,0,1,0,2.4l-12,13.47A.77.77,0,0,1,18.82,42Zm0-29.1L30.77,26.33a1.06,1.06,0,0,1,0,1.48l-12,13.47,0,0h0l12-13.46a1,1,0,0,0,0-1.42Z"/><path class="cls-1" d="M44.35,41.93H30.14a.75.75,0,1,1,0-1.5H44.35a.75.75,0,0,1,0,1.5Z"/></svg>