<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">
    <router-link v-for="[key, value] of Object.entries(menuRoutes)" :to="{name:key}" tag="button">{{ value }}</router-link>
  </nav>
</template>

<script>
export default {
	name: "Sidebar",
	components: {},
  data() {
    return {
      menuRoutes: {
        'home': 'Home',
        'sql_split_in': 'SQL split IN',
        'str_to_upper': 'Str to upper',
        'str_to_lower': 'Str to lower',
      },
    };
  },
  mounted() {

  }
}
</script>