chore: added more advanced routing to elements

src/components/sections/StockSection.vue

@@ -1,46 +1,29 @@
 <template>
   <section class="stock-section">
     <div class="section_modes">
-      <button
-        v-for="(id, i) in sectionModes"
-        :key="id"
-        class="btn"
-        ref="sectionButtonRefs"
-        @click="chooseSection(id)"
-        :data-selected="store.stockSectionMode == id"
-      >
-        <span class="text--accent">{{ i + 1 }}.</span> {{ $t(`topbar.${id}`) }}
-        <span v-if="id == 'stock-list'">({{ store.stockList.length }})</span>
-      </button>
+      <router-link v-for="(route, i) in testRoutes" :key="route" class="link-btn" :to="`/${route}`">
+        <span class="text--accent">{{ i + 1 }}.</span> {{ $t(`topbar.${route}`) }}
+        <span v-if="route == 'stock-list'">({{ store.stockList.length }})</span>
+      </router-link>
     </div>
 
     <transition name="tab-change" mode="out-in">
       <keep-alive>
-        <component :is="chosenSectionComponent"></component>
+        <component :is="route.meta.viewMode"></component>
       </keep-alive>
     </transition>
   </section>
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, ref } from 'vue';
+import { onMounted } from 'vue';
 import { useStore } from '../../store';
-import StockListTab from '../tabs/StockListTab.vue';
-import StockGeneratorTab from '../tabs/StockGeneratorTab.vue';
-import NumberGeneratorTab from '../tabs/NumberGeneratorTab.vue';
-import WikiListTab from '../tabs/WikiListTab.vue';
-
-const sectionButtonRefs = ref([]);
+import { useRoute } from 'vue-router';
 
 const store = useStore();
-type SectionMode = typeof store.stockSectionMode;
+const route = useRoute();
 
-const sectionModes: SectionMode[] = [
-  'stock-list',
-  'wiki-list',
-  'number-generator',
-  'stock-generator',
-];
+const testRoutes = ['stock', 'wiki', 'numgen', 'stockgen'];
 
 onMounted(() => {
   window.addEventListener('keydown', (e) => {
@@ -49,34 +32,11 @@ onMounted(() => {
     if (/^[1234]$/.test(e.key)) {
       const keyNum = Number(e.key);
 
-      store.stockSectionMode = sectionModes[keyNum - 1];
-      (sectionButtonRefs.value[keyNum - 1] as HTMLButtonElement)?.focus();
+      // store.stockSectionMode = sectionModes[keyNum - 1];
+      // (sectionButtonRefs.value[keyNum - 1] as HTMLButtonElement)?.focus();
     }
   });
 });
-
-const chosenSectionComponent = computed(() => {
-  switch (store.stockSectionMode) {
-    case 'stock-list':
-      return StockListTab;
-
-    case 'wiki-list':
-      return WikiListTab;
-
-    case 'stock-generator':
-      return StockGeneratorTab;
-
-    case 'number-generator':
-      return NumberGeneratorTab;
-
-    default:
-      return StockListTab;
-  }
-});
-
-function chooseSection(sectionId: SectionMode) {
-  store.stockSectionMode = sectionId;
-}
 </script>
 
 <style lang="scss">
@@ -107,32 +67,15 @@ function chooseSection(sectionId: SectionMode) {
 .section_modes {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
+  padding: 1px;
 
   gap: 0.5em;
 
   margin-bottom: 1em;
+}
 
-  button {
-    position: relative;
-    border-radius: 0.5em 0.5em 0 0;
-
-    &::after {
-      position: absolute;
-      bottom: 0;
-      left: 50%;
-      transform: translateX(-50%);
-
-      content: '';
-      width: 0;
-      height: 2px;
-      transition: all 100ms;
-      background-color: $accentColor;
-    }
-
-    &[data-selected='true']::after {
-      width: 100%;
-    }
-  }
+a.router-link-active {
+  color: gold;
 }
 
 @media screen and (max-width: 650px) {