Adds option for a section to have an icon

README.md

@@ -105,6 +105,7 @@ All fields are optional, unless otherwise stated.
 **`section`**
 - `name` - String: (required) The title of that section
 - `items` - Item[]: (required) An array of items - _See **`item`** below_
+- `icon` - String: (optional) An single icon to be displayed next to the title _See **`icon`** below_
 - `displayData`: An object with the following fields (all optional)
   - `collapsed` - Boolean: If true, the section will  be collapsed initially (defaults to `false`) 
   - `color` - String: A custom accent color for the section, as a hex code or HTML color (e.g. `#fff`)

public/conf.yml

@@ -13,6 +13,7 @@ appConfig:
   fontAwesomeKey: 0821c65656
 sections:
 - name: Getting Started
+  icon: fab fa-github
   items:
   - title: Source
     description: Source code and documentation on GitHub

src/components/LinkItems/Collapsable.vue

@@ -11,6 +11,7 @@
         tabIndex="-1"
     >
     <label :for="`collapsible-${uniqueKey}`" class="lbl-toggle" tabindex="-1">
+      <Icon v-if="icon" :icon="icon" size="small" class="section-icon" />
       <h3>{{ title }}</h3>
     </label>
     <div class="collapsible-content">
@@ -24,18 +25,23 @@
 <script>
 
 import { localStorageKeys } from '@/utils/defaults';
+import Icon from '@/components/LinkItems/ItemIcon.vue';
 
 export default {
   name: 'CollapsableContainer',
   props: {
     uniqueKey: String,
     title: String,
+    icon: String,
     collapsed: Boolean,
     cols: Number,
     rows: Number,
     color: String,
     customStyles: String,
   },
+  components: {
+    Icon,
+  },
   data() {
     return {
       isOpen: !this.collapsed,
@@ -135,11 +141,8 @@ export default {
     display: none;
   }
 
-    label {
+  label.lbl-toggle {
     outline: none;
-    }
-
-    .lbl-toggle {
     display: block;
     padding: 0.25rem;
     cursor: pointer;
@@ -147,12 +150,15 @@ export default {
     transition: all 0.25s ease-out;
     text-align: left;
     color: var(--item-group-heading-text-color); //var(--item-group-background);
-
     h3 {
       margin: 0;
       padding: 0;
       display: inline;
     }
+    .section-icon {
+      display: inline;
+      margin-right: 0.5rem;
+    }
   }
 
   .lbl-toggle:hover {
@@ -168,7 +174,6 @@ export default {
     vertical-align: middle;
     margin-right: .7rem;
     transform: translateY(-2px);
-
     transition: transform .2s ease-out;
   }
 

src/components/LinkItems/ItemGroup.vue

@@ -1,6 +1,7 @@
 <template>
    <Collapsable
     :title="title"
+    :icon="icon"
     :uniqueKey="groupId"
     :collapsed="displayData.collapsed"
     :cols="displayData.cols"
@@ -51,6 +52,7 @@ export default {
   props: {
     groupId: String,
     title: String,
+    icon: String,
     displayData: Object,
     items: Array,
     itemSize: String,

src/styles/color-themes.scss

@@ -551,10 +551,11 @@ html[data-theme='minimal-dark'] {
   --search-container-background: #14171e;
   --curve-factor: 4px;
   --curve-factor-navbar: 8px;
+  --item-group-heading-text-color: #fff;
+  --item-group-heading-text-color-hover: #ffffffbf;
 
   label.lbl-toggle h3 {
     font-size: 1.8rem;
-    color: #fff;
   }
 
   section.filter-container {

src/views/Home.vue

@@ -22,6 +22,7 @@
         v-for="(section, index) in getSections(sections)"
         :key="index"
         :title="section.name"
+        :icon="section.icon || undefined"
         :displayData="getDisplayData(section)"
         :groupId="`section-${index}`"
         :items="filterTiles(section.items)"