From 23f142a4b8a9b6a66b94d8ccd69dadcdd7a1535c Mon Sep 17 00:00:00 2001
From: Cell <1024@lruihao.cn>
Date: Thu, 7 Apr 2022 16:14:59 +0800
Subject: [PATCH] :construction: Feat: developing nested menu for mobile header
 (#31)

---
 assets/css/_partial/_header.scss |  17 ++--
 layouts/partials/header.html     | 148 +++++++++++++++++++------------
 2 files changed, 100 insertions(+), 65 deletions(-)

diff --git a/assets/css/_partial/_header.scss b/assets/css/_partial/_header.scss
index e50d5007..141191d4 100644
--- a/assets/css/_partial/_header.scss
+++ b/assets/css/_partial/_header.scss
@@ -48,8 +48,14 @@ header {
   }
 }
 
-.menu .menu-item {
-  position: relative;
+.menu {
+  margin: 0;
+  padding: 0;
+
+  .menu-item {
+    position: relative;
+    list-style: none;
+  }
 }
 
 .search {
@@ -81,7 +87,7 @@ header {
     left: 0.5rem;
     right: auto;
 
-    .open & {
+    #header-desktop.open & {
       left: 1rem;
     }
   }
@@ -161,8 +167,6 @@ header {
       display: flex;
       flex-direction: row;
       flex-wrap: nowrap;
-      margin: 0;
-      padding: 0;
 
       >.menu-item:hover {
         & .sub-menu {
@@ -172,7 +176,6 @@ header {
 
       .menu-item {
         padding: 0 0.5rem;
-        list-style: none;
 
         &.delimiter {
           width: 0;
@@ -317,7 +320,7 @@ header {
     }
 
     .menu {
-      text-align: center;
+      // text-align: center;
       background: $header-background-color;
       border-top: 2px solid $global-border-color;
       display: none;
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 27f3e5f4..7886de60 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -59,9 +59,6 @@
                     {{- $url = .RelPermalink -}}
                   {{- end -}}
                   <li class="menu-item{{ if $.IsMenuCurrent `main` . | or ($.HasMenuCurrent `main` .) | or (eq $.RelPermalink $url) }} active{{ end }}">
-                    <!-- {{- if $.IsMenuCurrent `main` . | or ($.HasMenuCurrent `main` .) | or (eq $.RelPermalink $url) -}}
-                      <i class="fas fa-caret-right"></i>
-                    {{- end -}} -->
                     <a
                       class="menu-link"
                       href="{{ $url }}"
@@ -171,64 +168,99 @@
         <span></span><span></span><span></span>
       </div>
     </div>
-    <div class="menu" id="menu-mobile">
-      {{- if .Site.Params.search.enable -}}
-        <div class="search-wrapper">
-          <div class="search mobile" id="search-mobile">
-            <input type="text" placeholder="{{ .Site.Params.search.placeholder | default (T `searchPlaceholder`) }}" id="search-input-mobile">
-            <a href="javascript:void(0);" class="search-button search-toggle" id="search-toggle-mobile" title="{{ T `search` }}">
-              <i class="fas fa-search fa-fw"></i>
+    <nav>
+      <ul class="menu" id="menu-mobile">
+        {{- if .Site.Params.search.enable -}}
+          <li class="search-wrapper">
+            <div class="search mobile" id="search-mobile">
+              <input type="text" placeholder="{{ .Site.Params.search.placeholder | default (T `searchPlaceholder`) }}" id="search-input-mobile">
+              <a href="javascript:void(0);" class="search-button search-toggle" id="search-toggle-mobile" title="{{ T `search` }}">
+                <i class="fas fa-search fa-fw"></i>
+              </a>
+              <a href="javascript:void(0);" class="search-button search-clear" id="search-clear-mobile" title="{{ T `clear` }}">
+                <i class="fas fa-times-circle fa-fw"></i>
+              </a>
+              <span class="search-button search-loading" id="search-loading-mobile">
+                <i class="fas fa-spinner fa-fw fa-spin"></i>
+              </span>
+            </div>
+            <a href="javascript:void(0);" class="search-cancel" id="search-cancel-mobile">
+              {{ T `cancel` }}
             </a>
-            <a href="javascript:void(0);" class="search-button search-clear" id="search-clear-mobile" title="{{ T `clear` }}">
-              <i class="fas fa-times-circle fa-fw"></i>
-            </a>
-            <span class="search-button search-loading" id="search-loading-mobile">
-              <i class="fas fa-spinner fa-fw fa-spin"></i>
-            </span>
-          </div>
-          <a href="javascript:void(0);" class="search-cancel" id="search-cancel-mobile">
-            {{ T `cancel` }}
-          </a>
-        </div>
-      {{- end -}}
-      {{- $currentPage := . -}}
-      {{- range .Site.Menus.main -}}
-        {{- $url := .URL | relLangURL -}}
-        {{- with .Page -}}
-          {{- $url = .RelPermalink -}}
+          </li>
         {{- end -}}
-        <a class="menu-item" href="{{ $url }}" title="{{ .Title }}"{{ if (urls.Parse $url).Host }} rel="noopener noreffer" target="_blank"{{ end }}>
-          {{- .Pre | safeHTML }}{{ .Name }}{{ .Post | safeHTML -}}
-        </a>
-      {{- end -}}
-      <a href="javascript:void(0);" class="menu-item theme-switch" title="{{ T "switchTheme" }}">
-        <i class="fas fa-adjust fa-fw"></i>
-      </a>
-      {{- if .Site.IsMultiLingual -}}
-        <a href="javascript:void(0);" class="menu-item" title="{{ T "selectLanguage" }}">
-          {{- .Language.LanguageName -}}
-          <i class="fas fa-chevron-right fa-fw"></i>
-          <ul class="sub-menu" id="language-select-desktop">
-            {{- if eq .Kind "404" -}}
-            {{- /* https://github.com/dillonzq/LoveIt/issues/378 */ -}}
-            {{- range .Sites -}}
-              {{- $link := printf "%v/404.html" .LanguagePrefix -}}
-              <li class="menu-item" {{ if eq . $.Site }}selected{{ end }} title="{{- .Language.LanguageName -}}" lang="{{ $link }}" onclick="location = this.getAttribute('lang')">
-                {{- .Language.LanguageName -}}
-              </li>
-            {{- end -}}
-          {{- else -}}
-            {{- range .AllTranslations -}}
-              <li class="menu-item" {{ if eq .Lang $.Lang }}selected{{ end }} title="{{- .Language.LanguageName -}}" lang="{{ .RelPermalink }}" onclick="location = this.getAttribute('lang')">
-                {{- .Language.LanguageName -}}
-              </li>
-            {{- end -}}
+        {{- $currentPage := . -}}
+        {{- range .Site.Menus.main -}}
+          {{- $url := .URL | relLangURL -}}
+          {{- with .Page -}}
+            {{- $url = .RelPermalink -}}
           {{- end -}}
-          </ul>
-        </a>
-      {{- end -}}
-    </div>
-  </div> 
+          <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>
+              <ul class="sub-menu">
+                {{ range .Children }}
+                  {{- $url := .URL | relLangURL -}}
+                  {{- with .Page -}}
+                    {{- $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>
+                  </li>
+                {{- end -}}
+              </ul>
+            {{- 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 -}}
+
+
+        <li class="menu-item theme-switch" title="{{ T "switchTheme" }}">
+          <i class="fas fa-adjust fa-fw"></i>
+        </li>
+        {{- if .Site.IsMultiLingual -}}
+          <li class="menu-item" title="{{ T "selectLanguage" }}">
+            {{- .Language.LanguageName -}}
+            <i class="dropdown-icon fas fa-caret-down"></i>
+            <select class="language-select" onchange="location = this.value;">
+              {{- if eq .Kind "404" -}}
+                <!-- TODO offline i18n -->
+                {{- range .Sites -}}
+                  {{- $link := printf "%v/404.html" .LanguagePrefix -}}
+                  <option value="{{ $link }}"{{ if eq . $.Site }} selected{{ end }}>
+                    {{- .Language.LanguageName -}}
+                  </option>
+                {{- end -}}
+              {{- else -}}
+                {{- range .AllTranslations -}}
+                  <option value="{{ .RelPermalink }}"{{ if eq .Lang $.Lang }} selected{{ end }}>
+                    {{- .Language.LanguageName -}}
+                  </option>
+                {{- end -}}
+              {{- end -}}
+            </select>
+          </li>
+        {{- end -}}
+      </ul>
+    </nav>
+  </div>
 </header>
 <div class="search-dropdown desktop">
   <div id="search-dropdown-desktop"></div>