From 8f2affea9df59770cf90f5158e5c88cf0836a6bf Mon Sep 17 00:00:00 2001
From: Damillora <developer@damillora.com>
Date: Wed, 13 Nov 2019 18:50:52 +0700
Subject: [PATCH] Fixed navbar

---
 assets/css/styles.css     | 10 ++++++----
 assets/js/nav-collapse.js |  6 +-----
 author.hbs                |  2 +-
 index.hbs                 |  2 +-
 package.json              |  2 +-
 page.hbs                  |  2 +-
 partials/site-header.hbs  |  2 +-
 post.hbs                  |  2 +-
 tag.hbs                   |  2 +-
 9 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/assets/css/styles.css b/assets/css/styles.css
index a0ac1ec..2b9fffb 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -7,10 +7,13 @@
 html {
   @apply font-sans;
 }
-
-/* 2. Site Header */
 header {
-  @apply py-4 px-4 bg-yuika-blue-700;
+  @apply py-4 px-4;
+}
+/* 2. Site Header */
+.index-navbar {
+  z-index: 10;
+  @apply transition-bg;
 }
 .index-navbar header {
   background-color: transparent;
@@ -161,7 +164,6 @@ footer {
 }
 
 .nav-fixed {
-  z-index: 10;
   @apply bg-yuika-blue-700;
 }
 
diff --git a/assets/js/nav-collapse.js b/assets/js/nav-collapse.js
index 4a15f0d..8610707 100644
--- a/assets/js/nav-collapse.js
+++ b/assets/js/nav-collapse.js
@@ -31,14 +31,10 @@
             var progressMax = lastDocumentHeight - lastWindowHeight;
 
             // show/hide nav
-            if (lastScrollY >= trigger - 20) {
-                nav.classList.add('fixed');
+            if (lastScrollY >= nav.getBoundingClientRect().bottom) {
                 nav.classList.add('nav-fixed');
-                nav.classList.remove('absolute');
             } else {
-                nav.classList.remove('fixed');
                 nav.classList.remove('nav-fixed');
-                nav.classList.add('absolute');
             }
 
             ticking = false;
diff --git a/author.hbs b/author.hbs
index a68de18..acbab96 100644
--- a/author.hbs
+++ b/author.hbs
@@ -1,5 +1,6 @@
 {{!< default}}
 {{#author}}
+{{> "site-header"}}
 <div class="relative group index-header">
   {{> header-background background=cover_image}} {{!--Special header-image.hbs partial to generate the background image--}}
     <div class="h-full opacity-50 bg-black group-hover:opacity-75 transition-opacity">
@@ -45,7 +46,6 @@
     </div>
    </div>
   </div>
-  {{> "site-header"}}
 </div>
 {{/author}}
 
diff --git a/index.hbs b/index.hbs
index 05b8f74..3fb8967 100644
--- a/index.hbs
+++ b/index.hbs
@@ -1,10 +1,10 @@
 {{!< default}}
+{{> "site-header"}}
 <div class="h-64 relative group index-header">
   {{> header-background background=@site.cover_image}} {{!--Special header-image.hbs partial to generate the background image--}}
     <div class="w-full h-full opacity-50 bg-black group-hover:opacity-75 transition-opacity">
     </div>
   </div>
-  {{> "site-header"}}
 </div>
 <div class="flex flex-wrap justify-start post-feed content w-full px-4">
   {{#foreach posts}}
diff --git a/package.json b/package.json
index 5cf03d0..38f7a1d 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "yuika",
     "description": "nanao.moe's blog theme",
-    "version": "0.5.0",
+    "version": "0.6.0",
     "engines": {
         "ghost-api": "v3"
     },
diff --git a/page.hbs b/page.hbs
index 6931a7b..a45caa2 100644
--- a/page.hbs
+++ b/page.hbs
@@ -1,6 +1,7 @@
 {{!< default}}
 
 {{#post}}
+{{> "site-header"}}
 <div class="relative group index-header">
   {{> header-background background=feature_image}} {{!--Special header-image.hbs partial to generate the background image--}}
     <div class="h-full opacity-50 bg-black group-hover:opacity-75 transition-opacity">
@@ -13,7 +14,6 @@
     </div>
    </div>
   </div>
-  {{> "site-header"}}
 </div>
 
 <article class="post-article">
diff --git a/partials/site-header.hbs b/partials/site-header.hbs
index d26bf7f..1b66133 100644
--- a/partials/site-header.hbs
+++ b/partials/site-header.hbs
@@ -1,4 +1,4 @@
-  <div class="w-full flex flex-row justify-begin items-center absolute top-0 index-navbar">
+  <div class="w-full flex flex-row justify-begin items-center fixed index-navbar">
     <header class="flex flex-row py-2 flex-wrap w-full">
       {{#if @site.logo}}
       <div class="w-12 h-12">
diff --git a/post.hbs b/post.hbs
index f103727..1d5bf5e 100644
--- a/post.hbs
+++ b/post.hbs
@@ -1,6 +1,7 @@
 {{!< default}}
 
 {{#post}}
+{{> "site-header"}}
 <div class="relative group index-header">
   {{> header-background background=feature_image}} {{!--Special header-image.hbs partial to generate the background image--}}
     <div class="h-full opacity-50 bg-black group-hover:opacity-75 transition-opacity">
@@ -39,7 +40,6 @@
       </div>
    </div>
   </div>
-  {{> "site-header"}}
 </div>
 
 <article class="post-article">
diff --git a/tag.hbs b/tag.hbs
index 97bb290..20c6164 100644
--- a/tag.hbs
+++ b/tag.hbs
@@ -1,6 +1,7 @@
 {{!< default}}
 
 {{#tag}}
+{{> "site-header"}}
 <div class="relative group index-header">
   {{> header-background background=feature_image}} {{!--Special header-image.hbs partial to generate the background image--}}
     <div class="h-full opacity-50 bg-black group-hover:opacity-75 transition-opacity">
@@ -23,7 +24,6 @@
     </div>
    </div>
   </div>
-  {{> "site-header"}}
 </div>
 {{/tag}}