Add language picker menu (#411)

The picker is a drop-down menu using the same design as the theme
picker in the top-left.

There doesn’t seem to be an easy way to pass in a list of languages
and descriptions, so for now we’ll have to expand the menu by hand as
we add new languages. A comment has been added to `publish.yml` to
remind us of this.

.github/workflows/publish.yml

@@ -18,6 +18,7 @@ concurrency:
 
 env:
   CARGO_TERM_COLOR: always
+  # Update the language picker in index.hbs to link new languages.
   LANGUAGES: da pt-BR
 
 jobs:

book.toml

@@ -31,7 +31,7 @@ class = "bob"
 [output.html]
 curly-quotes = true
 additional-js = ["ga4.js", "speaker-notes.js"]
-additional-css = ["svgbob.css", "speaker-notes.css"]
+additional-css = ["svgbob.css", "speaker-notes.css", "language-picker.css"]
 site-url = "/comprehensive-rust/"
 git-repository-url = "https://github.com/google/comprehensive-rust"
 edit-url-template = "https://github.com/google/comprehensive-rust/edit/main/{path}"

language-picker.css

@@ -0,0 +1,8 @@
+#language-list {
+  left: auto;
+  right: 10px;
+}
+
+#language-list a {
+  color: inherit;
+}

theme/index.hbs

@@ -147,6 +147,40 @@
                     <h1 class="menu-title">{{ book_title }}</h1>
 
                     <div class="right-buttons">
+                        <button id="language-toggle" class="icon-button" type="button"
+                                title="Change language" aria-label="Change language"
+                                aria-haspopup="true" aria-expanded="false"
+                                aria-controls="language-list">
+                            <i class="fa fa-globe"></i>
+                        </button>
+                        <ul id="language-list" class="theme-popup" aria-label="Languages" role="menu">
+                          <li role="none"><button role="menuitem" class="theme">
+                              <a id="en">English</a>
+                          </button></li>
+                          <li role="none"><button role="menuitem" class="theme">
+                              <a id="pt-BR">Brazilian Portuguese</a>
+                          </button></li>
+                        </ul>
+
+                        <script>
+                          let langToggle = document.getElementById("language-toggle");
+                          let langList = document.getElementById("language-list");
+                          langToggle.addEventListener("click", (event) => {
+                              langList.style.display = langList.style.display == "block" ? "none" : "block";
+                          });
+                          let selectedLang = document.getElementById("{{ language }}");
+                          selectedLang.parentNode.classList.add("theme-selected");
+                          for (let lang of langList.querySelectorAll("a")) {
+                              if (lang.id == "en") {
+                                  lang.href = "{{ path_to_root }}{{ path }}";
+                              } else {
+                                  lang.href = `{{ path_to_root }}${lang.id}/{{ path }}`;
+                              }
+                              lang.href = lang.href.replace(/\.md$/, ".html");
+                              console.log(lang);
+                          }
+                        </script>
+
                         {{#if print_enable}}
                         <a href="{{ path_to_root }}print.html" title="Print this book" aria-label="Print this book">
                             <i id="print-button" class="fa fa-print"></i>