🚧 Implemented the tab-switching functionality into the minimal view

src/components/MinimalView/MinimalHeading.vue

@@ -0,0 +1,46 @@
+<template>
+  <div
+    @click="selectSection(index)"
+    :class="`minimal-section-heading ${selected ? 'selected' : ''}`">
+    <h3>{{ title }}</h3>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'MinimalHeadings',
+  props: {
+    index: Number,
+    title: String,
+    selected: Boolean,
+  },
+  methods: {
+    selectSection(index) {
+      this.$emit('sectionSelected', index);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import '@/styles/media-queries.scss';
+@import '@/styles/style-helpers.scss';
+
+div.minimal-section-heading {
+  cursor: pointer;
+  padding: 0.5rem 0.25rem;
+  border-radius: var(--curve-factor);
+  h3 {
+    margin: 0;
+    color: var(--primary);
+  }
+  &.selected {
+    background: var(--primary);
+    h3 {
+      color: var(--background);
+    }
+  }
+}
+
+</style>

src/components/MinimalView/MinimalSection.vue

@@ -1,30 +1,27 @@
 <template>
    <div :class="`minimal-section-inner ${selected ? 'selected' : ''}`">
-      <div class="section-title" @click="selectSection(index)">
+    <div class="section-items" v-if="selected">
-        <h3>{{ title }}</h3>
+      <Item
-      </div>
+        v-for="(item, index) in items"
-      <div class="section-items" v-if="selected">
+        :id="`${index}_${makeId(item.title)}`"
-        <Item
+        :key="`${index}_${makeId(item.title)}`"
-          v-for="(item, index) in items"
+        :url="item.url"
-          :id="`${index}_${makeId(item.title)}`"
+        :title="item.title"
-          :key="`${index}_${makeId(item.title)}`"
+        :description="item.description"
-          :url="item.url"
+        :icon="item.icon"
-          :title="item.title"
+        :target="item.target"
-          :description="item.description"
+        :color="item.color"
-          :icon="item.icon"
+        :backgroundColor="item.backgroundColor"
-          :target="item.target"
+        :statusCheckUrl="item.statusCheckUrl"
-          :color="item.color"
+        :statusCheckHeaders="item.statusCheckHeaders"
-          :backgroundColor="item.backgroundColor"
+        :itemSize="itemSize"
-          :statusCheckUrl="item.statusCheckUrl"
+        :hotkey="item.hotkey"
-          :statusCheckHeaders="item.statusCheckHeaders"
+        :enableStatusCheck="shouldEnableStatusCheck(item.statusCheck)"
-          :itemSize="itemSize"
+        :statusCheckInterval="getStatusCheckInterval()"
-          :hotkey="item.hotkey"
+        @itemClicked="$emit('itemClicked')"
-          :enableStatusCheck="shouldEnableStatusCheck(item.statusCheck)"
+        @triggerModal="triggerModal"
-          :statusCheckInterval="getStatusCheckInterval()"
+      />
-          @itemClicked="$emit('itemClicked')"
+    </div>
-          @triggerModal="triggerModal"
-        />
-      </div>
     <IframeModal
       :ref="`iframeModal-${groupId}`"
       :name="`iframeModal-${groupId}`"
@@ -99,23 +96,10 @@ export default {
     display: flex;
     flex-direction: column;
   }
-  .section-title {
-    cursor: pointer;
-    padding: 0.5rem 0.25rem;
-    border-radius: var(--curve-factor);
-    h3 {
-      margin: 0;
-      color: var(--primary);
-    }
-  }
   &.selected {
-    .section-title {
+    border: 1px solid var(--primary);
-      background: var(--primary);
+    grid-column-start: span var(--col-count, 3);
-        h3 {
+  }
-          color: var(--background);
-        }
-      }
-    }
 }
 
 </style>

src/views/Minimal.vue

@@ -1,11 +1,19 @@
 <template>
-  <div class="minimal-home" :style="getBackgroundImage()">
+  <div class="minimal-home" :style="getBackgroundImage() + setColumnCount()">
     <!-- Main content, section for each group of items -->
     <div v-if="checkTheresData(sections)"
       :class="`item-group-container item-size-small`">
+      <MinimalHeading
+        v-for="(section, index) in getSections(sections)"
+        :key="`heading-${index}`"
+        :index="index"
+        :title="section.name"
+        :selected="selectedSection === index"
+        @sectionSelected="sectionSelected"
+      />
       <MinimalSection
         v-for="(section, index) in getSections(sections)"
-        :key="index"
+        :key="`body-${index}`"
         :index="index"
         :title="section.name"
         :icon="section.icon || undefined"
@@ -25,6 +33,7 @@
 <script>
 
 import MinimalSection from '@/components/MinimalView/MinimalSection.vue';
+import MinimalHeading from '@/components/MinimalView/MinimalHeading.vue';
 import Defaults, { localStorageKeys } from '@/utils/defaults';
 
 export default {
@@ -35,6 +44,7 @@ export default {
   },
   components: {
     MinimalSection,
+    MinimalHeading,
   },
   data: () => ({
     searchValue: '',
@@ -127,6 +137,9 @@ export default {
         return itemsFound;
       }
     },
+    setColumnCount() {
+      return `--col-count: ${this.sections.length};`;
+    },
     getBackgroundImage() {
       if (this.appConfig && this.appConfig.backgroundImg) {
         return `background: url('${this.appConfig.backgroundImg}');background-size:cover;`;
@@ -160,6 +173,7 @@ export default {
   margin: 0 auto;
   max-width: 90%;
   overflow: auto;
+  grid-template-columns: repeat(var(--col-count), 1fr);
   @extend .scroll-bar;
   @include monitor-up {
     max-width: 1400px;
@@ -178,26 +192,6 @@ export default {
     }
   }
 
-  /* Specify number of columns, based on screen size */
-  @include phone {
-    grid-template-columns: repeat(1, 1fr);
-  }
-  @include tablet {
-    grid-template-columns: repeat(2, 1fr);
-  }
-  @include laptop {
-    grid-template-columns: repeat(2, 1fr);
-  }
-  @include monitor {
-    grid-template-columns: repeat(3, 1fr);
-  }
-  @include big-screen {
-    grid-template-columns: repeat(4, 1fr);
-  }
-  @include big-screen-up {
-    grid-template-columns: repeat(5, 1fr);
-  }
-
   /* Hide when search term returns nothing */
   .no-results { display: none; }
 }