✨ Implements multi-tasking functionality in Workspace view

src/components/Workspace/MultiTaskingWebComtent.vue

@@ -1,7 +1,5 @@
 <template>
-  <div class="web-content" ref="container">
-    <button @click="launchApp">Click Me</button>
-  </div>
+  <div class="multi-taking-view" ref="container"></div>
 </template>
 
 <script>
@@ -11,14 +9,17 @@ import WebContent from '@/components/Workspace/WebContent';
 export default {
   name: 'WebContent',
   props: {
-    url: String,
-    currentApp: String,
+    url: String, // The URL of currently visible app
   },
   data: () => ({
-    openApps: [],
-    activeApp: '',
+    openApps: [], // List of all currently open apps
   }),
+  watch: {
+    /* Update the currently open app, when URL changes */
+    url() { this.launchApp(); },
+  },
   methods: {
+    /* Check if app already open or not, and call appropriate opener */
     launchApp() {
       if (this.openApps.includes(this.url)) {
         this.openExistingApp();
@@ -27,17 +28,21 @@ export default {
         this.appendNewApp();
       }
     },
+    /* Opens a new app */
     appendNewApp() {
       const ComponentClass = Vue.extend(WebContent);
       const instance = new ComponentClass({
-        propsData: { url: this.url },
+        propsData: { url: this.url, id: btoa(this.url) },
       });
       instance.$mount(); // pass nothing
       this.$refs.container.appendChild(instance.$el);
     },
+    /* Switches visibility to an already open app */
     openExistingApp() {
-      console.log('Already Exists', this.url);
-      // TODO: Find open frame, and set visibility
+      Array.from(document.getElementsByClassName('web-content')).forEach((frame) => {
+        frame.classList.add('hide');
+      });
+      document.getElementById(btoa(this.url)).classList.remove('hide');
     },
   },
 };

src/components/Workspace/SideBarItem.vue

@@ -44,8 +44,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '@/styles/media-queries.scss';
-@import '@/styles/style-helpers.scss';
 
 div.side-bar-item {
   color: var(--side-bar-color);
@@ -56,8 +54,10 @@ div.side-bar-item {
     border: none;
     box-shadow: none;
     p.small-title {
-      margin: 0.1rem auto;
+      margin: 0.1rem 0 0 -0.5rem;
       font-size: 0.6rem;
+      transform: rotate(-25deg);
+      padding: 0.5rem 0;
     }
   }
 }

src/components/Workspace/WebContent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="web-content">
+  <div class="web-content" :id="id">
     <iframe :src="url" />
   </div>
 </template>
@@ -10,13 +10,15 @@ export default {
   name: 'WebContent',
   props: {
     url: String,
+    id: {
+      type: String,
+      default: 'web-app-view',
+    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
-@import '@/styles/media-queries.scss';
-@import '@/styles/style-helpers.scss';
 
 iframe {
   position: absolute;
@@ -27,4 +29,8 @@ iframe {
   background: white;
 }
 
+.web-content.hide {
+  display: none;
+}
+
 </style>