From 63fbad81b6472514d597c7cb5b2d428859ab8559 Mon Sep 17 00:00:00 2001
From: Damillora <developer@damillora.com>
Date: Wed, 11 Nov 2020 02:16:35 +0700
Subject: [PATCH] Miracle 2.0

---
 components/Header.vue  | 138 ++++++++++++++++++++++++-----------------
 components/NavItem.vue |   2 +-
 layouts/default.vue    |   7 ++-
 package.json           |   4 +-
 4 files changed, 89 insertions(+), 62 deletions(-)

diff --git a/components/Header.vue b/components/Header.vue
index 777a302..7e7b948 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -1,41 +1,49 @@
 <template>
-<div>
-  <div class="site-header">
+<div v-click-outside="menuHide">
+  <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">
-           <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 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="nav-menu">
+        </div>
+        <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: {
-    title() {
-      return this.$store.state.title;
-    }
+  data() {
+    return {
+      menu_shown: false,
+    };
   },
-  methods: {
-    goBack(event) {
-      if(event) event.preventDefault();
-      this.$router.back();
-    }
-  }
 }
 </script>
 
 <style>
 .site-header {
-  min-height: 300px;
-  height: 70vh;     
+  height: 4rem;
+  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 {
-    @apply flex flex-col
-  }
-}
-header:hover {
-    @apply bg-yuika-blue-700;
+.header-top {
+  @apply flex flex-row;
 }
 .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 {
-    @apply relative;
+#menushow {
+  @apply block cursor-pointer relative px-1 py-2 transition duration-300 ease-in-out;
 }
-.header-nav #menushow {
-  @apply cursor-pointer relative px-2 py-2 transition duration-300 ease-in-out;
-}
-.header-nav #menushow:hover  {
+#menushow:hover {
   @apply bg-yuika-blue-500;
 }
-.header-nav .nav-menu {
-  @apply hidden absolute right-0 bg-yuika-blue-700;
-  width: 100vw;
+.header-menu .nav-menu {
+  max-height: 0px;
+  @apply block transition-all duration-300 ease-in-out overflow-hidden;
 }
-.header-nav:hover .nav-menu {
-  @apply block;
+.header-menu .nav-menu.enabled {
+  max-height: 100vh;
 }
 @screen md {
-  header {
-    @apply flex flex-col
+  .header-menu .nav-menu {
+    max-height: 100vh;
+    margin-left: 3.5rem;
+    max-width: 0px;
   }
-  header:hover {
-    background-color: transparent;
-  }
-  .header-nav #menushow {
-    @apply py-0;
-  }
-  .header-nav .nav-menu {
-    @apply block relative w-full;
-    background-color: transparent;
+  .header-menu .nav-menu.enabled {
+    max-width: 100vw;
   }
 }
 
diff --git a/components/NavItem.vue b/components/NavItem.vue
index 877ed85..b75528a 100644
--- a/components/NavItem.vue
+++ b/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>
diff --git a/layouts/default.vue b/layouts/default.vue
index 5aceaed..732c790 100644
--- a/layouts/default.vue
+++ b/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 {
diff --git a/package.json b/package.json
index 2a4593c..5f57042 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "newhomepage",
-  "version": "1.1.0",
+  "name": "@damillora/miracle",
+  "version": "2.0.0",
   "description": "nanao.moe homepage, but in Vue",
   "author": "Damillora",
   "private": true,