Use a dropdown for language selector

assets/css/bobastyle.css

@@ -128,7 +128,7 @@ footer {
   align-items: flex-start;
 }
 
-.navbar, .langpicker {
+.navbar {
   display: flex;
 }
 
@@ -137,12 +137,12 @@ footer {
   overflow: auto;
 }
 
-.navbar a, .langpicker a {
+.navbar a {
   padding: 8px 12px;
   border-radius: 12px;
 }
 
-.navbar-item:hover, .langpicker-item:hover {
+.navbar-item:hover, .langpicker summary:hover, .langpicker[open] summary {
   background-color: #444;
   text-decoration: none;
 }
@@ -151,6 +151,29 @@ footer {
   font-weight: bold;
 }
 
+.langpicker {
+  position: relative;
+  white-space: nowrap;
+}
+
+.langpicker summary {
+  cursor: pointer;
+  margin-left: 24px;
+  padding: 8px 12px;
+  border-radius: 12px;
+}
+
+.langpicker .languages {
+  position: absolute;
+  margin-top: 8px;
+  right: 0;
+  background-color: #222;
+  border: 2px solid #333;
+  padding: 8px 12px;
+  border-radius: 8px;
+  list-style: none;
+}
+
 
 
 /* Basic elements */

layouts/partials/top.html

@@ -21,10 +21,17 @@
     </nav>
 
     {{ if .Site.IsMultiLingual }}
-    <nav class="langpicker">
-        {{ range .Site.Home.AllTranslations }}
-        <a class="langpicker-item{{ if eq .Language $.Site.Language }} active{{ end }}" href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
-        {{ end }}
-    </nav>
+    <details class="langpicker">
+        <summary>
+            {{ partial "icon.html" "world" -}}
+        </summary>
+        <ul class="languages">
+            {{ range .Site.Home.AllTranslations }}
+            <li>
+                <a class="langpicker-item{{ if eq .Language $.Site.Language }} active{{ end }}" href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
+            </li>
+            {{ end }}
+        </ul>
+    </details>
     {{ end }}
 </div>