✨ Builds single-section view

src/components/LinkItems/Section.vue

@@ -200,7 +200,7 @@ export default {
     grid-template-columns: repeat(var(--item-col-count, 2), minmax(0, 1fr));
   }
 }
-.orientation-horizontal {
+.orientation-horizontal:not(.single-section-view) {
   display: flex;
   flex-direction: column;
   .there-are-items {

src/router.js

@@ -84,6 +84,12 @@ const router = new Router({
       component: Home,
       meta: makeMetaTags('Home Page'),
     },
+    { // View only single section
+      path: `${routePaths.home}/:section`,
+      name: 'home-section',
+      component: Home,
+      meta: makeMetaTags('Home Page'),
+    },
     { // Workspace view page
       path: routePaths.workspace,
       name: 'workspace',

src/views/Home.vue

@@ -13,11 +13,19 @@
       :modalOpen="modalOpen"
       class="settings-outer"
     />
+    <!-- Show back button, when on single-section view -->
+    <div v-if="singleSectionView">
+      <router-link to="/home" class="back-to-all-link">
+        <BackIcon />
+        <span>Back to All</span>
+      </router-link>
+    </div>
     <!-- Main content, section for each group of items -->
     <div v-if="checkTheresData(sections)"
       :class="`item-group-container `
         + `orientation-${layout} `
         + `item-size-${itemSizeBound} `
+        + (singleSectionView ? 'single-section-view ' : '')
         + (this.colCount ? `col-count-${this.colCount} ` : '')"
       >
       <Section
@@ -49,12 +57,15 @@ import SettingsContainer from '@/components/Settings/SettingsContainer.vue';
 import Section from '@/components/LinkItems/Section.vue';
 import { searchTiles } from '@/utils/Search';
 import Defaults, { localStorageKeys, iconCdns } from '@/utils/defaults';
+import ErrorHandler from '@/utils/ErrorHandler';
+import BackIcon from '@/assets/interface-icons/back-arrow.svg';
 
 export default {
   name: 'home',
   components: {
     SettingsContainer,
     Section,
+    BackIcon,
   },
   data: () => ({
     searchValue: '',
@@ -74,6 +85,9 @@ export default {
     modalOpen() {
       return this.$store.state.modalOpen;
     },
+    singleSectionView() {
+      return this.findSingleSection(this.$store.getters.sections, this.$route.params.section);
+    },
     /* Get class for num columns, if specified by user */
     colCount() {
       let { colCount } = this.appConfig;
@@ -94,7 +108,7 @@ export default {
       return this.sections;
     },
     filteredTiles() {
-      const sections = this.allSections;
+      const sections = this.singleSectionView || this.allSections;
       return sections.filter((section) => this.filterTiles(section.items, this.searchValue));
     },
     /* Updates layout (when button clicked), and saves in local storage */
@@ -148,6 +162,19 @@ export default {
     updateModalVisibility(modalState) {
       this.$store.commit('SET_MODAL_OPEN', modalState);
     },
+    /* If on sub-route, and section exists, then return only that section */
+    findSingleSection: (allSectios, sectionTitle) => {
+      if (!sectionTitle) return undefined;
+      let sectionToReturn;
+      const parse = (section) => section.replace(' ', '-').toLowerCase().trim();
+      allSectios.forEach((section) => {
+        if (parse(sectionTitle) === parse(section.name)) {
+          sectionToReturn = [section];
+        }
+      });
+      if (!sectionToReturn) ErrorHandler(`No section named '${sectionTitle}' was found`);
+      return sectionToReturn;
+    },
     /* Returns an array of links to external CSS from the Config */
     getExternalCSSLinks() {
       const availibleThemes = {};
@@ -245,6 +272,16 @@ export default {
   min-height: calc(99.9vh - var(--footer-height));
 }
 
+.back-to-all-link {
+  display: flex;
+  align-items: center;
+  padding: 0.25rem;
+  margin: 0.25rem;
+  @extend .svg-button;
+  svg { margin-right: 0.5rem; }
+  text-decoration: none;
+}
+
 /* Outside container wrapping the item groups*/
 .item-group-container {
   display: grid;
@@ -269,7 +306,7 @@ export default {
       flex-direction: row;
     }
   }
-  &.orientation-horizontal, &.orientation-vertical {
+  &.orientation-horizontal, &.orientation-vertical, &.single-section-view {
     @include phone { --content-max-width: 100%; }
     @include tablet { --content-max-width: 98%; }
     @include laptop { --content-max-width: 90%; }
@@ -302,6 +339,11 @@ export default {
 
   /* Hide when search term returns nothing */
   .no-results { display: none; }
+
+  /* When in single-section view mode */
+  &.single-section-view {
+    display: block;
+  }
 }
 
 /* Custom styles only applied when there is no sections in config */