Adds option for custom section colors and additional styles

src/components/Collapsable.vue

@@ -1,5 +1,7 @@
 <template>
-  <div :class="`collapsable ${checkSpanNum(cols, 'col')} ${checkSpanNum(rows, 'row')}`">
+  <div :class="`collapsable ${checkSpanNum(cols, 'col')} ${checkSpanNum(rows, 'row')}`"
+    :style="`${color ? 'background: '+color : ''}; ${customStyles}`"
+  >
         <input
             :id="`collapsible-${uniqueKey}`"
             class="toggle"
@@ -28,6 +30,8 @@ export default {
     collapsed: Boolean,
     cols: Number,
     rows: Number,
+    color: String,
+    customStyles: String,
   },
   data() {
     return {

src/components/ItemGroup.vue

@@ -5,6 +5,8 @@
     :collapsed="displayData.collapsed"
     :cols="displayData.cols"
     :rows="displayData.rows"
+    :color="displayData.color"
+    :customStyles="displayData.customStyles"
   >
     <div v-if="!items || items.length < 1" class="no-items">
       No Items to Show Yet

src/data/conf.yml

@@ -47,10 +47,6 @@ sections:
     iconType: img
     url: https://192.168.1.1/ui/wireguard/general
 - name: DNS Device
-  displayData:
-    collapsed: false
-    rows: 2
-    cols: 2
   collapsed: false
   items:
   - title: Pi-Hole

src/views/Home.vue

@@ -59,8 +59,7 @@ export default {
       });
     },
     getDisplayData(section) {
-      const defaultDisplayData = { collapsed: null, rows: null, cols: null };
+      return !section.displayData ? {} : section.displayData;
-      return !section.displayData ? defaultDisplayData : section.displayData;
     },
   },
 };