From 0321a356e9cd033785b4602fa55235afcb0856d6 Mon Sep 17 00:00:00 2001
From: Lars Kruse <devel@sumpfralle.de>
Date: Fri, 12 Jun 2020 22:05:26 +0200
Subject: [PATCH] Add style for "hamburger" (3 bar) menu in mobile view

* add some IDs to elements of the main navigation
* add styles for mobile view (up to 768px wide) for collapsing the menu
  items into a "hamburger" menu

Closes: #166
---
 exampleSite/config.toml               |  2 +
 layouts/partials/site-navigation.html | 12 ++--
 static/dist/css/hamburger-menu.css    | 94 +++++++++++++++++++++++++++
 3 files changed, 104 insertions(+), 4 deletions(-)
 create mode 100644 static/dist/css/hamburger-menu.css

diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 9f83574..6fdba7c 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -35,3 +35,5 @@ enableRobotsTXT = true
   background_color_class = "bg-black"
   featured_image = "/images/gohugo-default-sample-hero-image.jpg"
   recent_posts_number = 2
+  # TODO: integrate into build procedure
+  custom_css = ["dist/css/hamburger-menu.css"]
diff --git a/layouts/partials/site-navigation.html b/layouts/partials/site-navigation.html
index d73c66d..b489910 100644
--- a/layouts/partials/site-navigation.html
+++ b/layouts/partials/site-navigation.html
@@ -1,16 +1,18 @@
 <nav class="pv3 ph3 ph4-ns" role="navigation">
   <div class="flex-l justify-between items-center center">
-    <a href="{{ .Site.Home.RelPermalink }}" class="f3 fw2 hover-white no-underline white-90 dib">
+    <a href="{{ .Site.Home.RelPermalink }}" class="site-logo f3 fw2 hover-white no-underline white-90 dib">
       {{ with .Site.Params.site_logo }}
         <img src="{{ . }}" class="w100 mw5-ns" alt="{{ $.Site.Title }}" />
       {{ else }}
         {{ .Site.Title }}
       {{ end }}
     </a>
-    <div class="flex-l items-center">
+    <div class="main-menu-container flex-l items-center">
       {{ partial "i18nlist.html" . }}
       {{ if .Site.Menus.main }}
-        <ul class="pl0 mr3">
+        <input class="main-menu-button" type="checkbox" id="main-menu-button" />
+        <label class="main-menu-label" for="main-menu-button"><span class="main-menu-icon"></span></label>
+        <ul class="main-menu-list" class="pl0 mr3">
           {{ range .Site.Menus.main }}
           <li class="list f5 f4-ns fw4 dib pr3">
             <a class="hover-white no-underline white-90" href="{{ .URL }}" title="{{ .Name }} page">
@@ -20,7 +22,9 @@
           {{ end }}
         </ul>
       {{ end }}
-      {{ partialCached "social-follow.html" . }}
+      <div class="top-social-container">
+        {{ partialCached "social-follow.html" . }}
+      </div>
     </div>
   </div>
 </nav>
diff --git a/static/dist/css/hamburger-menu.css b/static/dist/css/hamburger-menu.css
new file mode 100644
index 0000000..f78ce0b
--- /dev/null
+++ b/static/dist/css/hamburger-menu.css
@@ -0,0 +1,94 @@
+.main-menu-button {
+  display: none;
+}
+
+
+@media (max-width: 768px) {
+
+  /* hide social media links in mobile view */
+
+  .top-social-container {
+    display: none
+  }
+
+  /* menu */
+
+  .main-menu-list {
+    clear: both;
+    max-height: 0;
+    transition: max-height 0.2s ease-out;
+  }
+
+  /* menu icon: middle bar */
+
+  .main-menu-icon,
+  .main-menu-icon:before,
+  .main-menu-icon:after {
+    background: lightblue;
+    display: block;
+    width: 30px;
+    content: '';
+    transition-duration: 0.2s;
+    transition-timing-function: ease-out;
+  }
+
+  .main-menu-icon {
+    height: 3px;
+    position: relative;
+    transition-property: background;
+  }
+
+  /* menu icon: add one bar below and one above -> hamburger style */
+
+  .main-menu-icon:before,
+  .main-menu-icon:after {
+    height: 100%;
+    position: absolute;
+    transition-property: all;
+  }
+
+  .main-menu-icon:before { top: 10px; }
+  .main-menu-icon:after { top: -10px; }
+
+  /* limit the length of the menu item list */
+
+  .main-menu-button:checked ~ .main-menu-list {
+    max-height: 100%;
+  }
+
+  /* parallel -> crossing transition of hamburger menu icon */
+
+  .main-menu-button:checked ~ .main-menu-label .main-menu-icon { background: transparent; }
+  .main-menu-button:checked ~ .main-menu-label .main-menu-icon:before { transform: rotate(-45deg); }
+  .main-menu-button:checked ~ .main-menu-label .main-menu-icon:after { transform: rotate(45deg); }
+
+  .main-menu-button:checked ~ .main-menu-label:not(.steps) .main-menu-icon:before,
+  .main-menu-button:checked ~ .main-menu-label:not(.steps) .main-menu-icon:after {
+    top: 0;
+  }
+
+  .main-menu-label {
+    display: inline-block;
+    cursor: pointer;
+    float: right;
+    padding: 28px 20px;
+    position: relative;
+    user-select: none;
+  }
+
+  .main-menu-list {
+    overflow: hidden;
+  }
+
+  .main-menu-list li {
+    display: block;
+    text-align: right;
+    padding: 0.5rem;
+  }
+
+  /* reduce width of logo and place logo and hamburger menu on one line */
+
+  .site-logo { display: inline; }
+  .site-logo img { max-width: 70%; }
+  .main-menu-container { display: inline; }
+}