✨ Updates view switcher to support multiple pages (#584)

src/components/Settings/ConfigLauncher.vue

@@ -25,24 +25,7 @@
     </modal>
 
     <!-- Menu for switching view -->
-    <div v-if="viewSwitcherOpen" class="view-switcher">
+    <ViewSwitcher v-if="viewSwitcherOpen" />
-      <ul>
-        <li>
-          <router-link to="/home">
-            <IconHome /><span>{{ $t('alternate-views.default') }}</span>
-          </router-link>
-        </li>
-        <li>
-          <router-link to="/minimal">
-            <IconMinimalView /><span>{{ $t('alternate-views.minimal') }}</span>
-          </router-link>
-        <li>
-          <router-link to="/workspace">
-            <IconWorkspaceView /><span>{{ $t('alternate-views.workspace') }}</span>
-          </router-link>
-        </li>
-      </ul>
-    </div>
   </div>
 </template>
 
@@ -52,13 +35,11 @@ import ConfigContainer from '@/components/Configuration/ConfigContainer';
 import LanguageSwitcher from '@/components/Settings/LanguageSwitcher';
 import Keys from '@/utils/StoreMutations';
 import { topLevelConfKeys, localStorageKeys, modalNames } from '@/utils/defaults';
+import ViewSwitcher from '@/components/Settings/ViewSwitcher';
 // Import icons for config launcher buttons
 import IconSpanner from '@/assets/interface-icons/config-editor.svg';
 import IconInteractiveEditor from '@/assets/interface-icons/interactive-editor-edit-mode.svg';
 import IconViewMode from '@/assets/interface-icons/application-change-view.svg';
-import IconHome from '@/assets/interface-icons/application-home.svg';
-import IconWorkspaceView from '@/assets/interface-icons/open-workspace.svg';
-import IconMinimalView from '@/assets/interface-icons/application-minimal.svg';
 
 export default {
   name: 'ConfigLauncher',
@@ -71,12 +52,10 @@ export default {
   components: {
     ConfigContainer,
     LanguageSwitcher,
+    ViewSwitcher,
     IconSpanner,
     IconInteractiveEditor,
     IconViewMode,
-    IconHome,
-    IconWorkspaceView,
-    IconMinimalView,
   },
   computed: {
     sections() {
@@ -149,37 +128,4 @@ export default {
   min-width: 3.2rem;
 }
 
-.view-switcher {
-  position: absolute;
-  right: 1rem;
-  margin-top: 3rem;
-  z-index: 5;
-  background: var(--background);
-  border: 1px solid var(--settings-text-color);
-  border-radius: var(--curve-factor);
-  box-shadow: var(--settings-container-shadow);
-  ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    li {
-      cursor: pointer;
-      padding: 0.25rem 0.75rem;
-      a {
-        color: var(--settings-text-color);
-        text-decoration: none;
-        display: flex;
-        align-items: center;
-      }
-      &:hover {
-        background: var(--settings-text-color);
-        a { color: var(--background); }
-      }
-      svg {
-        margin: 0 0.25rem 0 0;
-        border: none;
-      }
-    }
-  }
-}
 </style>

src/components/Settings/ViewSwitcher.vue

@@ -0,0 +1,77 @@
+<template>
+<div class="view-switcher">
+  <ul>
+    <li>
+      <router-link :to="`/home/${subPagePath}`">
+        <IconHome /><span>{{ $t('alternate-views.default') }}</span>
+      </router-link>
+    </li>
+    <li>
+      <router-link :to="`/minimal/${subPagePath}`">
+        <IconMinimalView /><span>{{ $t('alternate-views.minimal') }}</span>
+      </router-link>
+    <li>
+      <router-link :to="`/workspace/${subPagePath}`">
+        <IconWorkspaceView /><span>{{ $t('alternate-views.workspace') }}</span>
+      </router-link>
+    </li>
+  </ul>
+</div>
+</template>
+
+<script>
+import IconHome from '@/assets/interface-icons/application-home.svg';
+import IconWorkspaceView from '@/assets/interface-icons/open-workspace.svg';
+import IconMinimalView from '@/assets/interface-icons/application-minimal.svg';
+
+export default {
+  components: {
+    IconHome,
+    IconWorkspaceView,
+    IconMinimalView,
+  },
+  computed: {
+    subPagePath() {
+      return this.$route.path.split('/').pop() || '';
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+
+.view-switcher {
+  position: absolute;
+  right: 1rem;
+  margin-top: 3rem;
+  z-index: 5;
+  background: var(--background);
+  border: 1px solid var(--settings-text-color);
+  border-radius: var(--curve-factor);
+  box-shadow: var(--settings-container-shadow);
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    li {
+      cursor: pointer;
+      padding: 0.25rem 0.75rem;
+      a {
+        color: var(--settings-text-color);
+        text-decoration: none;
+        display: flex;
+        align-items: center;
+      }
+      &:hover {
+        background: var(--settings-text-color);
+        a { color: var(--background); }
+      }
+      svg {
+        margin: 0 0.5rem 0 0;
+        width: 1rem;
+        border: none;
+      }
+    }
+  }
+}
+</style>

src/utils/SectionHelpers.js

@@ -3,7 +3,15 @@
 import { hideFurnitureOn } from '@/utils/defaults';
 
 /* Returns false if page furniture should be hidden on said route */
-export const shouldBeVisible = (routeName) => !hideFurnitureOn.includes(routeName);
+export const shouldBeVisible = (routeName) => {
+  let shouldShow = true;
+  if (!routeName) return shouldShow; // Route name not specified.
+  hideFurnitureOn.forEach((hideOn) => {
+    // If route name on the no-show list, set visibility to false
+    if (routeName.includes(hideOn)) shouldShow = false;
+  });
+  return shouldShow;
+};
 
 /* Based on section title, item name and index, return a string value for ID */
 const makeItemId = (sectionStr, itemStr, index) => {