From 5346283419f792276c22dc4d4c4b1b2c6f357073 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=93scar=20N=C3=A1jera?= <hello@oscarnajera.com>
Date: Sun, 8 Jul 2018 23:38:03 +0200
Subject: Hide and show sidebar

---
 layouts/partials/head.html   | 12 ++++++++++++
 layouts/partials/header.html | 34 ++++++++++++++++++++--------------
 2 files changed, 32 insertions(+), 14 deletions(-)

(limited to 'layouts/partials')

diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index f061a00..45eb8db 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -14,6 +14,10 @@
 
 <!-- CSS -->
 <style>
+ #sidebar {
+     position:fixed;
+     z-index: 1;
+ }
  .post-header {
  text-shadow: 0 2px 1px rgba(0,0,0,0.9);}
 
@@ -22,3 +26,11 @@
      color: #dcdcdc;
      padding: 0.5em;}
 </style>
+<script>
+function w3_open() {
+    document.getElementById("sidebar").style.display = "block";
+}
+function w3_close() {
+    document.getElementById("sidebar").style.display = "none";
+}
+</script>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 83f724f..f989b8e 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -4,22 +4,11 @@
     {{ .Scratch.Set "authorPicture" (absURL .Site.Author.picture) }}
 {{ end }}
 
-<nav class="dt w-100 border-box pa2">
-
-    <i class="dtc dib v-mid dim fa fa-lg fa-bars"></i>
-
-    <a href="{{ "/" | relLangURL }}" class="dtc v-mid link dim tc">
-        <div class="f4 dib black-50">{{ .Site.Title }}</div>
-    </a>
-
-    {{ with ($.Scratch.Get "authorPicture") }}
-    <a href="/#about" class="dtc dim tr">
-        <img class="dib v-mid dib w2 h2 br-100" src="{{ . }}{{ if in . "//www.gravatar.com/avatar/" }}?s=90{{ end }}"/>
+<nav id="sidebar" class="w-25-ns bg-gray" style="display:none">
+    <a class="bg-black white link dim db pa3 tc pointer" onclick="w3_close()">
+        Close &times;
     </a>
-    {{ end }}
-</nav>
 
-<nav id="sidebar" class="w-25-ns ba">
     <div class="tc pv4">
         <a href="/#about" class="">
             {{ with ($.Scratch.Get "authorPicture") }}
@@ -40,3 +29,20 @@
         </li>
     </ul>
 </nav>
+
+<nav class="dt w-100 border-box pa2">
+
+    <a class="dtc dib v-mid dim " onclick="w3_open()">
+        <i class="fa fa-lg fa-bars"></i>
+    </a>
+
+    <a href="{{ "/" | relLangURL }}" class="dtc v-mid link dim tc">
+        <div class="f4 dib black-50">{{ .Site.Title }}</div>
+    </a>
+
+    {{ with ($.Scratch.Get "authorPicture") }}
+    <a href="/#about" class="dtc dim tr">
+        <img class="dib v-mid dib w2 h2 br-100" src="{{ . }}{{ if in . "//www.gravatar.com/avatar/" }}?s=90{{ end }}"/>
+    </a>
+    {{ end }}
+</nav>
-- 
cgit v1.2.3