From 724b8e2fe299a043e311d3b08063860d784ce8d0 Mon Sep 17 00:00:00 2001
From: Gabriele Musco <gabmus@disroot.org>
Date: Sun, 18 Apr 2021 13:04:19 +0200
Subject: [PATCH] added option for mobile hamburger menu for main nav;
 searchbar on mobile stretches to full width; tweaked header items alignment

---
 README.md                    |   1 +
 assets/scss/style.scss       | 161 ++++++++++++++++++++++++-----------
 layouts/partials/header.html |  14 ++-
 3 files changed, 124 insertions(+), 52 deletions(-)

diff --git a/README.md b/README.md
index 429fc89..f53f412 100644
--- a/README.md
+++ b/README.md
@@ -55,6 +55,7 @@ summaryLength = 70  # number of words for article summaries
     enableSearch = true  # enable search page
     searchbarEverywhere = true  # if the searchbar should be shown in every page; requires enableSearch
     searchMenuLink = false  # add a search link to the navigation menu; requires enableSearch
+    mobileHamburgerNav = false  # alternative hamburger menu layout for the main nav menu when screen is small
 
     enableFeatured = false  # enable a particular view for articles marked as featured (featured: true in the article frontmatter)
 
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 58dc919..07b572c 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -69,56 +69,6 @@ footer {
     }
 }
 
-#titleContainer {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    align-items: center;
-
-    h1 {
-        font-weight: normal;
-        font-size: 1.6em;
-        margin: 0;
-    }
-
-    img {
-        margin-right: 10px;
-        width: 50px;
-        max-height: 50px;
-        border-radius: 5px;
-    }
-}
-
-nav, #links {
-    ul {
-        list-style-type: none;
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        padding: 0;
-        margin: 0;
-    }
-}
-
-nav {
-    font-size: .9em;
-    ul {
-        li {
-            border-right: 1px solid $accent_color;
-            &:last-child {
-                border-right: none;
-            }
-            a {
-                padding: 2px 20px;
-                color: $accent_color;
-                &:hover {
-                    text-decoration: underline;
-                }
-            }
-        }
-    }
-}
-
 #links {
     padding: 5px 0 40px 0;
 }
@@ -216,6 +166,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .nerdlink {
+    transition: all .15s ease-in-out;
     @extend .nerd;
     color: $fg_color;
     border-bottom: none;
@@ -226,6 +177,7 @@ h1, h2, h3, h4, h5, h6 {
     align-items: center;
     justify-content: center;
     .pseudofont {
+        transition: all .15s ease-in-out;
         fill: $fg_color;
         display: inline;
         position: relative;
@@ -384,7 +336,11 @@ ul.list {
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: space-between;
+    #titleContainer {
+        flex-grow: 99;
+    }
     .search {
+        flex-grow: 1;
         &, #searchbar {font-size: 1em;}
     }
 }
@@ -440,3 +396,108 @@ ul.list {
         @extend .featuredCard;
     }
 }
+
+#titleContainer {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: flex-start;
+    align-self: flex-start;
+
+    h1 {
+        font-weight: normal;
+        font-size: 1.6em;
+        margin: 0;
+    }
+
+    img {
+        margin-right: 10px;
+        margin-top: 7px;
+        align-self: flex-start;
+        width: 50px;
+        max-height: 50px;
+        border-radius: 5px;
+    }
+}
+
+nav, #links {
+    ul {
+        list-style-type: none;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        padding: 0;
+        margin: 0;
+    }
+}
+
+header {
+    .titleAndHamburger {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-items: flex-start;
+        align-self: flex-start
+    }
+    nav {
+        font-size: .9em;
+        ul {
+            li {
+                border-right: 1px solid $accent_color;
+                &:last-child {
+                    border-right: none;
+                }
+                a {
+                    padding: 2px 20px;
+                    color: $accent_color;
+                    &:hover {
+                        text-decoration: underline;
+                    }
+                }
+            }
+        }
+    }
+}
+
+{{ if .Site.Params.mobileHamburgerNav | default false }}
+header {
+    #hamburger-menu {
+        @extend .nerdlink;
+        display: none !important;
+    }
+    #main-nav-toggler {
+        display: none;
+    }
+}
+
+@media only screen and (max-width: 520px) {
+    header {
+        #hamburger-menu {
+            display: block !important;
+            font-size: 1.2rem;
+            cursor: pointer;
+            text-align: center;
+            margin: 0;
+            padding: 12px;
+            width: 35px;
+        }
+        nav {
+            ul#main-nav {
+                display: none;
+                flex-direction: column;
+                li {
+                    border-right: none !important;
+                    display: block;
+                    text-align: right;
+                    a {
+                        padding-left: 0;
+                    }
+                }
+            }
+            #main-nav-toggler:checked ~ #main-nav {
+                display: flex;
+            }
+        }
+    }
+}
+{{ end }}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index bf46a4d..d30c2eb 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -4,9 +4,19 @@
         <div id="titleContainer">
             <img src='{{ .Site.Params.Logo | default "/img/icon.svg" }}' />
             <div>
-                <h1>{{ .Site.Title | default "Ficurinia" }}</h1>
+                <div class="titleAndHamburger">
+                    <h1>{{ .Site.Title | default "Ficurinia" }}</h1>
+                    {{ if .Site.Params.mobileHamburgerNav | default false }}
+                        <label id="hamburger-menu" for="main-nav-toggler">
+                            &#xf85b;
+                        </label>
+                    {{ end }}
+                </div>
                 <nav>
-                    <ul>
+                    {{ if .Site.Params.mobileHamburgerNav | default false }}
+                        <input type="checkbox" id="main-nav-toggler" />
+                    {{ end }}
+                    <ul id="main-nav">
                         <li><a href="/">Home</a></li>
                         <li><a href="/posts">Posts</a></li>
                         {{ $pagesDir := .Site.Params.Pages | default (slice "pages") }}