🚧 Feat: developing nested menu for mobile header (#31)

2026-08-24 23:38:56 +00:00 · 2022-04-07 16:14:59 +08:00
parent 3745713738
commit 23f142a4b8
2 changed files with 100 additions and 65 deletions
@@ -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;
@@ -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>