feat: search bar

src/App.vue

@@ -43,6 +43,14 @@
             <v-toolbar-title class="mr-12 align-center">
                 <router-link to="/" class="title">IT Tools</router-link>
             </v-toolbar-title>
+
+            <v-spacer></v-spacer>
+            <v-row
+                    align="center"
+                    style="max-width: 650px"
+            >
+                <SearchBar />
+            </v-row>
             <v-spacer></v-spacer>
 
             <div class="right-links">
@@ -56,7 +64,7 @@
 
         <v-content>
             <v-row class="fill-height pa-4" justify="center" align="center" no-gutters>
-                    <router-view></router-view>
+                <router-view></router-view>
             </v-row>
         </v-content>
 
@@ -69,10 +77,13 @@
 </template>
 
 <script>
+    import SearchBar from "./components/SearchBar";
+
     export default {
         props: {
             source: String,
         },
+        components: {SearchBar},
         data: () => ({
             appVersion: 'v' + process.env.APPLICATION_VERSION,
             drawer: null,
@@ -106,15 +117,16 @@
 </script>
 
 <style lang="less">
-    html{
+    html {
         overflow-y: auto !important;
     }
+
     .single-card {
         width: 100%;
         max-width: 700px !important;
     }
 
-    .v-card__title{
+    .v-card__title {
         justify-content: center;
         font-size: 30px !important;
         line-height: 30px !important;

src/components/FileUploader.vue

@@ -11,7 +11,7 @@
     >
         <p>Drag & drop a file here</p>
         <p class="or">or</p>
-        <v-btn depressed>upload manually</v-btn>
+        <v-btn depressed>select a file</v-btn>
         <p class="or">or</p>
         <v-text-field outlined dense label="Paste an url to the file" hide-details></v-text-field>
     </div>

src/components/SearchBar.vue

@@ -0,0 +1,44 @@
+<template>
+    <v-autocomplete
+            label="Search..."
+            single-line
+            append-icon="fa-search"
+            color="white"
+            hide-details
+            :items="items"
+            item-text="component.name"
+            item-value="path"
+            solo-inverted
+            @change="choose"
+    >
+        <template v-slot:no-data>
+            <v-list-item>
+                <v-list-item-title>
+                    Search for the <strong>tool</strong> you need!
+                </v-list-item-title>
+            </v-list-item>
+        </template>
+    </v-autocomplete>
+</template>
+
+<script>
+
+    import {toolsRoutes} from '../router'
+
+    export default {
+        name: "SearchBar",
+        data(){
+            const vm = this;
+            return {
+                items:toolsRoutes,
+                choose(path){
+                    vm.$router.push(path)
+                }
+            }
+        },
+    }
+</script>
+
+<style scoped>
+
+</style>

src/router.js

@@ -9,11 +9,7 @@ import FileToBase64 from "./routes/tools/FileToBase64";
 
 Vue.use(VueRouter)
 
-const routes = [
+const toolsRoutes = [
-    {
-        path: '/',
-        component: Home
-    },
     {
         path: '/token-generator',
         component: TokenGenerator
@@ -33,6 +29,14 @@ const routes = [
     {
         path: '/file-to-base64',
         component: FileToBase64
+    }
+]
+
+const routes = [
+    ...toolsRoutes,
+    {
+        path: '/',
+        component: Home
     },
     {
         path: '/about',
@@ -45,6 +49,10 @@ const router = new VueRouter({
     mode: 'history',
     base: process.env.BASE_URL,
     routes
-})
+});
 
-export default router
+export default router;
+export {
+    routes,
+    toolsRoutes
+};