🎉 Feat: add nested menu support for mobile header (#31)

assets/css/_partial/_header.scss

@@ -55,6 +55,31 @@ header {
   .menu-item {
     position: relative;
     list-style: none;
+
+    & .dropdown-icon {
+      margin-left: 0.25rem;
+      color: $global-font-secondary-color;
+
+      [theme='dark'] & {
+        color: $global-font-secondary-color-dark;
+      }
+
+      &.open::before {
+        content: "\f0d7";
+      }
+    }
+
+    &.active {
+      >.menu-link,
+      >.nested-item>.menu-link {
+        font-weight: bold;
+        color: $menu-active-color;
+
+        [theme='dark'] & {
+          color: $menu-active-color-dark;
+        }
+      }
+    }
   }
 }
 
@@ -188,29 +213,9 @@ header {
           }
         }
 
-        & .dropdown-icon {
-          margin-left: 0.25rem;
-          color: $global-font-secondary-color;
-
-          [theme='dark'] & {
-            color: $global-font-secondary-color-dark;
-          }
-        }
-
         &.language {
           margin-right: 0;
         }
-
-        &.active {
-          >.menu-link {
-            font-weight: bold;
-            color: $menu-active-color;
-  
-            [theme='dark'] & {
-              color: $menu-active-color-dark;
-            }
-          }
-        }
       }
 
       .sub-menu {
@@ -320,11 +325,10 @@ header {
     }
 
     .menu {
-      // text-align: center;
       background: $header-background-color;
       border-top: 2px solid $global-border-color;
       display: none;
-      padding-top: 0.5rem;
+      padding: 0.5rem 1rem 0;
       @include box-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.1));
 
       .search-wrapper {
@@ -332,7 +336,7 @@ header {
         justify-content: space-between;
         align-items: center;
         box-sizing: border-box;
-        padding: ($header-height - 2.5rem) / 2 1rem;
+        padding: ($header-height - 2.5rem) / 2 0;
         line-height: 2.5rem;
       }
 
@@ -357,6 +361,21 @@ header {
       .menu-item {
         display: block;
         line-height: 2.5rem;
+
+        & .nested-item {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+      }
+
+      .sub-menu {
+        padding-left: 1rem;
+        display: none;
+
+        &.open {
+          display: block;
+        }
       }
 
       &.active {

layouts/partials/header.html

@@ -196,16 +196,18 @@
             {{- $url = .RelPermalink -}}
           {{- end -}}
           <li class="menu-item{{ if $.IsMenuCurrent `main` . | or ($.HasMenuCurrent `main` .) | or (eq $.RelPermalink $url) }} active{{ end }}">
-            <a
-              class="menu-link"
-              href="{{ $url }}"
-              {{ with .Title }}title="{{ . }}"{{ end }}
-              {{ if (urls.Parse $url).Host }}rel="noopener noreffer" target="_blank"{{ end }}
-            >
-              {{- with .Pre -}}{{- . | safeHTML }} {{ end }}{{ .Name }}{{ with .Post }} {{ . | safeHTML -}}{{- end -}}
-            </a>
             {{- if .HasChildren -}}
-              <i class="dropdown-icon fas fa-caret-down"></i>
+              <span class="nested-item">
+                <a
+                  class="menu-link"
+                  href="{{ $url }}"
+                  {{ with .Title }}title="{{ . }}"{{ end }}
+                  {{ if (urls.Parse $url).Host }}rel="noopener noreffer" target="_blank"{{ end }}
+                >
+                  {{- with .Pre -}}{{- . | safeHTML }} {{ end }}{{ .Name }}{{ with .Post }} {{ . | safeHTML -}}{{- end -}}
+                </a>
+                <i class="dropdown-icon fas fa-caret-right"></i>
+              </span>
               <ul class="sub-menu">
                 {{ range .Children }}
                   {{- $url := .URL | relLangURL -}}
@@ -224,14 +226,20 @@
                   </li>
                 {{- end -}}
               </ul>
+            {{- else -}}
+            <a
+              class="menu-link"
+              href="{{ $url }}"
+              {{ with .Title }}title="{{ . }}"{{ end }}
+              {{ if (urls.Parse $url).Host }}rel="noopener noreffer" target="_blank"{{ end }}
+            >
+              {{- with .Pre -}}{{- . | safeHTML }} {{ end }}{{ .Name }}{{ with .Post }} {{ . | safeHTML -}}{{- end -}}
+            </a>
             {{- end -}}
           </li>
-          <!-- <a class="menu-item" href="{{ $url }}" title="{{ .Title }}"{{ if (urls.Parse $url).Host }} rel="noopener noreffer" target="_blank"{{ end }}>
-            {{- with .Pre -}}{{- . | safeHTML }} {{ end }}{{ .Name }}{{ with .Post }} {{ . | safeHTML -}}{{- end -}}
-          </a> -->
         {{- end -}}
 
-
+        <!-- TODO -->
         <li class="menu-item theme-switch" title="{{ T "switchTheme" }}">
           <i class="fas fa-adjust fa-fw"></i>
         </li>

src/js/theme.js

@@ -91,6 +91,13 @@ class Theme {
       $menuMobile.classList.remove('active');
     });
     this.clickMaskEventSet.add(this._menuMobileOnClickMask);
+    // add nested menu toggler
+    this.util.forEach(document.querySelectorAll('.menu-item>.nested-item'), ($nestedItem) => {
+      $nestedItem.addEventListener('click', function () {
+        this.parentNode.querySelector('.sub-menu').classList.toggle('open');
+        this.querySelector('.dropdown-icon').classList.toggle('open');
+      })
+    });
   }
 
   initSwitchTheme() {