🚧 Working on section selection functionality

src/components/MinimalView/MinimalSection.vue

@@ -1,5 +1,9 @@
 <template>
-   <div class="minimal-section-inner">
+   <div :class="`minimal-section-inner ${selected ? 'selected' : ''}`">
+      <div class="section-title" @click="selectSection(index)">
+        <h3>{{ title }}</h3>
+      </div>
+      <div class="section-items" v-if="selected">
         <Item
           v-for="(item, index) in items"
           :id="`${index}_${makeId(item.title)}`"
@@ -20,7 +24,7 @@
           @itemClicked="$emit('itemClicked')"
           @triggerModal="triggerModal"
         />
-      <div ref="modalContainer"></div>
+      </div>
     <IframeModal
       :ref="`iframeModal-${groupId}`"
       :name="`iframeModal-${groupId}`"
@@ -45,12 +49,17 @@ export default {
     items: Array,
     itemSize: String,
     modalOpen: Boolean,
+    index: Number,
+    selected: Boolean,
   },
   components: {
     Item,
     IframeModal,
   },
   methods: {
+    selectSection(index) {
+      this.$emit('sectionSelected', index);
+    },
     /* Returns a unique lowercase string, based on name, for section ID */
     makeId(str) {
       return str.replace(/\s+/g, '-').replace(/[^a-zA-Z ]/g, '').toLowerCase();
@@ -85,30 +94,27 @@ export default {
   height: 100%;
   display: flex;
   flex-wrap: wrap;
-  &.item-group-grid {
+  flex-direction: column;
-    display: grid;
+  .section-items {
-    overflow: auto;
-    @extend .scroll-bar;
-    @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); }
-  }
-}
-.orientation-horizontal {
     display: flex;
     flex-direction: column;
-  .there-are-items {
+  }
-    display: grid;
+  .section-title {
-    grid-template-columns: repeat(5, 1fr);
+    cursor: pointer;
-    @include phone { grid-template-columns: repeat(2, 1fr); }
+    padding: 0.5rem 0.25rem;
-    @include tablet { grid-template-columns: repeat(4, 1fr); }
+    border-radius: var(--curve-factor);
-    @include laptop { grid-template-columns: repeat(6, 1fr); }
+    h3 {
-    @include monitor { grid-template-columns: repeat(8, 1fr); }
+      margin: 0;
-    @include big-screen { grid-template-columns: repeat(10, 1fr); }
+      color: var(--primary);
-    @include big-screen-up { grid-template-columns: repeat(12, 1fr); }
+    }
+  }
+  &.selected {
+    .section-title {
+      background: var(--primary);
+        h3 {
+          color: var(--background);
+        }
+      }
     }
 }
 

src/views/Minimal.vue

@@ -2,15 +2,18 @@
   <div class="minimal-home" :style="getBackgroundImage()">
     <!-- Main content, section for each group of items -->
     <div v-if="checkTheresData(sections)"
-      :class="`item-group-container orientation-${layout} item-size-${itemSizeBound}`">
+      :class="`item-group-container item-size-small`">
       <MinimalSection
         v-for="(section, index) in getSections(sections)"
         :key="index"
+        :index="index"
         :title="section.name"
         :icon="section.icon || undefined"
         :groupId="`section-${index}`"
         :items="filterTiles(section.items)"
+        :selected="selectedSection === index"
         itemSize="small"
+        @sectionSelected="sectionSelected"
          @itemClicked="finishedSearching()"
          @change-modal-visibility="updateModalVisibility"
          :class="(filterTiles(section.items).length === 0 && searchValue) ? 'no-results' : ''"
@@ -36,10 +39,13 @@ export default {
   data: () => ({
     searchValue: '',
     layout: '',
-    itemSizeBound: '',
     modalOpen: false, // When true, keybindings are disabled
+    selectedSection: 0, // The index of currently selected section
   }),
   methods: {
+    sectionSelected(index) {
+      this.selectedSection = index;
+    },
     /* Returns true if there is one or more sections in the config */
     checkTheresData(sections) {
       const localSections = localStorage[localStorageKeys.CONF_SECTIONS];
@@ -138,11 +144,13 @@ export default {
 @import '@/styles/media-queries.scss';
 @import '@/styles/style-helpers.scss';
 
-.home {
+.minimal-home {
   padding-bottom: 1px;
   background: var(--background);
-  // min-height: calc(100vh - 126px);
+  min-height: calc(99.9vh - var(--footer-height));
-  min-height: calc(100vh - var(--footer-height));
+  width: 90%;
+  max-width: 1000px;
+  margin: 1rem auto;
 }
 
 /* Outside container wrapping the item groups*/