Implement sticky navigation; fix mobile behaviour

author: Leonardo Faria <leonardofaria@gmail.com> 2020-04-26 20:07:37 +0300
committer: Leonardo Faria <leonardofaria@gmail.com> 2020-04-26 20:07:37 +0300
commit: 1ef44affbfc6b5f25ebbd91b890fe59b31be6040 (patch)
tree: b3e428b75c87f484e65585a30b33d3cab7869257
parent: f7863537b5834ed84be2b087fce293b0b70cf132 (diff)
5 files changed, 41 insertions, 17 deletions
diff --git a/layouts/_default/archives.html b/layouts/_default/archives.html
index 7330806..ff6a145 100644
--- a/layouts/_default/archives.html
+++ b/layouts/_default/archives.html
@@ -3,7 +3,7 @@
   {{- partial "head.html" . -}}
   <body class="bg-gray-50 flex flex-col min-h-screen">
     {{- partial "header.html" . -}}
-    <main class="flex-1 mt-12 max-w-3xl mx-auto text-gray-700 w-full">
+    <main class="flex-1 mt-12 max-w-3xl mt-32 mx-auto text-gray-700 w-full">
       <article class="article">
         <h1 class="artitle__title"><a href="{{.Permalink}}">{{ .Title }}</a></h1>
 
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 7fbb29f..f58b6f7 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -3,7 +3,7 @@
   {{- partial "head.html" . -}}
   <body class="bg-gray-50 flex flex-col min-h-screen">
     {{- partial "header.html" . -}}
-    <main class="flex-1 mt-12 max-w-3xl mx-auto text-gray-700 w-full">
+    <main class="flex-1 mt-12 max-w-3xl mt-32 mx-auto text-gray-700 w-full">
     {{- block "main" . }}{{- end }}
     </main>
     {{- partial "footer.html" . -}}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index bf7db22..0ec17be 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -26,9 +26,31 @@
 <script>
 window.onscroll = function() {
   const speed = -3;
-  const header = document.querySelector('.header');
+  const header = document.querySelector('#header');
   header.style.backgroundPosition = (-window.pageXOffset/speed)+"px "+(-window.pageYOffset/speed)+"px";
 }
 </script>
+{{else}}
+<script>
+let scrollpos = window.scrollY;
+const header = document.querySelector('#header');
+const headerContainer = document.querySelector("#header-container");
+
+const addClassOnScroll = () => {
+  header.classList.add("shadow");
+  header.classList.add("bg-white");
+}
+const removeClassOnScroll = () => {
+  header.classList.remove("shadow");
+  header.classList.remove("bg-white");
+}
+
+window.onscroll = function() {
+  scrollpos = window.scrollY;
+
+  if (scrollpos > 0) { addClassOnScroll() }
+  else { removeClassOnScroll() }
+}
+</script>
 {{end}}
 {{ template "_internal/google_analytics.html" . }}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index cfc91ae..056f350 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,17 +1,19 @@
 {{if and (.Site.Params.cover) (.IsHome)}}
   {{if or (eq (substr .Site.Params.cover 0 7) "http://") (eq (substr .Site.Params.cover 0 8) "https://")}}
-    <header class="header flex w-full m-0 bg-cover bg-top-center" style="background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.55)), url({{.Site.Params.cover}})">
+    <header id="header" class="header flex w-full m-0 bg-cover bg-top-center" style="background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.55)), url({{.Site.Params.cover}})">
   {{ else }}
-    <header class="header flex w-full m-0 bg-cover bg-top-center" style="background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.55)), url({{.Site.Params.cover | relURL}})">
+    <header id="header" class="header flex w-full m-0 bg-cover bg-top-center" style="background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.55)), url({{.Site.Params.cover | relURL}})">
   {{ end }}
     <div class="max-w-7xl mx-auto p-6 flex flex-col items-center w-full relative">
-      <div class="block lg:hidden text-white self-end mx-3">
+      <div class="block lg:hidden text-white self-end mx-2">
         {{ partial "nav-menu-buttons.html" . }}
       </div>
 
