Add home page tiles

src/components/Sidebar.vue

@@ -1,12 +1,13 @@
 <template>
-	<header class="flex">
-		<span class="my-auto ml-2 font-bold">Tools</span>
+	<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)" class="flex flex-col mb-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>
@@ -15,7 +16,7 @@
 
     <div class="flex flex-col mb-2">
       <p><i>Other</i></p>
-      <a href="https://gist.stuzer.link/" class="ml-4" tag="button">Gist</a>
+      <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>
@@ -24,6 +25,8 @@
 
 <script>
 
+import { useToolsStore } from "@/stores/toolsStore";
+
 export default {
   name: "Sidebar",
   components: {},
@@ -33,54 +36,7 @@ export default {
     };
   },
   mounted() {
-    this.menuRoutes = {
-      'General': {
-        'home': 'Home',
-        'explain_crontab': 'Explain crontab',
-        'table_to_markdown_table': 'Table to Markdown table',
-        'table_to_mediawiki_table': 'Table to Mediawiki table',
-        'dummy_image': 'Dummy image',
-        'humans_txt': 'humans.txt generator',
-        'file_base64_encode_decode': 'File base64 encode/decode',
-        'qr_code': 'QR code',
-        'unix_timestamp': 'Unix timestamp',
-        'sed_generator': 'Sed generator',
-        'htaccess_generator': '.htaccess generator',
-      },
-      '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',
-        'str_pad': 'Str pad',
-        'str_numeronym': 'Str numeronym (i18n)',
-        'str_to_nato_alphabet': 'Str to NATO alphabet',
-        'url_encode_decode': 'URL encode/decode',
-        'url_query_viewer': 'URL query viewer',
-        'iban_generator': 'IBAN generator',
-      },
-      'PHP': {
-        'str_to_php_array': 'Str to PHP array',
-        'php_array_to_json': 'PHP array to Json',
-        'php_serialize': 'PHP serialize',
-      },
-      'Docker': {
-        'docker_rename_volume': 'Rename volume',
-      },
-      'GO': {
-        'go_json_to_struct': 'JSON to Go struct',
-        // 'sql_tables_to_struct': 'SQL tables Go struct',
-      },
-      'JSON': {
-        'json_minifier': 'JSON minifier',
-        'json_formatter': 'JSON formatter',
-      },
-      'SQL': {
-        'sql_formatter': 'SQL formatter',
-        'sql_split_in': 'SQL split IN',
-      },
-    };
+    this.menuRoutes = useToolsStore().tools;
   }
 }
 </script>