feat: component base

layouts/default.vue

@@ -5,34 +5,40 @@
       fixed
       app
     >
-      <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis corporis cumque dolore esse eveniet
-        exercitationem explicabo ipsa libero necessitatibus numquam optio pariatur, perferendis placeat porro ullam vel
-        velit voluptas voluptates?
+      <div class="small-hero">
+        <HeroGradient />
+        <div class="small-hero-content">
+          <div class="small-hero-content-logo">
+            <LogoOutlined />
+          </div>
+          <div class="small-hero-content-title">
+            {{ title }}
+          </div>
+        </div>
       </div>
 
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
-        <path fill="#eee" fill-opacity="1"
-              d="M0,160L26.7,133.3C53.3,107,107,53,160,58.7C213.3,64,267,128,320,176C373.3,224,427,256,480,250.7C533.3,245,587,203,640,186.7C693.3,171,747,181,800,186.7C853.3,192,907,192,960,186.7C1013.3,181,1067,171,1120,176C1173.3,181,1227,203,1280,192C1333.3,181,1387,139,1413,117.3L1440,96L1440,0L1413.3,0C1386.7,0,1333,0,1280,0C1226.7,0,1173,0,1120,0C1066.7,0,1013,0,960,0C906.7,0,853,0,800,0C746.7,0,693,0,640,0C586.7,0,533,0,480,0C426.7,0,373,0,320,0C266.7,0,213,0,160,0C106.7,0,53,0,27,0L0,0Z"></path>
-        <path fill="#05e677" fill-opacity="1"
-              d="M0,224L26.7,218.7C53.3,213,107,203,160,213.3C213.3,224,267,256,320,266.7C373.3,277,427,267,480,256C533.3,245,587,235,640,208C693.3,181,747,139,800,106.7C853.3,75,907,53,960,69.3C1013.3,85,1067,139,1120,181.3C1173.3,224,1227,256,1280,266.7C1333.3,277,1387,267,1413,261.3L1440,256L1440,0L1413.3,0C1386.7,0,1333,0,1280,0C1226.7,0,1173,0,1120,0C1066.7,0,1013,0,960,0C906.7,0,853,0,800,0C746.7,0,693,0,640,0C586.7,0,533,0,480,0C426.7,0,373,0,320,0C266.7,0,213,0,160,0C106.7,0,53,0,27,0L0,0Z"></path>
-      </svg>
-
       <v-list>
-        <v-list-item
-          v-for="(item, i) in items"
-          :key="i"
-          :to="item.to"
-          router
-          exact
-          dense
-        >
-          <v-list-item-action>
-            <v-icon>{{ item.icon }}</v-icon>
-          </v-list-item-action>
-          <v-list-item-content>
-            <v-list-item-title v-text="item.title"/>
-          </v-list-item-content>
-        </v-list-item>
+        <div v-for="(items, section) in toolRoutesSections" :key="section">
+          <v-subheader class="mt-4 pl-4">
+            {{ section }}
+          </v-subheader>
+
+          <v-list-item
+            v-for="(item, i) in items"
+            :key="i"
+            :to="items.path"
+            router
+            exact
+            dense
+          >
+            <v-list-item-action>
+              <v-icon>{{ item.config.icon }}</v-icon>
+            </v-list-item-action>
+            <v-list-item-content>
+              <v-list-item-title v-text="item.config.title" />
+            </v-list-item-content>
+          </v-list-item>
+        </div>
       </v-list>
     </v-navigation-drawer>
 
@@ -41,14 +47,14 @@
       flat
       height="60px"
     >
-      <v-app-bar-nav-icon @click.stop="drawer = !drawer"/>
-      <v-toolbar-title v-text="title"/>
-      <v-spacer/>
+      <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
+      <v-toolbar-title v-if="!drawer" v-text="title" />
+      <v-spacer />
     </v-app-bar>
 
     <v-main>
       <v-container>
-        <nuxt/>
+        <nuxt />
       </v-container>
     </v-main>
     <!--    <v-footer app>-->
@@ -58,42 +64,63 @@
 </template>
 
 <script lang="ts">
-import {Component, Vue} from 'nuxt-property-decorator';
+import {Component, mixins} from 'nuxt-property-decorator'
+import {ToolRoutes} from '~/mixins/tool-routes'
+import LogoOutlined from '~/assets/logo-outlined.svg?inline'
+import HeroGradient from '~/assets/small-hero-gradient.svg?inline'
 
-@Component
-export default class DefaultLayout extends Vue {
+@Component({
+  components: {
+    LogoOutlined,
+    HeroGradient
+  }
+})
+export default class DefaultLayout extends mixins(ToolRoutes) {
   title = 'IT - Tools'
   drawer = false
-  items = [
-    {
-      icon: 'mdi-apps',
-      title: 'Welcome',
-      to: '/'
-    },
-    {
-      icon: 'mdi-apps',
-      title: 'Token generator',
-      to: '/crypto/TokenGenerator'
-    },
-    {
-      icon: 'mdi-chart-bubble',
-      title: 'Inspire',
-      to: '/inspire'
-    }
-  ]
-
-  created() {
-
-  }
+  items = []
 }
 </script>
 
 <style lang="less">
 
+.small-hero {
+  position: relative;
+
+  .small-hero-content {
+    padding-top: 30px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    text-align: center;
+    width: 100%;
+
+    .small-hero-content-logo {
+      width: 30%;
+      margin: 0 auto;
+    }
+
+    .small-hero-content-title {
+      font-size: 30px;
+      font-weight: 600;
+      font-family: Ubuntu, Roboto, sans-serif;
+    }
+  }
+}
+
 .v-application {
   background-color: var(--v-background-base, #121212) !important;
 }
 
+.v-snack {
+  background: none !important;
+}
+
+.v-snack__content {
+  font-weight: bold !important;
+  color: #fff !important;
+}
+
 .theme--dark {
   .v-card,
   .v-footer,