feat: morpher click opens lang picker

mobile + desktop

Author: wackerow

src/components/Morpher.tsx

@@ -1,7 +1,14 @@
 import { useEffect, useState } from "react"
+import { useBreakpointValue } from "@chakra-ui/react"
 
 import { Button } from "@/components/Buttons"
 
+import {
+  DESKTOP_LANGUAGE_BUTTON_NAME,
+  HAMBURGER_BUTTON_ID,
+  MOBILE_LANGUAGE_BUTTON_NAME,
+} from "@/lib/constants"
+
 const Morpher = () => {
   const [state, setState] = useState({
     text: "Ethereum",
@@ -118,11 +125,34 @@ const Morpher = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  const clickLanguagePicker = () => {
+  const handleMobileClick = () => {
+    if (!document) return
+    ;(document.getElementById(HAMBURGER_BUTTON_ID) as HTMLButtonElement).click()
+    setTimeout(
+      () =>
+        (
+          document.querySelector(
+            `button[name="${MOBILE_LANGUAGE_BUTTON_NAME}"`
+          ) as HTMLButtonElement
+        ).click(),
+      1
+    )
+  }
+  const handleDesktopClick = () => {
     if (!document) return
-    ;(document.querySelector("[id*=menu-button]") as HTMLButtonElement).click()
+    ;(
+      document.querySelector(
+        `button[name="${DESKTOP_LANGUAGE_BUTTON_NAME}"`
+      ) as HTMLButtonElement
+    ).click()
   }
 
+  const handleClick =
+    useBreakpointValue({
+      base: handleMobileClick,
+      md: handleDesktopClick,
+    }) || handleDesktopClick
+
   return (
     <Button
       w="fit-content"
@@ -132,7 +162,7 @@ const Morpher = () => {
       fontSize="md"
       color="body.medium"
       _hover={{ color: "primary.base" }}
-      onClick={clickLanguagePicker}
+      onClick={handleClick}
     >
       {state.text}
     </Button>

src/components/Nav/Mobile/HamburgerButton.tsx

@@ -2,6 +2,8 @@ import { motion } from "framer-motion"
 import { useTranslation } from "next-i18next"
 import { type ButtonProps, Icon, IconButton } from "@chakra-ui/react"
 
+import { HAMBURGER_BUTTON_ID } from "@/lib/constants"
+
 const hamburgerSvg =
   "M 2 13 l 10 0 l 0 0 l 10 0 M 4 19 l 8 0 M 12 19 l 8 0 M 2 25 l 10 0 l 0 0 l 10 0"
 const glyphSvg =
@@ -26,6 +28,7 @@ const HamburgerButton = ({
 
   return (
     <IconButton
+      id={HAMBURGER_BUTTON_ID}
       onClick={onToggle}
       aria-label={t("aria-toggle-search-button")}
       variant="ghost"

src/components/Nav/Mobile/MenuFooter.tsx

@@ -12,6 +12,7 @@ import LanguagePicker from "@/components/LanguagePicker"
 
 import FooterButton from "./FooterButton"
 import FooterItemText from "./FooterItemText"
+import { MOBILE_LANGUAGE_BUTTON_NAME } from "@/lib/constants"
 
 type MenuFooterProps = {
   onToggle: () => void
@@ -67,7 +68,7 @@ const MenuFooter = ({
             opacity: 0.4,
           }} // TODO: Replace with overlay component
         >
-          <MenuButton as={FooterButton} icon={BsTranslate}>
+          <MenuButton as={FooterButton} icon={BsTranslate} name={MOBILE_LANGUAGE_BUTTON_NAME}>
             <FooterItemText>{t("languages")}</FooterItemText>
           </MenuButton>
         </LanguagePicker>

src/components/Nav/index.tsx

@@ -22,7 +22,7 @@ import LanguagePicker from "@/components/LanguagePicker"
 import { BaseLink } from "@/components/Link"
 import Search from "@/components/Search"
 
-import { NAV_PY } from "@/lib/constants"
+import { DESKTOP_LANGUAGE_BUTTON_NAME, NAV_PY } from "@/lib/constants"
 
 import Menu from "./Menu"
 import MobileNavMenu from "./Mobile"
@@ -126,6 +126,7 @@ const Nav = () => {
                 >
                   <MenuButton
                     as={Button}
+                    name={DESKTOP_LANGUAGE_BUTTON_NAME}
                     ref={languagePickerRef}
                     variant="ghost"
                     color="body.base"

src/lib/constants.ts

@@ -92,3 +92,7 @@ export const SECTION_LABELS: NavSectionKey[] = [
 export const DEFAULT_GLOSSARY_NS = "glossary"
 
 export const NAV_PY = 4
+
+export const HAMBURGER_BUTTON_ID = "mobile-menu-button"
+export const MOBILE_LANGUAGE_BUTTON_NAME = "mobile-language-button"
+export const DESKTOP_LANGUAGE_BUTTON_NAME = "desktop-language-button"