From 37f51fe803321c72fca5c2aec8d95281a5db844f Mon Sep 17 00:00:00 2001
From: Claudio Wunder <cwunder@hubspot.com>
Date: Sat, 28 Oct 2023 11:58:57 +0200
Subject: [PATCH] chore: removed language picker from legacy-main

---
 components/Header.tsx          | 31 ++++++++++++++++++-------------
 public/static/js/legacyMain.js | 20 --------------------
 2 files changed, 18 insertions(+), 33 deletions(-)

diff --git a/components/Header.tsx b/components/Header.tsx
index 12cff84bea9c8..1667d2e62ee5f 100644
--- 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
index 24abc82c73f0c..9f1c766aeaaa7 100644
--- 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();
 };