Make translations list respect weight of languages

assets/_main.scss

@@ -249,6 +249,17 @@ ul.pagination {
   padding: $padding-16;
   margin: -$padding-16;
 
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    li {
+      white-space: nowrap;
+      cursor: pointer;
+    }
+  }
+
   &:hover,
   &:focus,
   &:focus-within {
@@ -268,15 +279,12 @@ ul.pagination {
     background: $body-background;
     box-shadow: 0 0 $padding-4 rgba(0, 0, 0, 0.1);
 
-    li {
-      white-space: nowrap;
+    li img {
+      opacity: 0.25;
     }
 
-    img {
-      opacity: 0.1;
-    }
-
-    li.active img {
+    li.active img,
+    li:hover img {
       opacity: 1;
     }
 
@@ -285,12 +293,6 @@ ul.pagination {
       padding: $padding-8 $padding-16;
     }
   }
-
-  ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
 }
 
 .book-home {

exampleSite/resources/_gen/assets/scss/book.scss_50fc8c04e12a2f59027287995557ceff.json

@@ -1 +1 @@
-{"Target":"book.min.e5c9b9ce08a1b4d00a97034509105a57f3c0ddc4d20bbcff4043fa956e1481a4.css","MediaType":"text/css","Data":{"Integrity":"sha256-5cm5zgihtNAKlwNFCRBaV/PA3cTSC7z/QEP6lW4UgaQ="}}
+{"Target":"book.min.d14e598245e80015bdec6aba498d084b14129bff1114a184cacc172e1e38657f.css","MediaType":"text/css","Data":{"Integrity":"sha256-0U5ZgkXoABW97Gq6SY0ISxQSm/8RFKGEyswXLh44ZX8="}}

layouts/partials/docs/languages.html

@@ -1,10 +1,10 @@
 <!-- Merge home and current page translations -->
-{{ $langs := dict }}
+{{ $translations := dict }}
 {{ range .Site.Home.AllTranslations }}
-  {{ $langs = merge $langs (dict .Language.Lang .) }}
+  {{ $translations = merge $translations (dict .Language.Lang .) }}
 {{ end }}
 {{ range .Translations }}
-  {{ $langs = merge $langs (dict .Language.Lang .) }}
+  {{ $translations = merge $translations (dict .Language.Lang .) }}
 {{ end }}
 
 <div class="book-languages" tabindex="0" aria-haspopup="true">
@@ -16,14 +16,14 @@
   </ul>
 
   <ul class="book-languages-list">
-    {{ range sort $langs }}
+    {{ range .Site.Languages }}{{ with index $translations .Lang }}
     <li class="{{ if (eq $.Site.Language .Language) }}active{{ end }}">
-      <a href="{{ .Permalink }}" class="flex">
+      <a href="{{ .RelPermalink }}" class="flex">
         <img src="{{ "svg/translate.svg" | relURL }}" class="book-icon" alt="Languages" />
         {{ .Language.LanguageName }}
       </a>
     </li>
-    {{ end }}
+    {{ end }}{{ end }}
   </ul>
 
 </div>