#343, #165: Move lang selector to left menu

assets/_main.scss

@@ -86,11 +86,11 @@ ul.pagination {
 
 .book-brand {
   margin-top: 0;
+  margin-bottom: $padding-16;
 
   img {
     height: 1.5em;
-    width: auto;
-    vertical-align: middle;
+    width: 1.5em;
     margin-inline-end: $padding-8;
   }
 }
@@ -147,11 +147,7 @@ body[dir="rtl"] .book-menu {
 }
 
 .book-section-flat {
-  margin-bottom: $padding-16 * 2;
-
-  &:not(:first-child) {
-    margin-top: $padding-16 * 2;
-  }
+  margin: $padding-16 * 2 0;
 
   > a,
   > span,
@@ -266,62 +262,19 @@ body[dir="rtl"] .book-menu {
 }
 
 .book-languages {
-  position: relative;
-  overflow: visible;
+  margin-block-end: $padding-16 * 2;
 
-  padding: $padding-16;
-  margin: -$padding-16;
+  .book-icon {
+    height: 1em;
+    width: 1em;
+    margin-inline-end: .5em;
+  }
 
   ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-
-    li {
-      white-space: nowrap;
-      cursor: pointer;
+    padding-inline-start: 1.5em;
   }
 }
 
-  &:hover,
-  &:focus,
-  &:focus-within {
-    .book-languages-list {
-      display: block;
-    }
-  }
-
-  .book-languages-list {
-    display: none;
-
-    position: absolute;
-    bottom: 100%;
-    left: 0;
-    padding: $padding-8 0;
-
-    background: var(--body-background);
-    box-shadow: 0 0 $padding-4 rgba(0, 0, 0, 0.1);
-
-    li img {
-      opacity: 0.25;
-    }
-
-    li.active img,
-    li:hover img {
-      opacity: initial;
-    }
-
-    a {
-      color: inherit;
-      padding: $padding-8 $padding-16;
-    }
-  }
-}
-
-.book-home {
-  padding: $padding-16;
-}
-
 // Responsive styles
 .book-menu-content,
 .book-toc-content,

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

@@ -1 +1 @@
-{"Target":"book.min.3e90539cf7130f0a89ba2f8b9f54ac5e5ecdd1fa345b6c8e3e5a83ec6f19ec8e.css","MediaType":"text/css","Data":{"Integrity":"sha256-PpBTnPcTDwqJui+Ln1SsXl7N0fo0W2yOPlqD7G8Z7I4="}}
+{"Target":"book.min.8599444fcc48ee6b435b5b62c955ab7d914fa1e2a453df90c4b97cc9769665d1.css","MediaType":"text/css","Data":{"Integrity":"sha256-hZlET8xI7mtDW1tiyVWrfZFPoeKkU9+QxLl8yXaWZdE="}}

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 -}}

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 }}

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">
+<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" />
         {{ $.Site.Language.LanguageName }}
-    </li> 
-  </ul>
+      </a>
+    </label>
 
-  <ul class="book-languages-list">
+    <ul>
       {{ range .Site.Languages }}{{ with index $translations .Lang }}
-    <li class="{{ if (eq $.Site.Language .Language) }}active{{ end }}">
-      <a href="{{ .Permalink }}" class="flex align-center">
-        <img src="{{ "svg/translate.svg" | relURL }}" class="book-icon" alt="Languages" />
+      <li>
+        <a href="{{ .Permalink }}">
           {{ .Language.LanguageName }}
         </a>
       </li>
       {{ end }}{{ end }}
     </ul>
-</div>
+  </li>
+</ul>

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 }}