@stack-spot/portal-layout 1.0.2 → 1.1.0

package/src/components/menu/MenuSections.tsx

@@ -1,320 +1,320 @@
-import { Flex, IconBox, Text } from '@citric/core'
-import { ChevronRight, Cog, Collapse, Expand } from '@citric/icons'
-import { useKeyboardControls } from '@stack-spot/portal-components'
-import { useAnchorTag } from '@stack-spot/portal-components/anchor'
-import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
-import { useCallback, useMemo, useState } from 'react'
-import { elementIds, getLayoutElements } from '../../elements'
-import { MenuContent } from './MenuContent'
-import { MenuProps, MenuSection } from './types'
-
-/**
- * Amount of time to wait before hiding the menu overlay once the mouse leaves its area.
- */
-const HIDE_OVERLAY_DELAY_MS = 400
-const MENU_OVERLAY_ID = 'menuContentOverlay'
-
-/**
- * Pointer to the latest "hideOverlay" task. This allows the operation to be cancelled.
- */
-let hideOverlayTask: number | undefined
-
-/**
- * Accessibility. Makes the menu overlay accessible through the keyboard.
- */
-let attachKeyboardListenersForOverlay: () => void
-/**
- * Accessibility. Makes the menu overlay invisible to the keyboard.
- */
-let detachKeyboardListenersForOverlay: () => void
-
-/**
- * Hides the menu overlay after HIDE_OVERLAY_DELAY_MS. This operation may be canceled.
- * 
- * This gives the user some time to move the mouse outside the overlay for while before it disappears. If the user moves the mouse out of
- * the overlay and, before HIDE_OVERLAY_DELAY_MS, moves the mouse back, we want the overlay to keep showing.
- */
-function hideOverlay() {
-  if (hideOverlayTask !== undefined) return
-  hideOverlayTask = window.setTimeout(hideOverlayImmediately, HIDE_OVERLAY_DELAY_MS)
-}
-
-/**
- * Accessibility. Returns the accessibility button of the section with the preview (overlay) currently active. 
- */
-function getAccessibilityButtonOfSectionWithActiveOverlay(): HTMLElement | null | undefined {
-  return document.getElementById(elementIds.menuSections)?.querySelector('button[aria-expanded="true"]')
-}
-
-/**
- * Hides the menu overlay without waiting for anything. This is not cancellable.
- */
-export function hideOverlayImmediately() {
-  detachKeyboardListenersForOverlay?.()
-  const overlay = document.getElementById(MENU_OVERLAY_ID)
-  overlay?.setAttribute('inert', '')
-  overlay?.setAttribute('aria-hidden', '')
-  overlay?.classList.remove('visible')
-  getAccessibilityButtonOfSectionWithActiveOverlay()?.setAttribute('aria-expanded', 'false')
-}
-
-/**
- * If `hideOverlay` was called and not fulfilled yet, this cancels the task, preventing the overlay from closing.
- */
-function cancelHideOverlayTask() {
-  if (hideOverlayTask === undefined) return
-  clearTimeout(hideOverlayTask)
-  hideOverlayTask = undefined
-}
-
-/**
- * Shows the menu overlay.
- */
-function showOverlay() {
-  cancelHideOverlayTask()
-  const overlay = document.getElementById(MENU_OVERLAY_ID)
-  overlay?.removeAttribute('inert')
-  overlay?.removeAttribute('aria-hidden')
-  overlay?.classList.add('visible')
-  attachKeyboardListenersForOverlay?.()
-}
-
-/**
- * Checks if the menu content (2nd menu list from left to right) is visible or not.
- * The menu content is visible if:
- * 1. The menu is not compact (the button at the end of the section list compacts/expands the menu);
- * 2. If the current section has any menu content.
- */
-function isMenuContentVisible() {
-  return !!document.getElementById('layout')?.classList?.contains('menu-content-visible')
-}
-
-/**
- * A section in the the menu-sections.
- * 
- * A section in the menu is responsible for rendering the section icon, label, accessibility button and controlling the menu overlay.
- * @param props React props for the component {@link MenuSection} & { id, setCurrentOverlay }. Id identifies the current section and
- * setCurrentOverlay controls the overlay (preview) content.
- */
-const Section = ({
-  icon,
-  label,
-  href,
-  target,
-  onClick,
-  active,
-  content,
-  customContent,
-  setCurrentOverlay,
-  id,
-  hasContent,
-  className,
-}: MenuSection & {
-  id: number, setCurrentOverlay: (id: number | undefined) => void, hasContent: boolean,
-}) => {
-  const Link = useAnchorTag()
-  const contentToRender = typeof content === 'function' ? content() : content
-  const t = useTranslate(dictionary)
-  function shouldShowOverlay() {
-    /* The overlay should appear if:
-     * 1. The menu is compacted showing only the icons 
-     * 2. The section has some content to render OR:
-     * 3. The section is active and there is a contextual menu for the active page.
-     */
-    const { layout } = getLayoutElements()
-    const isCompactedOnlyIcons = layout?.classList.contains('menu-compact')
-    return isCompactedOnlyIcons && (!!contentToRender || !!customContent || (hasContent && active))
-  }
-
-  function prepareShowOverlay(event: React.MouseEvent<HTMLAnchorElement, MouseEvent> | React.KeyboardEvent<any>) {
-    if (!shouldShowOverlay()) return
-    const anchorElement = event.target as HTMLElement
-    const accessibilityButton = anchorElement?.parentElement?.querySelector('button') as HTMLElement
-    accessibilityButton?.setAttribute('aria-expanded', 'true')
-    setCurrentOverlay(id)
-    showOverlay()
-  }
-
-  function click() {
-    if (onClick) onClick()
-    hideOverlayImmediately()
-  }
-
-  const labelText = typeof label === 'string' ? label : label.id
-
-  return (
-    <li
-      role="menuitem"
-      key={labelText}
-      title={labelText}
-      className={`section-submenu ${className || ''} ${active ? 'active' : ''}`}
-      aria-selected={active}>
-      <Link
-        href={href}
-        target={target}
-        onClick={click}
-        onMouseEnter={prepareShowOverlay}
-        onMouseLeave={() => shouldShowOverlay() && hideOverlay()}
-        title={labelText}
-        aria-label={labelText}
-        onKeyDown={onClick ? e => e.key === 'Enter' && onClick() : undefined}
-        {...(active ? { 'aria-current': 'page' } : undefined)}
-        {...(!href ? { 'tabIndex': 0 } : undefined)}
-      >
-        <Flex alignItems="center" justifyContent="center" px={5}>
-          <IconBox>{icon}</IconBox>
-          {typeof label === 'string' ? <Text appearance="microtext1" className="section-label" ml={3}>{label}</Text> : label.element}
-        </Flex>
-      </Link>
-      {shouldShowOverlay() &&
-        <IconBox size="sm" className="section-submenu-icon"
-          as="button"
-          aria-label={interpolate(t.menuOptions, label)}
-          aria-controls={MENU_OVERLAY_ID}
-          aria-expanded={false}
-          onKeyDown={(event) => {
-            if (event.key === 'Enter') {
-              prepareShowOverlay(event)
-            }
-          }}>
-          <ChevronRight />
-        </IconBox>
-      }
-    </li>
-  )
-}
-
-/**
- * Renders the overlay content.
- * @param props the content of the overlay, can be either customized (react component), a config object or a function that creates the
- * config object.
- * @returns the content
- */
-const OverlayRenderer = ({ content, customContent }: Pick<MenuSection, 'content' | 'customContent'>) => {
-  if (customContent) {
-    return <div id="custom-selectable-item">{customContent}</div>
-  }
-
-  const data = typeof content === 'function' ? content() : content
-  return <MenuContent {...data} />
-}
-
-/**
- * Renders a menu-sections interface.
- * 
- * Considering the Stackspot UI, this is the "menu sections", not the "menu content", i.e. it's the first menu from left to right, the
- * one with the icons and section names: the main menu. 
- * @param props the props for the component {@link MenuProps}.
- */
-export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
-  const Link = useAnchorTag()
-  const t = useTranslate(dictionary)
-  // this is a mock state only used to force an update on the component.
-  const [_, setUpdate] = useState(0)
-
-  const toggleMenu = useCallback((hasContent: boolean) => {
-    const layout = document.getElementById('layout')
-    if (!layout) return
-    if (layout.classList.contains('menu-compact')) {
-      layout.classList.remove('menu-compact')
-    } else {
-      layout.classList.add('menu-compact')
-    }
-
-    if (hasContent) {
-      if (layout.classList.contains('menu-content-visible')) {
-        layout.classList.remove('menu-content-visible')
-      } else {
-        layout.classList.add('menu-content-visible')
-      }
-    }
-    setUpdate(current => current + 1)
-  }, [])
-  // the current overlay showing, when the user hovers the section icon. This is the index of the item in the sections array.
-  const [currentOverlay, setCurrentOverlay] = useState<number | undefined>()
-
-  const sectionItems = useMemo(
-    () => sections.filter(s => !s.hidden).map((s, i) => <Section key={i} id={i} {...s} setCurrentOverlay={setCurrentOverlay}
-      hasContent={!!props.content || !!props.customContent} />),
-    [sections],
-  )
-
-  function onPressEscape() {
-    getAccessibilityButtonOfSectionWithActiveOverlay()?.focus()
-    hideOverlayImmediately()
-  }
-
-  const { keyboardControlledElement: overlayRef, attachKeyboardListeners, detachKeyboardListeners } = useKeyboardControls({
-    onPressEscape,
-    querySelectors: 'li a.action, #custom-selectable-item button, #custom-selectable-item input',
-  })
-
-  // this only works because we have a single section menu in the site. This workaround was created since the keyboard controls were
-  // transformed into a hook. This is not ideal and it would be a good idea to rewrite this code without the need for this.
-  attachKeyboardListenersForOverlay = attachKeyboardListeners
-  detachKeyboardListenersForOverlay = detachKeyboardListeners
-
-  /* This function renders the section preview in the overlay in normal circumstances. If the menu is hidden and the section is active,
-  instead of rendering the section preview, it will render the actual menu content, which would be invisible otherwise.
-  Below, the key is of extreme importance. It ensures React will consider every section content to be an entirely different
-  component. Without this, React would see the content changing every time a new section is hovered. Since the content might be a
-  hook, this would cause some serious problems. */
-  function renderMenuOverlay() {
-    if (currentOverlay === undefined) return null
-    const shouldRenderMenuContentInstead = !isMenuContentVisible() && sections[currentOverlay].active &&
-      (!!props.content || !!props.customContent)
-    return shouldRenderMenuContentInstead
-      ? <OverlayRenderer key={'contentKey' in props ? props.contentKey : undefined} content={props.content}
-        customContent={props.customContent} />
-      : <OverlayRenderer key={currentOverlay} content={sections[currentOverlay].content}
-        customContent={sections[currentOverlay].customContent} />
-  }
-
-  return (
-    <>
-      <ul>{sectionItems}</ul>
-
-      <Flex mb={7} alignItems="center">
-        <button className="toggle sections-footer" onClick={() => toggleMenu(!!props.content || !!props.customContent)}
-          title={t.toggle} tabIndex={-1}>
-          <IconBox>
-            <Expand className="expand" />
-            <Collapse className="collapse" />
-          </IconBox>
-          <Text appearance="microtext1" ml={8} className="collapse" colorScheme="light.contrastText">{t.hide}</Text>
-        </button>
-        {(props.settings?.show) &&
-          <Link href={props.settings?.href} onClick={props.settings?.onClick}
-            className="sections-footer toggle"
-            {...(props.settings.active ? { 'aria-current': 'page' } : undefined)}>
-            <IconBox aria-label={t.settingsIcon}>
-              <Cog />
-            </IconBox>
-            <Text appearance="microtext1"  ml={8} className="collapse">{t.settings}</Text>
-          </Link>
-        }
-      </Flex>
-
-      <div id={MENU_OVERLAY_ID} onMouseEnter={showOverlay} onMouseLeave={hideOverlay} ref={overlayRef}>
-        {renderMenuOverlay()}
-      </div>
-    </>
-  )
-}
-
-const dictionary = {
-  en: {
-    toggle: 'Show or hide the menu',
-    menuOptions: 'View $0 menu options',
-    settings: 'Settings',
-    settingsIcon: 'Settings icon',
-    hide: 'Hide',
-  },
-  pt: {
-    toggle: 'Visualizar ou esconder o menu',
-    menuOptions: 'Visualizar opções do menu $0',
-    settings: 'Configurações',
-    settingsIcon: 'Ícone de configurações',
-    hide: 'Esconder',
-  },
-} satisfies Dictionary
+import { Flex, IconBox, Text } from '@citric/core'
+import { ChevronRight, Cog, Collapse, Expand } from '@citric/icons'
+import { useKeyboardControls } from '@stack-spot/portal-components'
+import { useAnchorTag } from '@stack-spot/portal-components/anchor'
+import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
+import { useCallback, useMemo, useState } from 'react'
+import { elementIds, getLayoutElements } from '../../elements'
+import { MenuContent } from './MenuContent'
+import { MenuProps, MenuSection } from './types'
+
+/**
+ * Amount of time to wait before hiding the menu overlay once the mouse leaves its area.
+ */
+const HIDE_OVERLAY_DELAY_MS = 400
+const MENU_OVERLAY_ID = 'menuContentOverlay'
+
+/**
+ * Pointer to the latest "hideOverlay" task. This allows the operation to be cancelled.
+ */
+let hideOverlayTask: number | undefined
+
+/**
+ * Accessibility. Makes the menu overlay accessible through the keyboard.
+ */
+let attachKeyboardListenersForOverlay: () => void
+/**
+ * Accessibility. Makes the menu overlay invisible to the keyboard.
+ */
+let detachKeyboardListenersForOverlay: () => void
+
+/**
+ * Hides the menu overlay after HIDE_OVERLAY_DELAY_MS. This operation may be canceled.
+ * 
+ * This gives the user some time to move the mouse outside the overlay for while before it disappears. If the user moves the mouse out of
+ * the overlay and, before HIDE_OVERLAY_DELAY_MS, moves the mouse back, we want the overlay to keep showing.
+ */
+function hideOverlay() {
+  if (hideOverlayTask !== undefined) return
+  hideOverlayTask = window.setTimeout(hideOverlayImmediately, HIDE_OVERLAY_DELAY_MS)
+}
+
+/**
+ * Accessibility. Returns the accessibility button of the section with the preview (overlay) currently active. 
+ */
+function getAccessibilityButtonOfSectionWithActiveOverlay(): HTMLElement | null | undefined {
+  return document.getElementById(elementIds.menuSections)?.querySelector('button[aria-expanded="true"]')
+}
+
+/**
+ * Hides the menu overlay without waiting for anything. This is not cancellable.
+ */
+export function hideOverlayImmediately() {
+  detachKeyboardListenersForOverlay?.()
+  const overlay = document.getElementById(MENU_OVERLAY_ID)
+  overlay?.setAttribute('inert', '')
+  overlay?.setAttribute('aria-hidden', '')
+  overlay?.classList.remove('visible')
+  getAccessibilityButtonOfSectionWithActiveOverlay()?.setAttribute('aria-expanded', 'false')
+}
+
+/**
+ * If `hideOverlay` was called and not fulfilled yet, this cancels the task, preventing the overlay from closing.
+ */
+function cancelHideOverlayTask() {
+  if (hideOverlayTask === undefined) return
+  clearTimeout(hideOverlayTask)
+  hideOverlayTask = undefined
+}
+
+/**
+ * Shows the menu overlay.
+ */
+function showOverlay() {
+  cancelHideOverlayTask()
+  const overlay = document.getElementById(MENU_OVERLAY_ID)
+  overlay?.removeAttribute('inert')
+  overlay?.removeAttribute('aria-hidden')
+  overlay?.classList.add('visible')
+  attachKeyboardListenersForOverlay?.()
+}
+
+/**
+ * Checks if the menu content (2nd menu list from left to right) is visible or not.
+ * The menu content is visible if:
+ * 1. The menu is not compact (the button at the end of the section list compacts/expands the menu);
+ * 2. If the current section has any menu content.
+ */
+function isMenuContentVisible() {
+  return !!document.getElementById('layout')?.classList?.contains('menu-content-visible')
+}
+
+/**
+ * A section in the the menu-sections.
+ * 
+ * A section in the menu is responsible for rendering the section icon, label, accessibility button and controlling the menu overlay.
+ * @param props React props for the component {@link MenuSection} & { id, setCurrentOverlay }. Id identifies the current section and
+ * setCurrentOverlay controls the overlay (preview) content.
+ */
+const Section = ({
+  icon,
+  label,
+  href,
+  target,
+  onClick,
+  active,
+  content,
+  customContent,
+  setCurrentOverlay,
+  id,
+  hasContent,
+  className,
+}: MenuSection & {
+  id: number, setCurrentOverlay: (id: number | undefined) => void, hasContent: boolean,
+}) => {
+  const Link = useAnchorTag()
+  const contentToRender = typeof content === 'function' ? content() : content
+  const t = useTranslate(dictionary)
+  function shouldShowOverlay() {
+    /* The overlay should appear if:
+     * 1. The menu is compacted showing only the icons 
+     * 2. The section has some content to render OR:
+     * 3. The section is active and there is a contextual menu for the active page.
+     */
+    const { layout } = getLayoutElements()
+    const isCompactedOnlyIcons = layout?.classList.contains('menu-compact')
+    return isCompactedOnlyIcons && (!!contentToRender || !!customContent || (hasContent && active))
+  }
+
+  function prepareShowOverlay(event: React.MouseEvent<HTMLAnchorElement, MouseEvent> | React.KeyboardEvent<any>) {
+    if (!shouldShowOverlay()) return
+    const anchorElement = event.target as HTMLElement
+    const accessibilityButton = anchorElement?.parentElement?.querySelector('button') as HTMLElement
+    accessibilityButton?.setAttribute('aria-expanded', 'true')
+    setCurrentOverlay(id)
+    showOverlay()
+  }
+
+  function click() {
+    if (onClick) onClick()
+    hideOverlayImmediately()
+  }
+
+  const labelText = typeof label === 'string' ? label : label.id
+
+  return (
+    <li
+      role="menuitem"
+      key={labelText}
+      title={labelText}
+      className={`section-submenu ${className || ''} ${active ? 'active' : ''}`}
+      aria-selected={active}>
+      <Link
+        href={href}
+        target={target}
+        onClick={click}
+        onMouseEnter={prepareShowOverlay}
+        onMouseLeave={() => shouldShowOverlay() && hideOverlay()}
+        title={labelText}
+        aria-label={labelText}
+        onKeyDown={onClick ? e => e.key === 'Enter' && onClick() : undefined}
+        {...(active ? { 'aria-current': 'page' } : undefined)}
+        {...(!href ? { 'tabIndex': 0 } : undefined)}
+      >
+        <Flex alignItems="center" justifyContent="center" px={5}>
+          <IconBox>{icon}</IconBox>
+          {typeof label === 'string' ? <Text appearance="microtext1" className="section-label" ml={3}>{label}</Text> : label.element}
+        </Flex>
+      </Link>
+      {shouldShowOverlay() &&
+        <IconBox size="sm" className="section-submenu-icon"
+          as="button"
+          aria-label={interpolate(t.menuOptions, label)}
+          aria-controls={MENU_OVERLAY_ID}
+          aria-expanded={false}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              prepareShowOverlay(event)
+            }
+          }}>
+          <ChevronRight />
+        </IconBox>
+      }
+    </li>
+  )
+}
+
+/**
+ * Renders the overlay content.
+ * @param props the content of the overlay, can be either customized (react component), a config object or a function that creates the
+ * config object.
+ * @returns the content
+ */
+const OverlayRenderer = ({ content, customContent }: Pick<MenuSection, 'content' | 'customContent'>) => {
+  if (customContent) {
+    return <div id="custom-selectable-item">{customContent}</div>
+  }
+
+  const data = typeof content === 'function' ? content() : content
+  return <MenuContent {...data} />
+}
+
+/**
+ * Renders a menu-sections interface.
+ * 
+ * Considering the Stackspot UI, this is the "menu sections", not the "menu content", i.e. it's the first menu from left to right, the
+ * one with the icons and section names: the main menu. 
+ * @param props the props for the component {@link MenuProps}.
+ */
+export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
+  const Link = useAnchorTag()
+  const t = useTranslate(dictionary)
+  // this is a mock state only used to force an update on the component.
+  const [_, setUpdate] = useState(0)
+
+  const toggleMenu = useCallback((hasContent: boolean) => {
+    const layout = document.getElementById('layout')
+    if (!layout) return
+    if (layout.classList.contains('menu-compact')) {
+      layout.classList.remove('menu-compact')
+    } else {
+      layout.classList.add('menu-compact')
+    }
+
+    if (hasContent) {
+      if (layout.classList.contains('menu-content-visible')) {
+        layout.classList.remove('menu-content-visible')
+      } else {
+        layout.classList.add('menu-content-visible')
+      }
+    }
+    setUpdate(current => current + 1)
+  }, [])
+  // the current overlay showing, when the user hovers the section icon. This is the index of the item in the sections array.
+  const [currentOverlay, setCurrentOverlay] = useState<number | undefined>()
+
+  const sectionItems = useMemo(
+    () => sections.filter(s => !s.hidden).map((s, i) => <Section key={i} id={i} {...s} setCurrentOverlay={setCurrentOverlay}
+      hasContent={!!props.content || !!props.customContent} />),
+    [sections],
+  )
+
+  function onPressEscape() {
+    getAccessibilityButtonOfSectionWithActiveOverlay()?.focus()
+    hideOverlayImmediately()
+  }
+
+  const { keyboardControlledElement: overlayRef, attachKeyboardListeners, detachKeyboardListeners } = useKeyboardControls({
+    onPressEscape,
+    querySelectors: 'li a.action, #custom-selectable-item button, #custom-selectable-item input',
+  })
+
+  // this only works because we have a single section menu in the site. This workaround was created since the keyboard controls were
+  // transformed into a hook. This is not ideal and it would be a good idea to rewrite this code without the need for this.
+  attachKeyboardListenersForOverlay = attachKeyboardListeners
+  detachKeyboardListenersForOverlay = detachKeyboardListeners
+
+  /* This function renders the section preview in the overlay in normal circumstances. If the menu is hidden and the section is active,
+  instead of rendering the section preview, it will render the actual menu content, which would be invisible otherwise.
+  Below, the key is of extreme importance. It ensures React will consider every section content to be an entirely different
+  component. Without this, React would see the content changing every time a new section is hovered. Since the content might be a
+  hook, this would cause some serious problems. */
+  function renderMenuOverlay() {
+    if (currentOverlay === undefined) return null
+    const shouldRenderMenuContentInstead = !isMenuContentVisible() && sections[currentOverlay].active &&
+      (!!props.content || !!props.customContent)
+    return shouldRenderMenuContentInstead
+      ? <OverlayRenderer key={'contentKey' in props ? props.contentKey : undefined} content={props.content}
+        customContent={props.customContent} />
+      : <OverlayRenderer key={currentOverlay} content={sections[currentOverlay].content}
+        customContent={sections[currentOverlay].customContent} />
+  }
+
+  return (
+    <>
+      <ul>{sectionItems}</ul>
+
+      <Flex mb={7} alignItems="center">
+        <button className="toggle sections-footer" onClick={() => toggleMenu(!!props.content || !!props.customContent)}
+          title={t.toggle} tabIndex={-1}>
+          <IconBox>
+            <Expand className="expand" />
+            <Collapse className="collapse" />
+          </IconBox>
+          <Text appearance="microtext1" ml={8} className="collapse" colorScheme="light.contrastText">{t.hide}</Text>
+        </button>
+        {(props.settings?.show) &&
+          <Link href={props.settings?.href} onClick={props.settings?.onClick}
+            className="sections-footer toggle"
+            {...(props.settings.active ? { 'aria-current': 'page' } : undefined)}>
+            <IconBox aria-label={t.settingsIcon}>
+              <Cog />
+            </IconBox>
+            <Text appearance="microtext1"  ml={8} className="collapse">{t.settings}</Text>
+          </Link>
+        }
+      </Flex>
+
+      <div id={MENU_OVERLAY_ID} onMouseEnter={showOverlay} onMouseLeave={hideOverlay} ref={overlayRef}>
+        {renderMenuOverlay()}
+      </div>
+    </>
+  )
+}
+
+const dictionary = {
+  en: {
+    toggle: 'Show or hide the menu',
+    menuOptions: 'View $0 menu options',
+    settings: 'Settings',
+    settingsIcon: 'Settings icon',
+    hide: 'Hide',
+  },
+  pt: {
+    toggle: 'Visualizar ou esconder o menu',
+    menuOptions: 'Visualizar opções do menu $0',
+    settings: 'Configurações',
+    settingsIcon: 'Ícone de configurações',
+    hide: 'Esconder',
+  },
+} satisfies Dictionary