refactor: re-implement nav menu without javascript

inspired by https://github.com/paulcarl/skelepico-theme

themes/typing/layout/_partial/header.ejs

@@ -1,17 +1,21 @@
 <header id="header" class="header">
-    <div class="mobile-nav">
-      <h1 class="nickname"><%= theme.nickname %></h1>
-      <a id="menu">
-        &#9776; Menu
-      </a>
-    </div>
-    <% if (theme.nav === 'left') { %>
-        <nav id="main-nav" class="main-nav nav-left">
-    <% } else { %>
-        <nav id="main-nav" class="main-nav">
-    <% } %>
+  <%/* Nav menu for desktop */%>
+  <nav id="main-nav" class="main-nav <% if (theme.nav === 'left') { %>nav-left<% } %>">
     <% for (let i in theme.menu) { %>
       <a class="main-nav-link" href="<%- url_for(theme.menu[i]) %>"><%= i %></a>
     <% } %>
   </nav>
+  <%/* Nav menu for mobile */%>
+  <nav class="mobile-nav">
+    <h1 class="nickname"><%= theme.nickname %></h1>
+    <ul id="mobile-nav-menu">
+    <label for="menu-toggle"><a>&#9776; Menu</a></label>
+    <input type="checkbox" id="menu-toggle"/>
+    <ul id="menu">
+    <% for (let i in theme.menu) { %>
+      <a href="<%- url_for(theme.menu[i]) %>"><%= i %></a>
+    <% } %>
+    </ul>
+    </ul>
+  </nav>
 </header>

themes/typing/source/css/typing.css

@@ -1077,6 +1077,19 @@ pre .javascript .function,pre .keyword {
   color: #8959a8;
 }
 
+/* hide mobile nav menu and its checkbox */
+/* when it's not mobile */
+.mobile-nav,#menu-toggle,#menu{
+  display: none
+}
+
+/* align the text (in nav menu) to right */
+/* set line-height in /archives page */
+#mobile-nav-menu{
+  text-align: right;
+  line-height: 1.8
+}
+
 @media (max-width:768px) {
   body {
     font-size: 1.2em;
@@ -1098,20 +1111,27 @@ pre .javascript .function,pre .keyword {
     width: 80%;
   }
 
-  .nav-left {
-    position: relative;
-    left: auto;
-    text-align: initial;
-  }
-
-  .nav-left .main-nav-link {
-    display: inline-block;
-    padding-bottom: 5px;
-  }
-
   .header-hr-left {
     display: block;
   }
+
+  /* hide desktop nav */
+  .main-nav{
+    display:none
+  }
+
+  /* display mobile nav */
+  .mobile-nav{
+    display:flex;
+    align-items:center;
+    justify-content:space-between
+  }
+
+  /* display links when menu button is clicked */
+  /* use grid to display each link in new line */
+  #menu-toggle:checked + #menu{
+    display:grid
+  }
 }
 
 @media (max-width:468px) {
@@ -1134,36 +1154,6 @@ pre .javascript .function,pre .keyword {
   .archive-container .archive-article-header>a,.archive-container .archive-article-header>h1 {
     width: 100%;
   }
-
-  .mobile-nav {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  .main-nav {
-    display: none;
-    position: absolute;
-    background-color: #fff;
-    width: 50%;
-    padding: 20px;
-    border: 2px solid #777;
-    box-shadow: 5px 5px 5px #777;
-  }
-
-  .main-nav .main-nav-link {
-    display: block;
-    padding-bottom: 10px;
-  }
-
-  .article .nav-left {
-    position: absolute;
-  }
-
-  .article .nav-left .main-nav-link {
-    display: block;
-    padding-bottom: 10px;
-  }
 }
 
 @media (max-width:320px) {
@@ -1201,4 +1191,4 @@ pre .javascript .function,pre .keyword {
 
 .copy-button:hover {
   background-color: #3f3f3f;
-}
+}

themes/typing/source/js/typing.js

@@ -56,21 +56,5 @@
         event.trigger.textContent = 'Copy'
       }, 2000)
     })
-
-    // Navigation menu
-    $('#menu').click(function (event) {
-      var nav = $('#main-nav')
-      nav.toggle('fast')
-    })
-
-    // Show navigation button for smaller screen
-    $(window).resize(function () {
-      var viewportWidth = $(window).width()
-      if (viewportWidth > 468) {
-        $('#main-nav').show('fast')
-      } else {
-        $('#main-nav').hide('fast')
-      }
-    })
   })
 })(jQuery)