From 55a840ae35081cdbb7543f64b59ebaf9476f2421 Mon Sep 17 00:00:00 2001
From: Luca Beltrame <lbeltrame@kde.org>
Date: Sat, 9 Jan 2021 15:26:00 +0100
Subject: [PATCH] First attempt at using a hamburger menu on mobile

---
 config.toml                           |  2 +-
 layouts/partials/site-navigation.html | 10 ++-
 static/css/hamburger.css              | 94 +++++++++++++++++++++++++++
 static/css/isso.css                   | 11 ++++
 4 files changed, 113 insertions(+), 4 deletions(-)
 create mode 100644 static/css/hamburger.css

diff --git a/config.toml b/config.toml
index 32335e8..f0e0a6e 100644
--- a/config.toml
+++ b/config.toml
@@ -76,7 +76,7 @@ enableRobotsTXT = true
   disable_share = true
   body_classes = "sans-serif bg-near-white"
   commentoEnable = true
-  custom_css = ["css/isso.css", "css/leafbox.css", "css/baguetteBox.css"]
+  custom_css = ["css/isso.css", "css/baguetteBox.css", "css/hamburger.css"]
 
 [privacy]
   [privacy.googleAnalytics]
diff --git a/layouts/partials/site-navigation.html b/layouts/partials/site-navigation.html
index 565d99d..2d12749 100644
--- a/layouts/partials/site-navigation.html
+++ b/layouts/partials/site-navigation.html
@@ -1,16 +1,18 @@
 <nav class="pv3 ph3 ph4-ns {{ .Site.Params.navigation_dimming_class | default "bg-black-50" }}" role="navigation">
   <div class="flex-l justify-between items-center center b">
-    <a href="{{ .Site.Home.RelPermalink }}" class="f3 fw4 hover-white no-underline white-90 dib">
+    <a href="{{ .Site.Home.RelPermalink }}" class="site-logo f3 fw4 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 fw4" href="{{ .URL }}" title="{{ .Name }} page">
@@ -20,7 +22,9 @@
           {{ end }}
         </ul>
       {{ end }}
+       <div class="top-social-container">
       {{ partialCached "social-follow.html" . }}
+      </div>
     </div>
   </div>
 </nav>
diff --git a/static/css/hamburger.css b/static/css/hamburger.css
new file mode 100644
index 0000000..f78ce0b
--- /dev/null
+++ b/static/css/hamburger.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; }
+}
diff --git a/static/css/isso.css b/static/css/isso.css
index 259880b..f11bffa 100644
--- a/static/css/isso.css
+++ b/static/css/isso.css
@@ -74,3 +74,14 @@
     background-repeat:no-repeat;
     background-size:contain !important;
 }
+
+.menu {
+    min-height: 2.8rem; /* no way to control min height in Tachyons */
+    max-height: 0; /* hide menu completely when burger unchecked */
+    transition: max-height 0.5s; /* show/hide menu transition */
+  }
+
+  /* when checkbox is checked, display menu (sibling element) */
+#burger:checked ~ .menu {
+    max-height: 100%;
+  }