Working on adding a workspace/ sidebar view

src/components/Workspace/SideBar.vue

@@ -0,0 +1,43 @@
+<template>
+  <nav class="side-bar">
+    <div v-for="(section, index) in sections" :key="index">
+      <SideBarItem class="item" :icon="section.icon" :title="section.title" />
+    </div>
+  </nav>
+</template>
+
+<script>
+
+import SideBarItem from '@/components/Workspace/SideBarItem.vue';
+
+export default {
+  name: 'SideBar',
+  inject: ['config'],
+  props: {
+    sections: Array,
+  },
+  components: {
+    SideBarItem,
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/media-queries.scss';
+@import '@/styles/style-helpers.scss';
+
+nav.side-bar {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  background: var(--side-bar-background);
+  color: var(--side-bar-color);
+  height: 100%;
+  width: 3rem;
+  text-align: center;
+  .item:not(:last-child) {
+    border-bottom: 1px dashed var(--side-bar-color);
+  }
+}
+
+</style>

src/components/Workspace/SideBarItem.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="side-bar-item">
+    <Icon v-if="icon" :icon="icon" size="small" />
+    <p v-else>{{ title }}</p>
+  </div>
+</template>
+
+<script>
+
+import Icon from '@/components/LinkItems/ItemIcon.vue';
+import Defaults from '@/utils/defaults';
+
+export default {
+  name: 'SideBarItem',
+  inject: ['config'],
+  props: {
+    icon: String,
+    title: String,
+  },
+  mounted() {
+    this.initiateFontAwesome();
+  },
+  components: {
+    Icon,
+  },
+  methods: {
+    initiateFontAwesome() {
+      const fontAwesomeScript = document.createElement('script');
+      const faKey = this.config.appConfig.fontAwesomeKey || Defaults.fontAwesomeKey;
+      fontAwesomeScript.setAttribute('src', `https://kit.fontawesome.com/${faKey}.js`);
+      document.head.appendChild(fontAwesomeScript);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/media-queries.scss';
+@import '@/styles/style-helpers.scss';
+
+div.side-bar-item {
+  color: var(--side-bar-color);
+  background: var(--side-bar-background);
+  text-align: center;
+}
+
+</style>

src/components/Workspace/WebContent.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="web-content">
+    <iframe :src="url" />
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'WebContent',
+  props: {
+    url: String,
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/media-queries.scss';
+@import '@/styles/style-helpers.scss';
+
+iframe {
+  position: absolute;
+  left: 3rem;
+  height: calc(100% - 6.3rem);
+  width: calc(100% - 3rem);
+  border: none;
+  background: white;
+}
+
+</style>