chore: removed language picker from legacy-main

nodejs · Oct 28, 2023 · 37f51fe · 37f51fe
1 parent c42f97b
commit 37f51fe
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 33 deletions.
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import Image from 'next/image';
 import { useTheme } from 'next-themes';
+import { useState } from 'react';
 import { useIntl } from 'react-intl';
 
 import { useLocale } from '@/hooks/useLocale';
@@ -16,6 +17,8 @@ const Header = () => {
   const { asPath, basePath } = useRouter();
   const { theme, setTheme } = useTheme();
 
+  const [showLangPicker, setShowLangPicker] = useState(false);
+
   const getLinkClassName = (href: string) =>
     classNames({ active: isCurrentLocaleRoute(href, href !== '/') });
 
@@ -85,6 +88,7 @@ const Header = () => {
             type="button"
             title={toggleLanguage}
             aria-label={toggleLanguage}
+            onClick={() => setShowLangPicker(!showLangPicker)}
             aria-controls="lang-picker"
             aria-expanded="false"
           >
@@ -98,19 +102,20 @@ const Header = () => {
           </button>
         </div>
 
-        <ul id="lang-picker" className="lang-picker hidden">
-          {availableLocales.map(locale => (
-            <li key={locale.code}>
-              <a
-                data-lang={locale.code}
-                title={locale.name}
-                href={currentRouteLocalized(locale.code)}
-              >
-                {locale.localName}
-              </a>
-            </li>
-          ))}
-        </ul>
+        {showLangPicker && (
+          <ul className="lang-picker">
+            {availableLocales.map(locale => (
+              <li key={locale.code}>
+                <a
+                  title={locale.name}
+                  href={currentRouteLocalized(locale.code)}
+                >
+                  {locale.localName}
+                </a>
+              </li>
+            ))}
+          </ul>
+        )}
       </div>
     </header>
   );

diff --git a/public/static/js/legacyMain.js b/public/static/js/legacyMain.js
@@ -1,22 +1,3 @@
-const listenLanguagePickerButton = () => {
-  const langPickerTogglerElement = document.querySelector(
-    '.lang-picker-toggler'
-  );
-
-  const langPickerElement = document.querySelector('.lang-picker');
-
-  const toggleFunction = function () {
-    langPickerElement.classList.toggle('hidden');
-
-    const isAriaExpanded =
-      langPickerTogglerElement.getAttribute('aria-expanded') === 'true';
-
-    langPickerTogglerElement.setAttribute('aria-expanded', !isAriaExpanded);
-  };
-
-  langPickerTogglerElement.addEventListener('click', toggleFunction);
-};
-
 const listenScrollToTopButton = () => {
   const scrollToTop = document.querySelector('#scroll-to-top');
 
@@ -38,7 +19,6 @@ const listenScrollToTopButton = () => {
 };
 
 const startLegacyApp = () => {
-  listenLanguagePickerButton();
   listenScrollToTopButton();
 };