4 files changed, 25 insertions, 22 deletions
diff --git a/layouts/partials/docs/brand.html b/layouts/partials/docs/brand.html
index 08ec797..f9accb4 100644
--- a/layouts/partials/docs/brand.html
+++ b/layouts/partials/docs/brand.html
@@ -1,5 +1,5 @@
 <h2 class="book-brand">
-  <a href="{{ cond (not .Site.Home.File) .Sites.First.Home.RelPermalink .Site.Home.RelPermalink }}">
+  <a class="flex align-center" href="{{ cond (not .Site.Home.File) .Sites.First.Home.RelPermalink .Site.Home.RelPermalink }}">
     {{- with .Site.Params.BookLogo -}}
     <img src="{{ . | relURL }}" alt="Logo" />
     {{- end -}}
diff --git a/layouts/partials/docs/footer.html b/layouts/partials/docs/footer.html
index 6e1a694..0cb877a 100644
--- a/layouts/partials/docs/footer.html
+++ b/layouts/partials/docs/footer.html
@@ -1,7 +1,4 @@
 <div class="flex flex-wrap justify-between">
-{{ if .Site.IsMultiLingual }}
-  {{ partial "docs/languages" . }}
-{{ end }}
 
 {{ if and .GitInfo .Site.Params.BookRepo }}
   <div>
@@ -22,6 +19,7 @@
     </a>
   </div>
 {{ end }}
+
 </div>
 
 {{ $script := resources.Get "clipboard.js" | resources.Minify }}
diff --git a/layouts/partials/docs/languages.html b/layouts/partials/docs/languages.html
index 4020275..644f6ea 100644
--- a/layouts/partials/docs/languages.html
+++ b/layouts/partials/docs/languages.html
@@ -2,7 +2,7 @@
 {{ $bookTranslatedOnly := default false .Site.Params.BookTranslatedOnly }}
 {{ $translations := dict }}
 {{ if (eq $bookTranslatedOnly false ) }}
-  {{ range .Site.Home.AllTranslations }}
+  {{ range .Site.Home.Translations }}
     {{ $translations = merge $translations (dict .Language.Lang .) }}
   {{ end }}
 {{ end }}
@@ -10,22 +10,24 @@
   {{ $translations = merge $translations (dict .Language.Lang .) }}
 {{ end }}
 
-<div class="book-languages" tabindex="0" aria-haspopup="true">
-  <ul>
-    <li class="flex align-center">
-      <img src="{{ "svg/translate.svg" | relURL }}" class="book-icon" alt="Languages" />
-      {{ $.Site.Language.LanguageName }}
-    </li> 
-  </ul>
-
-  <ul class="book-languages-list">
-    {{ range .Site.Languages }}{{ with index $translations .Lang }}
-    <li class="{{ if (eq $.Site.Language .Language) }}active{{ end }}">
-      <a href="{{ .Permalink }}" class="flex align-center">
+<ul class="book-languages">
+  <li>
+    <input type="checkbox" id="languages" class="toggle" />
+    <label for="languages" class="flex justify-between">
+      <a role="button" class="flex align-center">
         <img src="{{ "svg/translate.svg" | relURL }}" class="book-icon" alt="Languages" />
-        {{ .Language.LanguageName }}
+        {{ $.Site.Language.LanguageName }}
       </a>
-    </li>
-    {{ end }}{{ end }}
-  </ul>
-</div>
+    </label>
+
+    <ul>
+      {{ range .Site.Languages }}{{ with index $translations .Lang }}
+      <li>
+        <a href="{{ .Permalink }}">
+          {{ .Language.LanguageName }}
+        </a>
+      </li>
+      {{ end }}{{ end }}
+    </ul>
+  </li>
+</ul>
diff --git a/layouts/partials/docs/menu.html b/layouts/partials/docs/menu.html
index 3a71f42..d7ed940 100644
--- a/layouts/partials/docs/menu.html
+++ b/layouts/partials/docs/menu.html
@@ -1,6 +1,9 @@
 <nav>
 {{ partial "docs/brand" . }}
 {{ partial "docs/search" . }}
+{{ if .Site.IsMultiLingual }}
+  {{ partial "docs/languages" . }}
+{{ end }}
 
 {{ partial "docs/inject/menu-before" . }}
 {{ partial "docs/menu-hugo" .Site.Menus.before }}