responsive nav bar, allproducts.json update

myogpatterns · myogpatterns · commit 986cf3b912dd · 2023-01-22T17:01:35.000-08:00
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -2183,23 +2183,30 @@ input, select, textarea {
 	}
 
 /* Nav */
-	#nav ul.links {
+	#nav ul {
 		display: flex;
 		flex: 1;
 		list-style: none;
 		justify-content: center;
 		margin: 0;
+		padding: 0;
 	}
-	#nav li {
+
+	#nav li.links {
 		display: inline-flex;
 		margin: 0;
 		background-color: inherit;
 		line-height: 1em;
 		cursor: pointer;
-		font-weight:400;
-		font-size:1rem;
+		/* font-weight:400; */
+		/* font-size:1rem; */
 		text-transform: uppercase;
 		font-family: "Source Sans Pro", Helvetica, sans-serif;
+		padding: 0;
+	}
+
+	#nav .menu{
+		display: none;
 	}
 	
 	#nav a {
@@ -2220,11 +2227,29 @@ input, select, textarea {
 
 	#nav li.active {
 		background-color: white;
+		border-bottom: transparent;
 	}
 	#nav li.active > a {
 		color: var(--primary);
 	}
 
+	@media screen and (max-width: 768px) {
+		#nav ul {
+			flex-direction: column-reverse;
+			padding: 0;
+		}
+		
+		#nav li.links { 
+			display: none;
+		}
+
+		#nav .menu {
+			display: flex;
+			flex-grow: 1;
+			justify-content: flex-end;
+		}
+	}
+
 /* Button */
 
 	input[type="submit"],
@@ -8999,7 +9024,7 @@ input, select, textarea {
 			box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.075);
 		}
 
-			#wrapper.divided > *:first-child {
+			#wrapper.divided > *:first-child, #main {
 				box-shadow: none !important;
 			}
 
diff --git a/assets/db/allproducts.json b/assets/db/allproducts.json
diff --git a/assets/js/util.js b/assets/js/util.js
@@ -641,4 +641,17 @@ function calculatorSetup (fn, version) {
 
 function getIsMetric (name = 'units') {
   return $('input[type=radio][name=' + name + ']:checked').val() === '1';      // inches (val=0) or cm (val=1)
+}
+
+/* Toggle between showing and hiding the navigation menu links when the user clicks on the hamburger menu / bar icon */
+function navCollapse() {
+	var elms = document.querySelectorAll("li.links");
+	
+	Array.from(elms).forEach((x) => {
+	if (x.style.display === "inline-flex") {
+		x.style.display = "none";
+	} else {
+		x.style.display = "inline-flex";
+	}
+})
 }
diff --git a/map.html b/map.html
@@ -44,21 +44,24 @@
 		</script>
 		<!-- Global site tag (gtag.js) - Google Analytics GA4 -->
 </head>
-<body class="is-preload">
+<body>
     <!-- Wrapper -->
-    <div id="wrapper" >
+    <div id="wrapper" class="divided">
 
         <!-- Banner -->
         <header-template></header-template>
 
         <section class="color8 invert align-center">
             <nav id="nav">
-                <ul class="links">
-                <li><a href="zerotohero.html">Getting Started</a></li>
-                <li><a href="index.html">Patterns</a></li>
-                <li><a href="fabrics.html">Pack Fabrics</a></li>
-                <li><a href="hardware.html">Parts Picker</a></li>
-                <li class="active"><a href="#">Supplier Map</a></li>
+                <ul >
+                <li class="links"><a href="zerotohero.html">Getting Started</a></li>
+                <li class="links"><a href="index.html">Patterns</a></li>
+                <li class="links"><a href="fabrics.html">Fabrics</a></li>
+                <li class="links"><a href="hardware.html">Hardware</a></li>
+                <li class="links active"><a href="#">MYOG Suppliers</a></li>
+                <li class="menu"><a href="javascript:void(0);" class="icon" onclick="navCollapse()">
+                    <i class="fa fa-bars"></i>
+                  </a></li>
                 </ul>
             </nav>
         </section>
