⚡ Many big improvments to items + sections

src/components/LinkItems/Item.vue

@@ -122,10 +122,6 @@ export default {
   data() {
     return {
       editMenuOpen: false,
-      customStyles: {
-        color: this.item.color,
-        background: this.item.backgroundColor,
-      },
     };
   },
   methods: {
@@ -312,7 +308,8 @@ p.description {
     justify-content: flex-end;
     align-items: center;
     height: 2rem;
-    padding-top: 4px;
+    padding-top: 0.25rem;
+    padding-left: 0.5rem;
     div img {
       width: 2rem;
     }

src/components/LinkItems/Section.vue

@@ -30,6 +30,7 @@
           :itemId="item.id"
           :title="item.title"
           :subItems="item.subItems"
+          @triggerModal="triggerModal"
         />
         <Item
           v-else
@@ -56,6 +57,7 @@
         :parentSectionTitle="title"
         key="add-new"
         class="add-new-item"
+        :sectionWidth="sectionWidth"
         :itemSize="itemSize"
       />
     </div>

src/components/LinkItems/SubItem.vue

@@ -13,7 +13,8 @@
       class="sub-item-link item"
     >
       <!-- Item Icon -->
-      <Icon :icon="icon" :url="url" size="small" class="sub-icon-img bounce" />
+      <Icon :icon="item.icon" :url="item.url"
+      size="small" v-bind:style="customStyles" class="sub-icon-img bounce" />
     </a>
     <!-- Right-click context menu -->
     <ContextMenu
@@ -32,20 +33,14 @@
 import Icon from '@/components/LinkItems/ItemIcon.vue';
 import ContextMenu from '@/components/LinkItems/ItemContextMenu';
 import ItemMixin from '@/mixins/ItemMixin';
-import { targetValidator } from '@/utils/ConfigHelpers';
+// import { targetValidator } from '@/utils/ConfigHelpers';
 
 export default {
   name: 'Item',
   mixins: [ItemMixin],
   props: {
     id: String, // The unique ID of a tile (e.g. 001)
-    title: String, // The main text of tile, required
-    icon: String, // Optional path to icon, within public/img/tile-icons
-    url: String, // URL to the resource, optional but recommended
-    target: { // Where resource will open, either 'newtab', 'sametab' or 'modal'
-      type: String,
-      validator: targetValidator,
-    },
+    item: Object,
   },
   components: {
     Icon,
@@ -69,7 +64,6 @@ export default {
   flex-basis: 6rem;
   display: flex;
   a.sub-item-link {
-    border: none;
     margin: 0.2rem;
     .sub-icon-img {
       margin: 0;

src/components/LinkItems/SubItemGroup.vue

@@ -5,9 +5,8 @@
       v-for="(subItem, subIndex) in subItems"
       :key="subIndex"
       :id="`${itemId}-sub-${subIndex}`"
-      :url="subItem.url"
-      :icon="subItem.icon"
-      :title="subItem.title"
+      :item="subItem"
+      @triggerModal="triggerModal"
     />
   </div>
 </template>
@@ -37,6 +36,12 @@ export default {
       return 2;
     },
   },
+  methods: {
+    /* Pass open modal emit event up */
+    triggerModal(url) {
+      this.$emit('triggerModal', url);
+    },
+  },
 };
 </script>