random-web-tools/src/components/Sidebar.vue

<template>
  <header class="flex justify-between mx-2 mt-1">
    <span class="font-bold">Tools</span>
    <router-link :to="{ name: 'home' }" class="ml-4" tag="button"
      >Home</router-link
    >
  </header>

  <hr class="mt-2 mb-2" />

  <nav class="flex flex-col ml-2">
    <div
      v-for="[title, routes] of Object.entries(menuRoutes).sort((a, b) =>
        a[0].localeCompare(b[0])
      )"
      class="flex flex-col mb-2"
    >
      <p>
        <i>{{ title }}</i>
      </p>
      <router-link
        v-for="[key, value] of Object.entries(routes)"
        :to="{ name: key }"
        class="ml-4"
        tag="button"
        >{{ value }}</router-link
      >
    </div>

    <hr class="mt-3 mb-3" />

    <div class="flex flex-col mb-2">
      <p><i>Other</i></p>
      <a
        href="https://gist.stuzer.link/stuzer05/liked"
        class="ml-4"
        tag="button"
        >Gist</a
      >
      <a href="https://cyberchef.tools.stuzer.link/" class="ml-4" tag="button"
        >Cyberchef</a
      >
      <a href="https://pdf.tools.stuzer.link/" class="ml-4" tag="button"
        >PDF tools</a
      >
    </div>
  </nav>
</template>

<script>
import { useToolsStore } from "@/stores/toolsStore";

export default {
  name: "Sidebar",
  components: {},
  data() {
    return {
      menuRoutes: {},
    };
  },
  mounted() {
    this.menuRoutes = useToolsStore().tools;
  },
};
</script>