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,
@@ -96,105 +102,104 @@ export default {
 @import '@/styles/media-queries.scss';
 
 .collapsable {
-    padding: var(--item-group-padding);
+  padding: var(--item-group-padding);
-    margin: 10px;
+  margin: 10px;
+  border-radius: var(--curve-factor);
+  background: var(--item-group-outer-background);
+  box-shadow: var(--item-group-shadow);
+  height: fit-content;
+  width: 100%;
+  width: stretch;
+
+  grid-row-start: span 1;
+  &.row-2 { grid-row-start: span 2; }
+  &.row-3 { grid-row-start: span 3; }
+  &.row-4 { grid-row-start: span 4; }
+
+  grid-column-start: span 1;
+  @include tablet-up {
+    &.col-2 { grid-column-start: span 2; }
+    &.col-3 { grid-column-start: span 2; }
+    &.col-4 { grid-column-start: span 2; }
+  }
+  @include laptop-up {
+    &.col-2 { grid-column-start: span 2; }
+    &.col-3 { grid-column-start: span 3; }
+    &.col-4 { grid-column-start: span 3; }
+  }
+  @include monitor-up {
+    &.col-2 { grid-column-start: span 2; }
+    &.col-3 { grid-column-start: span 3; }
+    &.col-4 { grid-column-start: span 4; }
+  }
+
+  .wrap-collabsible {
+    margin-bottom: 1.2rem 0;
+  }
+
+  input[type='checkbox'] {
+    display: none;
+  }
+
+  label.lbl-toggle {
+    outline: none;
+    display: block;
+    padding: 0.25rem;
+    cursor: pointer;
     border-radius: var(--curve-factor);
-    background: var(--item-group-outer-background);
+    transition: all 0.25s ease-out;
-    box-shadow: var(--item-group-shadow);
+    text-align: left;
-    height: fit-content;
+    color: var(--item-group-heading-text-color); //var(--item-group-background);
-    width: 100%;
+    h3 {
-    width: stretch;
+      margin: 0;
-
+      padding: 0;
-    grid-row-start: span 1;
+      display: inline;
-    &.row-2 { grid-row-start: span 2; }
-    &.row-3 { grid-row-start: span 3; }
-    &.row-4 { grid-row-start: span 4; }
-
-    grid-column-start: span 1;
-    @include tablet-up {
-      &.col-2 { grid-column-start: span 2; }
-      &.col-3 { grid-column-start: span 2; }
-      &.col-4 { grid-column-start: span 2; }
     }
-    @include laptop-up {
+    .section-icon {
-      &.col-2 { grid-column-start: span 2; }
+      display: inline;
-      &.col-3 { grid-column-start: span 3; }
+      margin-right: 0.5rem;
-      &.col-4 { grid-column-start: span 3; }
-    }
-    @include monitor-up {
-      &.col-2 { grid-column-start: span 2; }
-      &.col-3 { grid-column-start: span 3; }
-      &.col-4 { grid-column-start: span 4; }
     }
+  }
 
-    .wrap-collabsible {
+  .lbl-toggle:hover {
-        margin-bottom: 1.2rem 0;
+    color: var(--item-group-heading-text-color-hover);
-    }
+  }
 
-    input[type='checkbox'] {
+  .lbl-toggle::before {
-        display: none;
+    content: ' ';
-    }
+    display: inline-block;
+    border-top: 5px solid transparent;
+    border-bottom: 5px solid transparent;
+    border-left: 5px solid currentColor;
+    vertical-align: middle;
+    margin-right: .7rem;
+    transform: translateY(-2px);
+    transition: transform .2s ease-out;
+  }
 
-    label {
+  .toggle:checked + .lbl-toggle::before {
-        outline: none;
+    transform: rotate(90deg) translateX(-3px);
-    }
+  }
 
-    .lbl-toggle {
+  .collapsible-content {
-        display: block;
+    max-height: 0px;
-        padding: 0.25rem;
+    overflow: hidden;
-        cursor: pointer;
+    transition: max-height .25s ease-in-out;
-        border-radius: var(--curve-factor);
+    background: var(--item-group-background);
-        transition: all 0.25s ease-out;
+    border-radius: 0 0 var(--curve-factor) var(--curve-factor);
-        text-align: left;
+  }
-        color: var(--item-group-heading-text-color); //var(--item-group-background);
 
-        h3 {
+  .toggle:checked + .lbl-toggle + .collapsible-content {
-            margin: 0;
+    max-height: 3000px;
-            padding: 0;
+  }
-            display: inline;
-        }
-    }
 
-    .lbl-toggle:hover {
+  .toggle:checked + .lbl-toggle {
-        color: var(--item-group-heading-text-color-hover);
+    border-bottom-right-radius: 0;
-    }
+    border-bottom-left-radius: 0;
+  }
 
-    .lbl-toggle::before {
+  .collapsible-content .content-inner {
-        content: ' ';
+    padding: 0.5rem;
-        display: inline-block;
+  }
-        border-top: 5px solid transparent;
-        border-bottom: 5px solid transparent;
-        border-left: 5px solid currentColor;
-        vertical-align: middle;
-        margin-right: .7rem;
-        transform: translateY(-2px);
-
-        transition: transform .2s ease-out;
-    }
-
-    .toggle:checked + .lbl-toggle::before {
-        transform: rotate(90deg) translateX(-3px);
-    }
-
-    .collapsible-content {
-        max-height: 0px;
-        overflow: hidden;
-        transition: max-height .25s ease-in-out;
-        background: var(--item-group-background);
-        border-radius: 0 0 var(--curve-factor) var(--curve-factor);
-    }
-
-    .toggle:checked + .lbl-toggle + .collapsible-content {
-        max-height: 3000px;
-    }
-
-    .toggle:checked + .lbl-toggle {
-        border-bottom-right-radius: 0;
-        border-bottom-left-radius: 0;
-    }
-
-    .collapsible-content .content-inner {
-        padding: 0.5rem;
-    }
 }
 </style>

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)"