-      <nav id="nav-menu" class="absolute right-8 top-10 lg:relative lg:right-0 lg:top-0 hidden lg:block self-end text-white">
-        {{ partial "nav-links.html" . }}
-      </nav>
+      <div id="nav-menu" class="absolute right-8 top-16 lg:relative lg:right-0 lg:top-0 hidden lg:block self-end text-white rounded-md bg-black shadow lg:bg-transparent lg:shadow-none">
+        <nav class="p-2 lg:p-0">
+          {{ partial "nav-links.html" . }}
+        </nav>
+      </div>
 
       <div class="flex-grow mt-5 w-full flex flex-col justify-center items-center">
         {{if .Site.Params.avatar}}
@@ -32,9 +34,9 @@
     </div>
   </header>
 {{else}}
-  <header class="w-full m-0">
-    <div class="max-w-7xl mx-auto p-6 flex items-center flex-wrap lg:flex-no-wrap relative">
-      <a href="{{ .Site.Home.Permalink }}" class="text-3xl font-normal text-gray-600 flex flex-shrink-0 flex-grow">
+  <header id="header" class="w-full m-0 fixed z-1 transition duration-300 ease-in-out">
+    <div id="header-container" class="max-w-7xl mx-auto p-6 flex items-center flex-wrap lg:flex-no-wrap relative">
+      <a href="{{ .Site.Home.Permalink }}" class="leading-10 text-3xl font-normal text-gray-600 flex flex-shrink-0 flex-grow">
         {{ .Site.Title }}
       </a>
 
@@ -42,12 +44,12 @@
         {{ partial "nav-menu-buttons.html" . }}
       </div>
 
-      <div class="absolute right-8 top-16 lg:relative lg:right-0 lg:top-0 flex items-center">
-        <nav id="nav-social-links" class="text-gray-400 hidden lg:block lg:order-last w-full lg:w-auto lg:ml-3">
+      <div class="absolute right-8 top-16 lg:relative lg:right-0 lg:top-0 flex flex-col lg:flex-row items-center rounded-md bg-white shadow lg:bg-transparent lg:shadow-none">
+        <nav id="nav-social-links" class="p-4 lg:p-0 text-gray-400 hidden lg:block lg:order-last w-full lg:w-auto lg:ml-3">
           {{ partial "nav-social-links.html" . }}
         </nav>
 
-        <nav id="nav-menu" class="hidden lg:block w-full lg:w-auto text-gray-400">
+        <nav id="nav-menu" class="p-4 lg:p-0 hidden lg:block w-full lg:w-auto text-gray-400">
           {{ partial "nav-links.html" . }}
         </nav>
       </div>
diff --git a/layouts/partials/nav-links.html b/layouts/partials/nav-links.html
index 6cc70fa..798a377 100644
--- a/layouts/partials/nav-links.html
+++ b/layouts/partials/nav-links.html
@@ -1,7 +1,7 @@
-<ul class="w-full flex flex-col lg:flex-row justify-end items-end lg:items-center mt-3 lg:mt-0">
+<ul class="w-full flex flex-col lg:flex-row justify-end items-end lg:items-center">
   {{ range .Site.Menus.main.ByWeight }}
     <li class="flex my-2 lg:my-2 mx-1 lg:mx-2">
-      <a title="{{ .Name }}" class="border py-2 px-3 rounded text-sm" href="{{ .URL }}">{{ .Name }}</a>
+      <a title="{{ .Name }}" class="lg:border lg:py-2 lg:px-3 rounded text-sm" href="{{ .URL }}">{{ .Name }}</a>
     </li>
   {{ end }}
 </ul>
author	Leonardo Faria <leonardofaria@gmail.com>	2020-04-26 20:07:37 +0300
committer	Leonardo Faria <leonardofaria@gmail.com>	2020-04-26 20:07:37 +0300
commit	1ef44affbfc6b5f25ebbd91b890fe59b31be6040 (patch)
tree	b3e428b75c87f484e65585a30b33d3cab7869257
parent	f7863537b5834ed84be2b087fce293b0b70cf132 (diff)