feat: added components

layouts/default.vue

@@ -17,6 +17,8 @@
         </div>
       </div>
 
+      <SearchBar class="hidden-sm-and-up" />
+
       <v-list>
         <div v-for="(items, section) in toolRoutesSections" :key="section">
           <v-subheader class="mt-4 pl-4">
@@ -26,13 +28,15 @@
           <v-list-item
             v-for="(item, i) in items"
             :key="i"
-            :to="items.path"
+            :to="item.path"
             router
             exact
             dense
           >
             <v-list-item-action>
-              <v-icon>{{ item.config.icon }}</v-icon>
+              <v-icon color="primary">
+                {{ item.config.icon }}
+              </v-icon>
             </v-list-item-action>
             <v-list-item-content>
               <v-list-item-title v-text="item.config.title" />
@@ -48,8 +52,24 @@
       height="60px"
     >
       <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
-      <v-toolbar-title v-if="!drawer" v-text="title" />
+      <v-toolbar-title>
+        <NuxtLink to="/" class="title">
+          {{ title }}
+        </NuxtLink>
+      </v-toolbar-title>
       <v-spacer />
+      <SearchBar class="hidden-sm-and-down" />
+      <v-spacer />
+
+      <NuxtLink to="/how-to-report-bug-or-request">
+        Bug / Request
+      </NuxtLink>
+      <NuxtLink to="/about">
+        About
+      </NuxtLink>
+      <a href="https://github.com/CorentinTh/it-tools" target="_blank" class="github-link">
+        <v-icon>mdi-github</v-icon>
+      </a>
     </v-app-bar>
 
     <v-main>
@@ -57,25 +77,27 @@
         <nuxt />
       </v-container>
     </v-main>
-    <!--    <v-footer app>-->
-    <!--      <span>&copy; {{ new Date().getFullYear() }}</span>-->
-    <!--    </v-footer>-->
+    <!--<v-footer app>-->
+    <!--  <span>&copy; {{ new Date().getFullYear() }}</span>-->
+    <!--</v-footer>-->
   </v-app>
 </template>
 
 <script lang="ts">
 import {Component, mixins} from 'nuxt-property-decorator'
-import {ToolRoutes} from '~/mixins/tool-routes'
+import {ToolRoutesMixin} from '~/mixins/tool-routes.mixin'
 import LogoOutlined from '~/assets/logo-outlined.svg?inline'
 import HeroGradient from '~/assets/small-hero-gradient.svg?inline'
+import SearchBar from '~/components/SearchBar.vue'
 
 @Component({
   components: {
     LogoOutlined,
-    HeroGradient
+    HeroGradient,
+    SearchBar
   }
 })
-export default class DefaultLayout extends mixins(ToolRoutes) {
+export default class DefaultLayout extends mixins(ToolRoutesMixin) {
   title = 'IT - Tools'
   drawer = false
   items = []
@@ -84,6 +106,40 @@ export default class DefaultLayout extends mixins(ToolRoutes) {
 
 <style lang="less">
 
+.v-toolbar__content {
+  a {
+    color: #ffffff;
+    text-decoration: none;
+    transition: all ease 0.2s;
+    margin: 0 10px;
+    opacity: 0.5;
+    font-size: 15px;
+
+    &.title{
+      opacity: 1;
+    }
+
+    &:hover {
+      opacity: 1;
+      color: var(--v-primary-base);
+    }
+  }
+
+  .github-link {
+    border-bottom: none;
+    margin-left: 10px;
+    transition: all ease 0.2s;
+
+    .v-icon {
+      font-size: 37px !important;
+      color: var(--v-primary-base);
+      transition: all ease 0.2s;
+      transition: all ease 0.2s;
+
+    }
+  }
+}
+
 .small-hero {
   position: relative;
 
@@ -96,18 +152,26 @@ export default class DefaultLayout extends mixins(ToolRoutes) {
     width: 100%;
 
     .small-hero-content-logo {
-      width: 30%;
+      width: 25%;
       margin: 0 auto;
     }
 
     .small-hero-content-title {
-      font-size: 30px;
+      margin-top: 10px;
+      font-size: 25px;
       font-weight: 600;
       font-family: Ubuntu, Roboto, sans-serif;
     }
   }
 }
 
+.v-navigation-drawer__content{
+  .v-list-item--active{
+    color: var(--v-anchor-base);
+    border-left: 3px solid var(--v-primary-base);
+  }
+}
+
 .v-application {
   background-color: var(--v-background-base, #121212) !important;
 }