Commiting in order to switch computers

src/components/Workspace/SideBar.vue

@@ -1,7 +1,13 @@
 <template>
   <nav class="side-bar">
     <div v-for="(section, index) in sections" :key="index">
-      <SideBarItem class="item" :icon="section.icon" :title="section.title" />
+      <SideBarItem
+        class="item"
+        :icon="section.icon"
+        :title="section.name"
+        :click="launchItem"
+      />
+      <SideBarSection v-if="isOpen" :items="section.items" />
     </div>
   </nav>
 </template>
@@ -9,6 +15,7 @@
 <script>
 
 import SideBarItem from '@/components/Workspace/SideBarItem.vue';
+import SideBarSection from '@/components/Workspace/SideBarSection.vue';
 
 export default {
   name: 'SideBar',
@@ -16,8 +23,19 @@ export default {
   props: {
     sections: Array,
   },
+  data: () => ({
+    isOpen: false,
+  }),
   components: {
     SideBarItem,
+    SideBarSection,
+  },
+  methods: {
+    launchItem() {
+      this.isOpen = !this.isOpen;
+      // Open SideBarSection, passing in items[]
+      // this.$emit('launch', url);
+    },
   },
 };
 </script>

src/components/Workspace/SideBarItem.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="side-bar-item">
-    <Icon v-if="icon" :icon="icon" size="small" />
+  <div class="side-bar-item" @click="click()">
+    <Icon v-if="icon" :icon="icon" size="small" :url="url" />
     <p v-else>{{ title }}</p>
   </div>
 </template>
@@ -8,7 +8,6 @@
 <script>
 
 import Icon from '@/components/LinkItems/ItemIcon.vue';
-import Defaults from '@/utils/defaults';
 
 export default {
   name: 'SideBarItem',
@@ -16,21 +15,12 @@ export default {
   props: {
     icon: String,
     title: String,
-  },
-  mounted() {
-    this.initiateFontAwesome();
+    url: String,
+    click: Function,
   },
   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>
 

src/components/Workspace/SideBarSection.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="sub-side-bar">
+    <div v-for="(item, index) in items" :key="index">
+      <SideBarItem
+        class="item"
+        :icon="item.icon"
+        :title="item.title"
+        :url="item.url"
+        :click="launchItem"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+
+import SideBarItem from '@/components/Workspace/SideBarItem.vue';
+
+export default {
+  name: 'SideBarSection',
+  inject: ['config'],
+  props: {
+    items: Array,
+  },
+  components: {
+    SideBarItem,
+  },
+  methods: {
+    launchItem(url) {
+      this.$emit('launch', url);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/media-queries.scss';
+@import '@/styles/style-helpers.scss';
+
+div.sub-side-bar {
+  display: flex;
+  flex-direction: column;
+  background: var(--side-bar-background);
+  color: var(--side-bar-color);
+  border: 1px dashed red;
+  text-align: center;
+  .item:not(:last-child) {
+    border-bottom: 1px dashed var(--side-bar-color);
+  }
+}
+
+</style>