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

<template>
	<header class="flex">
		<span class="my-auto ml-2 font-bold">Tools</span>
	</header>

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

  <nav class="flex flex-col ml-2">
    <div v-for="[title, routes] of Object.entries(menuRoutes)" 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>
  </nav>
</template>

<script>

export default {
  name: "Sidebar",
  components: {},
  data() {
    return {
      menuRoutes: {},
    };
  },
  mounted() {
    let menuRoutes = {
      'General': {
        'home': 'Home',
        'explain_crontab': 'Explain crontab',
      },
      'Strings': {
        'fix_ru_en_keyboard': 'Fix ru-en keyboard',
        'str_length': 'Str length',
        'str_sort_lines': 'Str sort lines',
        'str_to_lower_upper': 'Str to lower/upper',
        'str_remove_duplicate_lines': 'Str remove duplicate lines',
        'url_encode_decode': 'URL encode/decode',
      },
      'PHP': {
        'str_to_php_array': 'Str to PHP array',
        'php_array_to_json': 'PHP array to Json',
      },
      'SQL': {
        'sql_formatter': 'SQL formatter',
        'sql_split_in': 'SQL split IN',
      },
    };

    this.menuRoutes = menuRoutes;
  }
}
</script>