Feat: adapt select-language with sub-menu

assets/css/_partial/_header.scss

@@ -207,6 +207,7 @@ header {
         padding: 0;
         display: none;
         left: 0;
+        padding: 0 1rem;
         // max-width: 5rem;
 
         background-color: $header-background-color;
@@ -221,6 +222,18 @@ header {
         .menu-item {
           height: $header-height*0.8;
           line-height: $header-height*0.8;
+
+          &:hover {
+            color: $global-link-hover-color;
+            cursor: pointer;
+          }
+
+          &[selected] {
+            color: $global-link-hover-color;
+            &::marker {
+              content: '>';
+            }
+          }
         }
       }
 

exampleSite/config.toml

@@ -99,6 +99,24 @@ enableEmoji = true
         url = "/about/"
         title = ""
         weight = 6
+      [[languages.en.menu.main]]
+        identifier = "about2"
+        pre = ""
+        post = ""
+        name = "About2"
+        parent = 'about'
+        url = "/about/2"
+        title = ""
+        weight = 2
+      [[languages.en.menu.main]]
+        identifier = "about1"
+        pre = ""
+        post = ""
+        name = "About1"
+        parent = 'about'
+        url = "/about/1"
+        title = ""
+        weight = 1
       [[languages.en.menu.main]]
         identifier = "github"
         pre = "<i class='fab fa-github fa-fw'></i>"

layouts/partials/header.html

@@ -66,23 +66,23 @@
           <li class="menu-item language" title="{{ T "selectLanguage" }}">
             {{- .Language.LanguageName -}}
             <i class="fas fa-chevron-right fa-fw"></i>
-            <select class="language-select" id="language-select-desktop" onchange="location = this.value;">
+            <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 -}}
-                  <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 -}}
+              {{- /* 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 -}}
-            </select>
+            {{- 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 -}}
+            {{- end -}}
+            </ul>
           </li>
         {{- end -}}
         {{- if .Site.Params.search.enable -}}
@@ -185,27 +185,27 @@
         <a href="javascript:void(0);" class="menu-item" title="{{ T "selectLanguage" }}">
           {{- .Language.LanguageName -}}
           <i class="fas fa-chevron-right fa-fw"></i>
-          <select class="language-select" onchange="location = this.value;">
+          <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 -}}
-                <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 -}}
+            {{- /* 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 -}}
-          </select>
+          {{- 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 -}}
+          {{- end -}}
+          </ul>
         </a>
       {{- end -}}
     </div>
-  </div>
+  </div> 
 </header>
 <div class="search-dropdown desktop">
   <div id="search-dropdown-desktop"></div>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "fixit-src",
   "version": "0.2.14",
-  "description": "FixIt theme source file",
+  "description": "FixIt theme source files",
   "private": true,
   "dependencies": {},
   "devDependencies": {
@@ -44,4 +44,4 @@
     "url": "https://github.com/Lruihao/FixIt/issues"
   },
   "homepage": "https://github.com/Lruihao/FixIt#readme"
-}
+}