Sidebar icons are now highlighted and focus works

src/app/config.ts

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

src/app/dashboard/dashboard.component.scss

@@ -1,7 +1,6 @@
 @import "../../assets/scss/variables.scss";
 @import "../../assets/scss/mixins/layout.scss";
 
-
 @mixin set-tfw-web($layouts-key) {
 
   .tfw-web {
@@ -67,7 +66,7 @@
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    column-gap: 15px;
+    padding-top: 75px;
     align-items: center;
     box-shadow: -15px -5px 19px -11px rgba(0,0,0,0.75);
     z-index: 999;

src/app/sidebar/sidebar.component.html

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

src/app/sidebar/sidebar.component.scss

@@ -1,16 +1,28 @@
 @import "../../assets/scss/variables.scss";
 @import "../../assets/scss/mixins/layout.scss";
 
-img {
-  width: 50px;
-  height: auto;
-  padding-top: 75px;
-}
 
 .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);
+  button {
+    width: 50px;
+    height: auto;
+    padding: 0;
+    margin-bottom: 50px;
+    cursor: pointer;
+    border: 1px solid $tao-gray-200;
+    transition: all 0.18s ease;
+    box-shadow: 0 4px 8px 0 rgba($tao-gray-500, 0.2), 0 4px 10px 0 rgba($tao-gray-500, 0.09);
+
+    &:hover,
+    &:focus {
+      box-shadow: 0 4px 8px 0 rgba($tao-blue-500, 0.2), 0 8px 20px 0 rgba($tao-blue-500, 0.29);
+      border: 1px solid $tao-blue-200;
+    }
+
+    &:focus {
+      width: 48px;
+    }
   }
+
 }

src/assets/scss/mixins/_layout.scss

@@ -12,9 +12,9 @@ $terminal-ide-web-layout: (
 
 $terminal-web-layout: (
   'header': (1, 6, 1, 2),
-  'messages': (1, 6, 2, 10),
+  'messages': (1, 6, 2, $grid-columns-count+1),
   'ide': (),
-  'terminal': (15, $grid-columns-count, 10, $grid-rows-count+1),
+  'terminal': (15, $grid-columns-count, 1, $grid-rows-count+1),
   'web': (6, 15, 1, 10),
   'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1)
 );