feat: mobile navigation kebab menu + toggle

Author: samharp

_includes/header.njk

@@ -1,13 +1,25 @@
 <header class="material-shadow">
   <nav class="" data-au="flex-container justify-right">
-    <div class="nav-item-container">
-      <a class="nav-item" href="#projects">Past Projects</a>
+    
+    <div class="nav-items-group show-on-mobile-only">
+      <div class="nav-item-container icon-link-container">
+        <a class="nav-item icon-link" data-trigger-menu-nav aria-label="Menu (icon)">&vellip;</a>
+      </div>
     </div>
-    <div class="nav-item-container">
-      <a class="nav-item" href="/now">Current Projects</a>
-    </div>
-    <div class="nav-item-container">
-      <a class="nav-item" href="#contact">Contact &amp; More</a>
+
+    <div id="main-nav-items-container" class="nav-items-group hide-on-mobile-only" data-trigger-menu-nav-items>
+      <div id="main-nav-items" class="" data-au="flex-container justify-right">
+        <div class="nav-item-container">
+          <a class="nav-item" href="#projects">Past Projects</a>
+        </div>
+        <div class="nav-item-container">
+          <a class="nav-item" href="/now">Current Projects</a>
+        </div>
+        <div class="nav-item-container">
+          <a class="nav-item" href="#contact">Contact &amp; More</a>
+        </div>
+      </div>
+      
     </div>
   </nav>
 </header>

css/general-styles.css

@@ -187,6 +187,7 @@ a[href].item-category-badge:active{
 	display:inline-block;
 	cursor: pointer;
 	font-size: 2rem;
+	opacity:1;
   line-height: calc(100% + 2px);
 	top:0;
 	transform:scale(1);
@@ -198,7 +199,7 @@ a[href].item-category-badge:active{
 	width:70px;
 	height:70px;
 }
-@media (hover: hover) and (pointer: fine) {
+@media (hover: hover) and (pointer: fine) and (min-width:750px) {
   .icon-link:hover{
     top:-15px;
     transform:scale(1.05);
@@ -207,6 +208,7 @@ a[href].item-category-badge:active{
 }
 .icon-link:active{
   transform:scale(1);
+	opacity:.8;
 }
 /*icon link tooltips shown on icon hover*/
 .icon-link-tooltip{
@@ -314,6 +316,27 @@ svg{
 	display:none;
 	opacity:0;
 }
+/* contextual hiding */
+@media only screen and (max-width:750px){
+	.hide-on-mobile-only{
+		display:none;
+	}
+	.show-on-mobile-only{
+		display:block;
+	}
+}
+@media only screen and (min-width:750px){
+	.hide-on-mobile-only{
+		display:block;
+	}
+	.show-on-mobile-only{
+		display:none;
+	}
+}
+.show{
+	display:block!important;
+}
+
 .highlighter-container{
 	display:inline-block;
 	position:relative;

css/header-styles.css

@@ -9,25 +9,42 @@ header{
   /* backdrop-filter: blur(10px) opacity(50%); */
 }
 header nav{
-  padding:25px;
+  padding:25px 5rem;
   max-width:1200px;
   margin:0 auto;
   font-size:14px;
   gap:25px;
 }
+#main-nav-items-container{
+  width:100%;
+}
+#main-nav-items{
+  gap:25px;
+}
 
 /* mobile nav */
-@media (max-width: 500px) {
+@media (max-width: 750px) {
   header nav{
+    padding:15px 1rem;
     flex-wrap: wrap;
-    gap:15px;
+  }
+  #main-nav-items{
+    flex-wrap: wrap;
+    gap:25px;
+    padding-bottom:80vh;
+  }
+  #main-nav-items-container .nav-item-container{
+    width:100%;
   }
 }
 
+/* item container hover animation */
 header .nav-item-container{
   transform:scale(1);
   transition: transform .15s;
 }
-.nav-item-container:hover{
-  transform:scale(1.05);
+@media (hover: hover) and (pointer: fine) and (min-width:750px) {
+  .nav-item-container:hover{
+    transform:scale(1.05);
+  }
 }

css/section-styles.css

@@ -2,7 +2,8 @@
 section{
   max-width:1200px;
   margin:0 auto;
-  padding:4rem 40px;
+  /* padding:4rem 40px; */
+  padding:5rem;
   overflow:hidden;
 }
 section.full-section{
@@ -51,7 +52,8 @@ section:nth-child(odd) .item-images-container{
 /*standard mobile styles*/
 @media only screen and (max-width:750px){
   section{
-    padding:25px;
+    /* padding:25px; */
+    padding: 4rem 1rem;
   }
 }
 /*tablet sizing*/

js/projects-scripts.js

@@ -57,10 +57,9 @@ window.addEventListener("load", function(){
     });
   }
 
-  function showPhotoSection(){
-    itemsContainer.classList.add("show-photo");
-  }
-
+  // function showPhotoSection(){
+  //   itemsContainer.classList.add("show-photo");
+  // }
   ///////////////
 
 }, false);

js/shared-scripts.js

@@ -8,7 +8,16 @@ window.addEventListener("load", function(){
   var copyrightSpan = document.getElementById("copyright-year");
 
   copyrightSpan.appendChild(document.createTextNode(currentYear));
-  
-  
-  }, false);
+
+
+  // on click, open/close mobile nav menu
+  const navMenuTrigger = document.querySelector("[data-trigger-menu-nav]");
+  const navItemsContainer = document.querySelector("[data-trigger-menu-nav-items]");
+  // #main-nav-items-container
+
+  navMenuTrigger.addEventListener("click", function(){
+    navItemsContainer.classList.toggle("show");
+  });
+
+}, false);