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

44 lines
950 B
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',
},
'Strings': {
'fix_ru_en_keyboard': 'Fix ru-en keyboard',
'str_length': 'Str length',
'str_to_lower_upper': 'Str to lower/upper',
},
'SQL': {
'sql_split_in': 'SQL split IN',
},
};
this.menuRoutes = menuRoutes;
}
}
</script>