Added drawers

Author: mugetsu

components/Drawer/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="drawer">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Drawer',
+  props: {
+    index: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      activeItem: this.index,
+      items: []
+    }
+  },
+  methods: {
+    changeItem(newIndex) {
+      if (this.activeItem === newIndex) return
+      this.items[this.activeItem].deactivate()
+      this.items[newIndex].activate()
+      this.activeItem = newIndex
+    }
+  },
+  mounted() {
+    if (this.items.length) {
+      this.items[this.activeItem].isActive = true
+    }
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+.drawer {
+  display: flex;
+  flex-direction: column;
+  height: 92vh;
+}
+</style>

components/DrawerItem/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <div
+    class="drawer-item"
+    :class="{
+      'is-active': isActive
+    }"
+    @click="onClick">
+    <h2 class="drawer-item-title">{{ title }}</h2>
+    <div class="drawer-item-content">
+      <slot/>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DrawerItem',
+  props: {
+    title: String
+  },
+  data() {
+    return {
+      isActive: false
+    }
+  },
+  methods: {
+    activate() {
+      this.isActive = true
+    },
+    deactivate() {
+      this.isActive = false
+    },
+    onClick() {
+      this.$parent.changeItem(this.$parent.items.indexOf(this))
+    }
+  },
+  created() {
+    this.$parent.items.push(this)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-item {
+  display: inline-block;
+  height: 8vh;
+  width: 100vw;
+  margin-bottom: -4px;
+  background-color: #343332;
+  box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.5);
+  transition: .5s ease;
+
+  &.is-active {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+  
+  .drawer-item-title,
+  .drawer-item-content {
+    padding: 0 24px;
+    white-space: nowrap;
+    color: #ffffff;
+  }
+
+  .drawer-item-title {
+    margin-top: 32px;
+    margin-bottom: 24px;
+    font-size: 42px;
+  }
+
+  .drawer-item-content {
+    height: 100%;
+    color: #f2f2f2;
+  }
+}
+</style>

components/Search/index.vue

@@ -47,6 +47,10 @@ body {
   background-color: rgba(18, 18, 18, 1);
 }
 
+p {
+  margin: 0;
+}
+
 .wrapper {
   min-height: 100vh;
   width: 100%;

layouts/default.vue

@@ -26,10 +26,7 @@ module.exports = {
     ],
     link: [
       { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap' },
-      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
-      { rel: 'preload', href: '/images/standby.png', as: 'image' },
-      { rel: 'preload', href: '/images/walk.png', as: 'image' },
-      { rel: 'preload', href: '/images/attack.png', as: 'image' }
+      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
     ]
   },