Refactor menu

src/components/Sidebar.vue

@@ -6,26 +6,38 @@
   <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>
+    <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: {
+      menuRoutes: {},
-        'home': 'Home',
-        'sql_split_in': 'SQL split IN',
-        'str_to_upper': 'Str to upper',
-        'str_to_lower': 'Str to lower',
-      },
     };
   },
   mounted() {
+    let menuRoutes = {
+      'General': {
+        'home': 'Home',
+      },
+      'Strings': {
+        'str_to_lower': 'Str to lower',
+        'str_to_upper': 'Str to upper',
+      },
+      'SQL': {
+        'sql_split_in': 'SQL split IN',
+      },
+    };
 
+    this.menuRoutes = menuRoutes;
   }
 }
 </script>