Make dropdown work

Author: john-sp

config.toml

@@ -18,8 +18,10 @@ enableMissingTranslationPlaceholders = true
 [languages]
   [languages.en]
     weight = 1
+    languageName = "English"
   [languages.es]
     weight = 2
+    languageName = "Español"
   # [languages.de]
   #   weight = 3
 

content/play/_index.es.md

@@ -1,5 +1,5 @@
 ---
-title: "Where to play with Lc0"
+title: "Dónde jugar con Lc0"
 date: 2019-12-07T19:57:30+01:00
 draft: false
 weight: 100

themes/leela/assets/css/icons.css

@@ -187,4 +187,18 @@
   mask-repeat: no-repeat;
   -webkit-mask-size: 100% 100%;
   mask-size: 100% 100%;
+}
+
+.material-symbols--language-chinese-array {
+  display: inline-block;
+  width: 1.5em;
+  height: 1.5em;
+  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3.9 17.8v-5.3q-.275.275-.575.538t-.7.587q-.2-.275-.4-.525t-.425-.45q1.1-.775 1.988-1.725t1.612-2.1l1.075.425q-.35.6-.687 1.075T5.1 11.2v6.6zm5.925 0q-.3 0-.612-.012t-.638-.063q-.1-.425-.2-.675t-.225-.45h2.075q.125 0 .188-.062t.062-.188v-4.9H6.35v-1.1h7.2v1.125h-1.875V16.5q0 .425-.1.663t-.325.387q-.2.125-.525.188t-.9.062m-7.2-7.85q-.2-.225-.363-.462T1.926 9q1.025-.7 1.75-1.388T4.9 6.176l1.125.45q-.65.925-1.5 1.75t-1.9 1.575m4.25-1.875v-1.1H13.2l-.05 1.1zM17.55 15.65q.7 0 1.363-.325t1.212-.925v-2.65q-.575.075-1.062.175t-.913.225q-1.125.35-1.687.875T15.9 14.25q0 .65.45 1.025t1.2.375m-.575 1.7q-1.425 0-2.25-.812t-.825-2.213q0-1.3.825-2.125t2.65-1.325q.575-.15 1.263-.275t1.487-.225q-.05-1.175-.55-1.713t-1.55-.537q-.65 0-1.287.238T15.1 9.2l-.8-1.4q.825-.625 1.938-1.012T18.5 6.4q1.775 0 2.7 1.1t.925 3.2v6.425H20.45L20.3 16q-.7.625-1.537.988t-1.788.362'/%3E%3C/svg%3E");
+  background-color: currentColor;
+  -webkit-mask-image: var(--svg);
+  mask-image: var(--svg);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
 }

themes/leela/assets/css/main.css

@@ -863,4 +863,58 @@ footer {
   .community-link {
     padding: 1.5rem;
   }
+}
+
+/* Language Dropdown Styles */
+.language-dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.language-dropdown-toggle {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 6px 10px;
+  font-size: 1.1em;
+  color: var(--content-color);
+  display: flex;
+  align-items: center;
+}
+
+.language-dropdown-menu {
+  display: none;
+  position: absolute;
+  right: 0;
+  top: 100%;
+  min-width: 140px;
+  background: var(--white);
+  border: 1px solid var(--footer-bg-color);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+  border-radius: 0.5em;
+  margin-top: 6px;
+  z-index: 1002;
+  padding: 0.3em 0;
+}
+
+.language-dropdown-menu.show {
+  display: block;
+}
+
+.language-dropdown-menu li {
+  list-style: none;
+}
+
+.language-dropdown-menu a {
+  display: block;
+  padding: 8px 18px;
+  color: var(--content-color);
+  text-decoration: none;
+  font-size: 1em;
+  transition: background 0.15s;
+}
+
+.language-dropdown-menu a:hover {
+  background: var(--footer-bg-color);
+  color: var(--link-color);
 }

themes/leela/assets/js/main.js

@@ -21,4 +21,23 @@ document.addEventListener('DOMContentLoaded', () => {
             header.appendChild(anchor);
         }
     });
+
+    // Language dropdown toggle
+    const langDropdown = document.querySelector('.language-dropdown');
+    if (langDropdown) {
+        const toggleBtn = langDropdown.querySelector('.language-dropdown-toggle');
+        const menu = langDropdown.querySelector('.language-dropdown-menu');
+        if (toggleBtn && menu) {
+            toggleBtn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                menu.classList.toggle('show');
+            });
+            // Hide menu when clicking outside
+            document.addEventListener('click', (e) => {
+                if (!langDropdown.contains(e.target)) {
+                    menu.classList.remove('show');
+                }
+            });
+        }
+    }
 });

themes/leela/layouts/_partials/i18n-dropdown.html

@@ -1,13 +1,13 @@
 {{ if .IsTranslated }}
 <div class="language-dropdown">
   <button class="language-dropdown-toggle">
-    {{ .Language.LanguageName }} ▼
+    <i class="material-symbols--language-chinese-array"></i>
   </button>
   <ul class="language-dropdown-menu">
     {{ range .Translations }}
     <li>
       <a href="{{ .RelPermalink }}" lang="{{ .Language.Params.languageCode }}">
-        {{ .Language.Lang }}
+        {{ .Language.LanguageName  }}
       </a>
     </li>
     {{ end }}