Add hamburger menu for smaller screens and mobile

2023-02-06 13:50:50 -08:00 · 2023-02-06 13:50:50 -08:00 · 5b0616cec4
commit 5b0616cec4
parent 3a68004925
21 changed files with 93 additions and 17 deletions
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@ -1,11 +1,12 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
    {{- partial "head.html" . -}}
    <body>
-        {{- partial "header.html" . -}}
+        {{- partial "header.html" . -}} <br>
        <div id="content">
        {{- block "main" . }}{{- end }}
        </div>
        {{- partial "footer.html" . -}}
+        <script src="/js/nav-toggle-mobile.js"></script>
    </body>
 </html>
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@ -1,10 +1,24 @@
 <div>
    <nav id="nav">
+        <div id="nav-toggle-mobile">
+            <i>
+                <svg style="fill: #FAFAFA; margin-left: 10px;" viewBox="0 0 100 80" width="40" height="40">
+                    <title>Hamburger menu button</title>
+                    <rect width="100" height="20"></rect>
+                    <rect y="30" width="100" height="20"></rect>
+                    <rect y="60" width="100" height="20"></rect>
+                </svg>
+            </i>
+        </div>
+        <ul id="nav-list">
        {{ range .Site.Menus.main }}
-        <a id="nav-button" href="{{ .URL }}">
-        {{ $text := print .Name | safeHTML }}
-        {{ $text }}
-        </a>
+        <li class="nav-li">
+            <a class="nav-button" href="{{ .URL }}">
+                {{ $text := print .Name | safeHTML }}
+                {{ $text }}
+            </a>
+        </li>
        {{ end }}
+        </ul>
    </nav>
 </div>
--- a/static/css/fonts/LiberationMono-Bold.ttf
+++ b/static/css/fonts/LiberationMono-Bold.ttf
--- a/static/css/fonts/LiberationMono-BoldItalic.ttf
+++ b/static/css/fonts/LiberationMono-BoldItalic.ttf
--- a/static/css/fonts/LiberationMono-Italic.ttf
+++ b/static/css/fonts/LiberationMono-Italic.ttf
--- a/static/css/fonts/LiberationMono-Regular.ttf
+++ b/static/css/fonts/LiberationMono-Regular.ttf
--- a/static/css/fonts/LiberationSans-Bold.ttf
+++ b/static/css/fonts/LiberationSans-Bold.ttf
--- a/static/css/fonts/LiberationSans-BoldItalic.ttf
+++ b/static/css/fonts/LiberationSans-BoldItalic.ttf
--- a/static/css/fonts/LiberationSans-Italic.ttf
+++ b/static/css/fonts/LiberationSans-Italic.ttf
--- a/static/css/fonts/LiberationSans-Regular.ttf
+++ b/static/css/fonts/LiberationSans-Regular.ttf
--- a/static/css/fonts/LiberationSerif-Bold.ttf
+++ b/static/css/fonts/LiberationSerif-Bold.ttf
--- a/static/css/fonts/LiberationSerif-BoldItalic.ttf
+++ b/static/css/fonts/LiberationSerif-BoldItalic.ttf
--- a/static/css/fonts/LiberationSerif-Italic.ttf
+++ b/static/css/fonts/LiberationSerif-Italic.ttf
--- a/static/css/fonts/LiberationSerif-Regular.ttf
+++ b/static/css/fonts/LiberationSerif-Regular.ttf
--- a/static/css/fonts/OpenDyslexic-Bold.otf
+++ b/static/css/fonts/OpenDyslexic-Bold.otf
--- a/static/css/fonts/OpenDyslexic-BoldItalic.otf
+++ b/static/css/fonts/OpenDyslexic-BoldItalic.otf
--- a/static/css/fonts/OpenDyslexic-Italic.otf
+++ b/static/css/fonts/OpenDyslexic-Italic.otf
--- a/static/css/fonts/OpenDyslexic-Regular.otf
+++ b/static/css/fonts/OpenDyslexic-Regular.otf
--- a/static/css/fonts/remingtonedtype.ttf
+++ b/static/css/fonts/remingtonedtype.ttf
--- a/static/css/style.css
+++ b/static/css/style.css
@ -93,23 +93,79 @@ footer {
 }

 #content {
-  margin-left: 15%;
-  margin-right: 15%;
+  margin-left: 30%;
+  margin-right: 10%;
 }

 /* For header.html */
 #nav {
-    background-color: #F14B25;
+    background-color: #A51D2D;
 }

-#nav-button {
-    color: #E7DBDA;
-    padding: 0px 25px;
+#nav-list {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    position: fixed;
+    overflow: auto;
+    width: 25%;
+    list-style-type: none;
+    background-color: #A51D2D;
+}
+
+.nav-button {
+    color: #FAFAFA;
+    padding: 0px 40px;
    text-decoration: none;
 }
+li:first-child {
+    padding: 0px;
+}

-#nav-button:hover {
-    transform: translateY(-2px);
+@media screen and (min-width: 769px) {
+    #nav-toggle-mobile {
+        display: none;
+    }
+}
+
+@media screen and (min-width: 1700px) {
+    #nav-list {
+        width: 17%;
+    }
+    #content {
+        margin-left: 20%;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    #content {
+        margin: 10%;
+    }
+    #nav-list {
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+    }
+    .nav-li {
+        padding-right: 8px;
+        float: left;
+        display: none;
+    }
+    .nav-li-show-mobile {
+        display: flex;
+    }
+    .nav-button {
+        display: block;
+        padding: 8px;
+    }
+    #nav-toggle-mobile {
+        align-self: flex-end;
+        display: flex;
+        cursor: pointer;
+    }
 }

 /* For author.html */
@ -118,9 +174,6 @@ footer {
    max-width: 200px;
    height: auto;
 }
-#pronouns {
-    color: #FF535D;
-}

 /* For meta.html */
 .meta {
--- a/static/js/nav-toggle-mobile.js
+++ b/static/js/nav-toggle-mobile.js
@ -0,0 +1,8 @@
+function classToggle() {
+    const navs = document.querySelectorAll('.nav-li')
+    
+    navs.forEach(nav => nav.classList.toggle('nav-li-show-mobile'));
+  }
+  
+  document.querySelector('#nav-toggle-mobile')
+    .addEventListener('click', classToggle);