From 352a102a6afab9e70cd910488949d7e825dab2e3 Mon Sep 17 00:00:00 2001
From: Ben Visness <bvisness@gmail.com>
Date: Fri, 5 Jul 2024 12:15:32 -0500
Subject: [PATCH] Make navigation mobile-friendly

---
 public/style.css                           |  63 +++++++--
 src/rawdata/scss/header.css                |  56 ++++++--
 src/templates/img/menu.svg                 |   5 +
 src/templates/src/include/header-2024.html | 143 ++++++++++++---------
 src/templates/src/jams_index.html          |   2 +-
 src/templates/src/landing.html             |   2 +-
 6 files changed, 187 insertions(+), 84 deletions(-)
 create mode 100644 src/templates/img/menu.svg

diff --git a/public/style.css b/public/style.css
index 8e31abb5..a749e253 100644
--- a/public/style.css
+++ b/public/style.css
@@ -8290,6 +8290,7 @@ header {
   background-color: var(--bg-header);
   border-bottom-style: solid;
   border-bottom-width: var(--border-header);
+  position: relative;
 }
 header .hmn-logo {
   font-family: "MohaveHMN", sans-serif;
@@ -8306,10 +8307,39 @@ header .avatar {
   width: 1.8rem;
   height: 1.8rem;
 }
+header .header-nav {
+  position: absolute;
+  top: calc(100% + 1px);
+  left: 0;
+  width: 100%;
+  background-color: var(--bg-header);
+  z-index: 100;
+}
+@media screen and (min-width: 35em) {
+  header .header-nav {
+    display: flex;
+    flex-direction: column;
+    position: static;
+    width: auto;
+    flex-direction: row;
+    align-items: center;
+    background-color: none;
+  }
+}
 header .header-nav > a,
 header .header-nav > .root-item > a {
-  display: block;
   padding: var(--spacing-3);
+  border-bottom: var(--border-header) solid var(--border-color);
+}
+header .header-nav > a:not(.db),
+header .header-nav > .root-item > a:not(.db) {
+  display: block;
+}
+@media screen and (min-width: 35em) {
+  header .header-nav > a,
+  header .header-nav > .root-item > a {
+    border-bottom: none;
+  }
 }
 header .root-item {
   position: relative;
@@ -8317,22 +8347,33 @@ header .root-item {
 header .submenu {
   display: flex;
   flex-direction: column;
-  position: absolute;
-  z-index: 100;
-  min-width: 8rem;
-  background-color: var(--bg-header);
-  border-style: solid;
-  border-width: var(--border-header);
-  border-top-width: 0;
-  top: 100%;
+}
+@media screen and (min-width: 35em) {
+  header .submenu {
+    position: absolute;
+    z-index: 100;
+    min-width: 8rem;
+    background-color: var(--bg-header);
+    border-style: solid;
+    border-width: var(--border-header);
+    border-top-width: 0;
+    top: 100%;
+  }
 }
 header .submenu > a {
-  padding: var(--spacing-2) var(--spacing-3);
+  padding: var(--spacing-2) var(--spacing-3) var(--spacing-2) var(--spacing-4);
   display: block;
   white-space: nowrap;
   z-index: 1;
+  border-bottom: var(--border-header) solid var(--border-color);
 }
-header .root-item:not(:hover):not(.clicked) > .submenu {
+@media screen and (min-width: 35em) {
+  header .submenu > a {
+    padding: var(--spacing-2) var(--spacing-3);
+    border-bottom: none;
+  }
+}
+header .root-item:not(:hover):not(.clicked) .submenu {
   display: none;
 }
 header .root-item.clicked .svgicon {
diff --git a/src/rawdata/scss/header.css b/src/rawdata/scss/header.css
index b2a57251..9465b311 100644
--- a/src/rawdata/scss/header.css
+++ b/src/rawdata/scss/header.css
@@ -120,6 +120,7 @@ header {
   background-color: var(--bg-header);
   border-bottom-style: solid;
   border-bottom-width: var(--border-header);
+  position: relative;
 
   .hmn-logo {
     font-family: 'MohaveHMN', sans-serif;
@@ -141,11 +142,35 @@ header {
   }
 
   .header-nav {
+    position: absolute;
+    top: calc(100% + 1px);
+    left: 0;
+    width: 100%;
+    background-color: var(--bg-header);
+    z-index: 100;
+
+    @media screen and (min-width: 35em) {
+      display: flex;
+      flex-direction: column;
+      position: static;
+      width: auto;
+      flex-direction: row;
+      align-items: center;
+      background-color: none;
+    }
 
     >a,
     >.root-item>a {
-      display: block;
+      &:not(.db) {
+        display: block;
+      }
+
       padding: var(--spacing-3);
+      border-bottom: var(--border-header) solid var(--border-color);
+
+      @media screen and (min-width: 35em) {
+        border-bottom: none;
+      }
     }
   }
 
@@ -156,25 +181,34 @@ header {
   .submenu {
     display: flex;
     flex-direction: column;
-    position: absolute;
-    z-index: 100;
-    min-width: 8rem;
-    background-color: var(--bg-header);
-    border-style: solid;
-    border-width: var(--border-header);
-    border-top-width: 0;
-    top: 100%;
+
+    @media screen and (min-width: 35em) {
+      position: absolute;
+      z-index: 100;
+      min-width: 8rem;
+      background-color: var(--bg-header);
+      border-style: solid;
+      border-width: var(--border-header);
+      border-top-width: 0;
+      top: 100%;
+    }
 
     >a {
-      padding: var(--spacing-2) var(--spacing-3);
+      padding: var(--spacing-2) var(--spacing-3) var(--spacing-2) var(--spacing-4);
       display: block;
       white-space: nowrap;
       z-index: 1;
+      border-bottom: var(--border-header) solid var(--border-color);
+
+      @media screen and (min-width: 35em) {
+        padding: var(--spacing-2) var(--spacing-3);
+        border-bottom: none;
+      }
     }
   }
 
   .root-item {
-    &:not(:hover):not(.clicked)>.submenu {
+    &:not(:hover):not(.clicked) .submenu {
       display: none;
     }
 
diff --git a/src/templates/img/menu.svg b/src/templates/img/menu.svg
new file mode 100644
index 00000000..d1c74bff
--- /dev/null
+++ b/src/templates/img/menu.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-3,-4)">
+        <path d="M3,4L21,4L21,6L3,6L3,4ZM3,11L21,11L21,13L3,13L3,11ZM3,18L21,18L21,20L3,20L3,18Z" style="fill-rule:nonzero;"/>
+    </g>
+</svg>
diff --git a/src/templates/src/include/header-2024.html b/src/templates/src/include/header-2024.html
index d94fb2cc..400953c5 100644
--- a/src/templates/src/include/header-2024.html
+++ b/src/templates/src/include/header-2024.html
@@ -1,11 +1,11 @@
 <header id="site-header" class="flex flex-row items-stretch link-normal">
-	<a href="{{ .Header.HMNHomepageUrl }}" class="hmn-logo flex-shrink-0">
-		Handmade
-	</a>
-	<div class="flex-grow-1 flex-shrink-1"></div>
-	<div class="header-nav flex flex-row items-center lh-solid f6">
-		<a href="{{ .Header.ProjectIndexUrl }}">Projects</a>
-		<a href="{{ .Header.JamsUrl }}">Jams</a>
+    <a href="{{ .Header.HMNHomepageUrl }}" class="hmn-logo flex-shrink-0">
+        Handmade
+    </a>
+    <div class="flex-grow-1 flex-shrink-1"></div>
+    <div class="header-nav lh-solid f6 dn" id="header_nav">
+        <a href="{{ .Header.ProjectIndexUrl }}">Projects</a>
+        <a href="{{ .Header.JamsUrl }}">Jams</a>
         <div class="root-item">
             <a aria-expanded="false" aria-controls="events-submenu" class="menu-dropdown-js" href="#">
                 Events <div class="menu-chevron svgicon-lite">{{ svg "chevron-down" }}</div>
@@ -17,7 +17,7 @@
         </div>
         <div class="root-item">
             <a aria-expanded="false" aria-controls="resource-submenu" class="menu-dropdown-js" href="#">
-              Resources <div class="menu-chevron svgicon-lite">{{ svg "chevron-down" }}</div>
+                Resources <div class="menu-chevron svgicon-lite">{{ svg "chevron-down" }}</div>
             </a>
             <div class="submenu" id="resource-submenu">
                 <a href="{{ .Header.ForumsUrl }}">Forums</a>
@@ -29,7 +29,7 @@
                 <a href="https://guide.handmadehero.org/hmcon/">HandmadeCon</a>
             </div>
         </div>
-		<div class="root-item">
+        <div class="root-item">
             <a aria-expanded="false" aria-controls="about-submenu" class="menu-dropdown-js" href="#">
                 About <div class="menu-chevron svgicon-lite">{{ svg "chevron-down" }}</div>
             </a>
@@ -38,67 +38,84 @@
                 <a href="{{ .Header.AboutUrl }}">About the Team</a>
             </div>
         </div>
-	</div>
-    <div class="root-item f6">
-        <a class="db {{ if .User }}pv2 ph3{{ else }}pa3{{ end }} lh-solid flex f6 {{ if not .User }}bl{{ end }}" href="{{ or .Header.UserProfileUrl .LoginPageUrl }}">
+        <div class="root-item db dn-ns">
+            <a aria-expanded="false" aria-controls="profile-submenu" class="menu-dropdown-js" href="#">
+                User <div class="menu-chevron svgicon-lite">{{ svg "chevron-down" }}</div>
+            </a>
+            <div class="submenu" id="profile-submenu-mobile">
+                <a href="{{ .Header.UserProfileUrl }}">Profile</a>
+                <a href="{{ .Header.UserSettingsUrl }}">Settings</a>
+            </div>
+        </div>
+        <a class="db dn-ns" href="{{ .Header.LogoutUrl }}">Log Out</a>
+    </div>
+    <div class="root-item f6 {{ if not .User }}bl-ns{{ end }} flex items-stretch">
+        <a class="db pl3 pr2 pr3-ns lh-solid flex items-center" href="{{ or .Header.UserProfileUrl .LoginPageUrl }}">
             {{ with .User }}
-                <img class="avatar avatar-user" src="{{ .AvatarUrl }}">
+            <img class="avatar avatar-user" src="{{ .AvatarUrl }}">
             {{ else }}
-                Log In
+            Log In
             {{ end }}
         </a>
+        <a class="pl2 pr3 flex dn-ns items-center" href="#" id="mobile_menu">
+            {{ svg "menu" }}
+        </a>
         {{ if .User }}
+        <div class="dn db-ns">
             <div class="submenu right-0" id="profile-submenu">
                 <a href="{{ .Header.UserProfileUrl }}">Profile</a>
                 <a href="{{ .Header.UserSettingsUrl }}">Settings</a>
                 <a href="{{ .Header.LogoutUrl }}">Log Out</a>
             </div>
+        </div>
         {{ end }}
     </div>
 </header>
 {{ if and .Header.BannerEvent (not .Header.SuppressBanners) }}
-    {{ with .Header.BannerEvent }}
-        {{ if eq .Slug "VJ2024" }}
-            <a
-                class="db tc pv2 link-normal c-white"
-                style="background: linear-gradient(to bottom right, #20dddd, #007178)"
-                href="{{ .Url }}"
-            >
-                <b>Visibility Jam.</b>
-                July 19-21, 2024.
-                {{ if gt .DaysUntilEnd 0 }}
-                    {{ if eq .DaysUntilStart 0 }}
-                        <b>Happening now.</b>
-                    {{ else if eq .DaysUntilStart 1 }}
-                        <b>Starting tomorrow.</b>
-                    {{ else }}
-                        <b>In {{ .DaysUntilStart }} days.</b>
-                    {{ end }}
-                {{ else }}
-                    <b>See the results.</b>
-                {{ end }}
-            </a>
-        {{ end }}
-    {{ end }}
+{{ with .Header.BannerEvent }}
+{{ if eq .Slug "VJ2024" }}
+<a
+class="db tc pv2 link-normal c-white"
+style="background: linear-gradient(to bottom right, #20dddd, #007178)"
+href="{{ .Url }}"
+>
+<b>Visibility Jam.</b>
+July 19-21, 2024.
+{{ if gt .DaysUntilEnd 0 }}
+{{ if eq .DaysUntilStart 0 }}
+<b>Happening now.</b>
+{{ else if eq .DaysUntilStart 1 }}
+<b>Starting tomorrow.</b>
+{{ else }}
+<b>In {{ .DaysUntilStart }} days.</b>
+{{ end }}
+{{ else }}
+<b>See the results.</b>
+{{ end }}
+</a>
+{{ end }}
+{{ end }}
 {{ end }}
 
 <script type="text/javascript">
     document.addEventListener("DOMContentLoaded", function() {
-        const header = document.querySelector('#site-header');
-
+        const header = document.querySelector("#site-header");
+        const headerNav = document.querySelector("#header_nav");
+        const mobileMenuButton = document.querySelector("#mobile_menu");
+        
         // set up dropdown stuff for mobile / touch
         {
             const rootItems = header.querySelectorAll('.root-item');
-
+            
             function clearDropdowns() {
                 for (const item of rootItems) {
                     item.classList.remove('clicked');
                 }
             }
-
+            
             function clickDropdown(el) {
                 header.classList.add('clicked');
-
+                
                 if (el.classList.contains('clicked')) {
                     clearDropdowns();
                 } else {
@@ -106,7 +123,7 @@
                     el.classList.add('clicked');
                 }
             }
-
+            
             for (const item of rootItems) {
                 if (item.querySelector('.submenu')) {
                     item.addEventListener('click', e => {
@@ -116,27 +133,33 @@
                 }
             }
         }
-
+        
         // dropdown accessiblity 
         { 
-          const dropdowns = document.querySelectorAll('.menu-dropdown-js');
-          
-          for(let i = 0; i < dropdowns.length; i++) {
+            const dropdowns = document.querySelectorAll('.menu-dropdown-js');
+            
+            for(let i = 0; i < dropdowns.length; i++) {
                 let dropdown = dropdowns[i];
                 dropdown.addEventListener('click', e => {
-                e.preventDefault();
-                for(let j = 0; j < dropdowns.length; j++){
-                  let each = dropdowns[j];
-                  if(each != dropdown){
-                    each.setAttribute("aria-expanded", false);
-                  }
-                }
-                // getAttribute returns a string so we have to do it this way
-                var toSetTo = dropdown.getAttribute("aria-expanded") == "false" ? "true" : "false"; 
-                dropdown.setAttribute("aria-expanded", toSetTo);
-                console.log(dropdown);
-            }); 
-          }
+                    e.preventDefault();
+                    for(let j = 0; j < dropdowns.length; j++){
+                        let each = dropdowns[j];
+                        if(each != dropdown){
+                            each.setAttribute("aria-expanded", false);
+                        }
+                    }
+                    // getAttribute returns a string so we have to do it this way
+                    var toSetTo = dropdown.getAttribute("aria-expanded") == "false" ? "true" : "false"; 
+                    dropdown.setAttribute("aria-expanded", toSetTo);
+                    console.log(dropdown);
+                }); 
+            }
         }
+
+        mobileMenuButton.addEventListener("click", e => {
+            e.preventDefault();
+            e.stopPropagation();
+            headerNav.classList.toggle("dn");
+        });
     });
 </script>
diff --git a/src/templates/src/jams_index.html b/src/templates/src/jams_index.html
index f299d4ee..ac523a6c 100644
--- a/src/templates/src/jams_index.html
+++ b/src/templates/src/jams_index.html
@@ -18,7 +18,7 @@
     <div class="jam-grid g3">
         <a href="{{ .VJ2024Url }}">
             <div class="overflow-hidden flex">
-                <img src="{{ static "visjam2024/2024VJTwitterCard.png" }}">
+                <img src="{{ static "visjam2024/TwitterCard.png" }}">
             </div>
         </a>
         <a href="{{ .LJ2024Url }}">
diff --git a/src/templates/src/landing.html b/src/templates/src/landing.html
index d6d093ae..94f1f81d 100644
--- a/src/templates/src/landing.html
+++ b/src/templates/src/landing.html
@@ -85,7 +85,7 @@
 <div class="flex justify-center pa3">
 	<div class="w-100 mw-site flex g3">
 		<!-- Sidebar -->
-		<div class="w5 flex flex-column g2 flex-shrink-0">
+		<div class="w5 dn flex-ns flex-column g2 flex-shrink-0">
 			{{ if .User }}
 				<div class="sidebar-card bg3 link-normal">
 					<div onclick="collapse(event)" class="pa3 flex justify-between items-center pointer">