From 045dabb11992a0d77f404dd931cbb093f4e11b44 Mon Sep 17 00:00:00 2001
From: Alexander Bilz <mail@alexbilz.com>
Date: Wed, 03 Nov 2021 17:20:31 +0000
Subject: [PATCH] feat: improved language dropdown menu (#261)

---
 layouts/partials/navbar.html |   54 ++++++++++++++++++++++++++++++++++++++++--------------
 1 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index 92f87f6..0c465d3 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -35,23 +35,49 @@
           </li>
 
         {{ end }}
-        {{ if .Site.IsMultiLingual }}
-          {{ range $.Site.Home.AllTranslations }}
-            <li><a href="{{ .RelPermalink }}" title="{{ .Language.LanguageName }}">{{ .Language.LanguageName }}</a></li>
-
-          {{ end }}
-
-
-        {{ end }}
       </div>
-      <li>
-        {{ if not .Site.Params.disableThemeSwitcher }}
-          <a class="theme-switch" title="Switch Theme">
-            <i class="fas fa-adjust fa-fw" aria-hidden="true"></i>
-          </a>
+      <ul>
+        {{ if and .IsTranslated .Site.IsMultiLingual }}
+          <li>
+            <ul class="sl-nav" aria-label="Language switcher">
+              <li>
+                <input type="checkbox" id="languagepicker" aria-label="switch language" hidden />
+                <label for="languagepicker"><a>{{ .Site.Language.LanguageName }}</a></label>
+                <label for="languagepicker"><i class="fa fa-angle-down" aria-hidden="true"></i></label>
+                <div class="triangle"></div>
+
+                <ul class="dropdown">
+                  {{ range $.Translations }}
+
+                    <li>
+                      <a href="{{ .RelPermalink }}" title="{{ .Language.LanguageName }}"
+                        ><span
+                          {{ if eq . $.Site.Language }}
+                            class="active"
+
+                          {{ end }}
+                          aria-label="{{ i18n "ariaLanguage" }}{{ .Language.LanguageName }}"
+                          >{{ .Language.LanguageName }}</span
+                        ></a
+                      >
+                    </li>
+
+                  {{ end }}
+                </ul>
+              </li>
+            </ul>
+          </li>
 
         {{ end }}
-      </li>
+        {{ if not .Site.Params.disableThemeSwitcher }}
+          <li>
+            <a class="theme-switch" title="Switch Theme">
+              <i class="fas fa-adjust fa-fw" aria-hidden="true"></i>
+            </a>
+          </li>
+
+        {{ end }}
+      </ul>
     </ul>
   </nav>
 </div>

--
Gitblit v1.10.0