add console component, terminal icon

src/components/Console.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="console">
+    <div class="console__header"></div>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="scss" scoped>
+.console {
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+  border-top: 2px solid #1f364d;
+
+  .console__header {
+    height: 35px;
+    background-color: black;
+  }
+}
+</style>

src/components/Toolbar.vue

@@ -14,7 +14,11 @@
           @input="changeLanguage"
         ></multiselect>
       </div>
-      <div class="column">
+      <div class="column actions">
+        <div class="terminal-icon" @click="$emit('toggle-console')">
+          <img src="/images/code.svg" height="50px" width="50px" alt="console" />
+        </div>
+        <button class="button btn-secondary" disabled>Run</button>
         <button class="button btn-secondary" @click="save">Save</button>
       </div>
     </div>
@@ -96,4 +100,21 @@ export default {
 .languages >>> .multiselect__option {
   text-transform: capitalize;
 }
+
+.actions {
+  display: flex;
+  justify-content: space-around;
+}
+.actions .terminal-icon {
+  border: 2px solid #1f364d;
+  width: 40px;
+  height: 40px;
+  padding: 10px;
+  border-radius: 5px;
+  cursor: pointer;
+  margin-left: 5px;
+}
+.actions button {
+  margin-left: 5px;
+}
 </style>

src/views/Room.vue

@@ -9,12 +9,14 @@
             :options="cmOptions"
             @input="onCmCodeChange"
           />
+          <Console v-if="showConsole" />
           <Toolbar
             :language="room.language"
             :name="room.name"
             @change-language="changeLanguage"
             @edit-name="updateName"
             @save="updateRoom"
+            @toggle-console="toggleConsole"
           />
         </div>
         <div class="column is-half drawing-board">
@@ -26,6 +28,7 @@
 </template>
 
 <script>
+import Console from '../components/Console'
 import Toolbar from '../components/Toolbar'
 import DrawingBoard from '../components/DrawingBoard'
 import { codemirror } from 'vue-codemirror'
@@ -42,6 +45,7 @@ import 'codemirror/theme/monokai.css'
 export default {
   components: {
     codemirror,
+    Console,
     Toolbar,
     DrawingBoard
   },
@@ -67,7 +71,8 @@ export default {
       languageModes: {
         python: 'x-python',
         javascript: 'javascript'
-      }
+      },
+      showConsole: false
     }
   },
   computed: {
@@ -98,6 +103,9 @@ export default {
     },
     updateName(name) {
       this.room.name = name
+    },
+    toggleConsole() {
+      this.showConsole = !this.showConsole
     }
   }
 }
@@ -118,8 +126,14 @@ export default {
   border: 3px solid #1f364d;
   background: #001528;
 }
+.dashboard .columns .code-editor {
+  height: calc(100vh - 50px);
+  display: flex;
+  flex-direction: column;
+  justify-content: stretch;
+}
 .vue-codemirror {
-  height: 80vh;
+  height: 100%;
   border-radius: 4px;
 }
 .vue-codemirror >>> .CodeMirror {