Miracle 2.0

components/Header.vue

@@ -1,41 +1,49 @@
 <template>
-<div>
+<div v-click-outside="menuHide">
-  <div class="site-header">
+  <div :class="menu_shown ? ['site-header','enabled'] : ['site-header']">
+    <div :class="menu_shown ? ['site-background','enabled'] : ['site-background']"></div>
     <div class="site-header-inner">
       <header>
-        <div class="header-title">
+        <div class="header-top">
+          <a @click="menu_shown = !menu_shown" id="menushow">
+            <span class="h-12 w-12 px-3 py-3 text-white material-icons" alt="menu">menu</span>
+          </a>
+          <div class="header-title" @click="menu_shown = !menu_shown" >
             <nuxt-link to="/"><h1 class="text-lg text-white">Damillora</h1></nuxt-link>
           </div>
-        <div class="header-nav">
-          <div id="menushow" class="">
-            <span class="h-12 w-12 px-3 py-3 text-white md:hidden material-icons" alt="menu">menu</span>
         </div>
-          <div class="nav-menu">
+        <div class="header-menu">
+          <div :class="menu_shown ? ['nav-menu','enabled'] : ['nav-menu']">
             <NavItem
               link="/about"
               icon="person"
               text="About"
+              @click="menu_shown = !menu_shown"
               />
             <NavItem
               link="/projects"
               icon="work"
               text="Projects"
+              @click="menu_shown = !menu_shown" 
               />
             <NavItem
               link="/games"
               icon="videogame_asset"
               text="Game Profile"
+              @click="menu_shown = !menu_shown" 
               />
             <NavItem
               link="/links"
               icon="contacts"
               text="Links"
+              @click="menu_shown = !menu_shown" 
               />
             <NavItem
               link="//blog.nanao.moe"
               icon="rss_feed"
               text="Blog"
               external="true"
+              @click="menu_shown = !menu_shown"
               />
           </div>
         </div>
@@ -51,108 +59,122 @@ export default {
   components: {
     NavItem
   },
-  computed: {
+  data() {
-    title() {
+    return {
-      return this.$store.state.title;
+      menu_shown: false,
-    }
+    };
   },
-  methods: {
-    goBack(event) {
-      if(event) event.preventDefault();
-      this.$router.back();
-    }
-  }
 }
 </script>
 
 <style>
 .site-header {
-  min-height: 300px;
+  height: 4rem;
-  height: 70vh;     
+  width: 100vw;
+  overflow: hidden;
+  @apply fixed transition-all duration-300 ease-in-out;
+}
+.site-background {
+  z-index: -1;
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
   background-image: url('~assets/images/bg-sm.jpg');
   background-size: cover;
-  background-position: right 20% center;
+  background-position: right 25% top 20%;
+  @apply transition-all duration-300 ease-in-out;
+}
+.site-background {
+  top: -23vh;
+}
+.site-background.enabled {
+  top: 0;
+}
+@screen md {
+  .site-background {
+    top: 0;
+    right: -25vw;
+  }
+  .site-background.enabled {
+    top: 0;
+    right: 0;
+  }
+}
+.site-header.enabled {
+  height: 100vh;
+  width: 100vw;
 }
 @screen md {
   .site-header {
     @apply fixed;
     height: 100vh;
-    width: 25vw;
+    width: 3.5rem;
+  }
+  .site-header.enabled {
+    width: 100vw;
   }
 }
 @screen sm {
-    .site-header {
+    .site-background {
         background-image: url('~assets/images/bg-md.jpg');
     }
 }
 @screen md {
-    .site-header {
+    .site-background {
         background-image: url('~assets/images/bg-lg.jpg');
     }
 }
 @screen lg {
-    .site-header {
+    .site-background {
         background-image: url('~assets/images/bg-xl.jpg');
     }
 }
 @screen xl {
-    .site-header {
+    .site-background {
         background-image: url('~assets/images/bg-xxl.jpg');
     }
 }
 .site-header-inner {
+    z-index: 1;
     background: rgba(0,0,0,0.5);
     @apply w-full h-full;
 }
 header {
-    @apply flex flex-row transition duration-300 ease-in-out;
+    @apply flex flex-col transition duration-300 ease-in-out;
 }
-@screen md {
+.header-top {
-  header {
+  @apply flex flex-row;
-    @apply flex flex-col
-  }
-}
-header:hover {
-    @apply bg-yuika-blue-700;
 }
 .header-title {
     @apply flex-grow transition duration-300 ease-in-out;
 }
 .header-title a {
-    @apply flex flex-row items-center py-5 pl-4 w-full h-full; 
+    @apply flex flex-row items-center py-4 pl-4 w-full h-full; 
 }
 .header-title:hover {
     @apply bg-yuika-blue-500;
 }
-.header-nav {
+#menushow {
-    @apply relative;
+  @apply block cursor-pointer relative px-1 py-2 transition duration-300 ease-in-out;
 }
-.header-nav #menushow {
+#menushow:hover {
-  @apply cursor-pointer relative px-2 py-2 transition duration-300 ease-in-out;
-}
-.header-nav #menushow:hover  {
   @apply bg-yuika-blue-500;
 }
-.header-nav .nav-menu {
+.header-menu .nav-menu {
-  @apply hidden absolute right-0 bg-yuika-blue-700;
+  max-height: 0px;
-  width: 100vw;
+  @apply block transition-all duration-300 ease-in-out overflow-hidden;
 }
-.header-nav:hover .nav-menu {
+.header-menu .nav-menu.enabled {
-  @apply block;
+  max-height: 100vh;
 }
 @screen md {
-  header {
+  .header-menu .nav-menu {
-    @apply flex flex-col
+    max-height: 100vh;
+    margin-left: 3.5rem;
+    max-width: 0px;
   }
-  header:hover {
+  .header-menu .nav-menu.enabled {
-    background-color: transparent;
+    max-width: 100vw;
-  }
-  .header-nav #menushow {
-    @apply py-0;
-  }
-  .header-nav .nav-menu {
-    @apply block relative w-full;
-    background-color: transparent;
   }
 }
 

components/NavItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="getCurrentClasses()">
+  <div :class="getCurrentClasses()" @click="$emit('click')">
     <a :href="link" v-if="external">
       <i class="material-icons md-24">{{ icon }}</i>
       <p class="header-link">{{ text }}</p>

layouts/default.vue

@@ -38,12 +38,17 @@ export default {
 html {
     @apply font-sans;
 }
+.content {
+  @apply w-full;
+  padding-top: 4rem;
+}
 @screen md {
   .main {
     @apply flex flex-row; 
   }
   .content {
-    margin-left: 25vw;
+    padding-top: 0;
+    margin-left: 3.5rem;
   }
 }
 main {

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "newhomepage",
+  "name": "@damillora/miracle",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "nanao.moe homepage, but in Vue",
   "author": "Damillora",
   "private": true,