feat: change mobile locale position

urfit-tech · Oct 14, 2024 · 745c46b · 745c46b
1 parent 18fd54a
commit 745c46b
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 24 deletions.
diff --git a/src/components/common/AdminMenu.tsx b/src/components/common/AdminMenu.tsx
@@ -5,11 +5,10 @@ import { ClickParam, MenuProps } from 'antd/lib/menu'
 import { useApp } from 'lodestar-app-element/src/contexts/AppContext'
 import { useAuth } from 'lodestar-app-element/src/contexts/AuthContext'
 import { parsePayload } from 'lodestar-app-element/src/hooks/util'
-import React, { useContext } from 'react'
+import React from 'react'
 import { useIntl } from 'react-intl'
 import { useHistory } from 'react-router-dom'
 import styled from 'styled-components'
-import LocaleContext, { SUPPORTED_LOCALES } from '../../contexts/LocaleContext'
 import hasura from '../../hasura'
 import { commonMessages } from '../../helpers/translation'
 import { useEnrolledMembershipCardIds } from '../../hooks/card'
@@ -28,7 +27,6 @@ import { ReactComponent as MemberCardIcon } from '../../images/membercard.svg'
 import { ReactComponent as TicketIcon } from '../../images/ticket.svg'
 import { ReactComponent as UserIcon } from '../../images/user.svg'
 import { useAppRouter } from './AppRouter'
-import { BREAK_POINT } from './Responsive'
 
 const StyledMenu = styled(Menu)`
   && {
@@ -49,13 +47,10 @@ export const AdminMenu: React.FC<MenuProps> = ({ children, ...menuProps }) => {
   const { routesMap } = useAppRouter()
   const { formatMessage } = useIntl()
   const history = useHistory()
-  const { setCurrentLocale } = useContext(LocaleContext)
   const { managementDomain } = useManagementDomain(appId)
 
   const handleClick = ({ key, item }: ClickParam) => {
-    if (SUPPORTED_LOCALES.map(v => v.locale).includes(key)) {
-      setCurrentLocale?.(key)
-    } else if (item.props['data-href']) {
+    if (item.props['data-href']) {
       if (key.startsWith('_blank')) window.open(item.props['data-href'])
       else history.push(item.props['data-href'])
     } else if (key.startsWith('management_system')) {
@@ -77,7 +72,6 @@ export const MemberAdminMenu: React.VFC<
   MenuProps & { renderAdminMenu?: (props: RenderMemberAdminMenuProps) => React.ReactElement }
 > = ({ renderAdminMenu, ...props }) => {
   const { formatMessage } = useIntl()
-  const { currentLocale } = useContext(LocaleContext)
   const { currentMemberId, currentUserRole, permissions, authToken } = useAuth()
   const { enabledModules, settings } = useApp()
   const { enrolledMembershipCardIds } = useEnrolledMembershipCardIds(currentMemberId || '')
@@ -234,22 +228,6 @@ export const MemberAdminMenu: React.VFC<
         </Menu.Item>
       ),
     },
-    {
-      key: 'translation',
-      item:
-        enabledModules.locale && window.innerWidth < BREAK_POINT ? (
-          <Menu.SubMenu
-            key="translation"
-            title={SUPPORTED_LOCALES.find(supportedLocale => supportedLocale.locale === currentLocale)?.label}
-          >
-            {SUPPORTED_LOCALES.filter(v => v.locale !== currentLocale).map(v => (
-              <Menu.Item key={v.locale}>{v.label}</Menu.Item>
-            ))}
-          </Menu.SubMenu>
-        ) : (
-          <></>
-        ),
-    },
   ]
 
   return (

diff --git a/src/components/common/MemberProfileButton.tsx b/src/components/common/MemberProfileButton.tsx
@@ -10,6 +10,7 @@ import { useIntl } from 'react-intl'
 import { Link, useHistory } from 'react-router-dom'
 import styled from 'styled-components'
 import { useCustomRenderer } from '../../contexts/CustomRendererContext'
+import LocaleContext, { SUPPORTED_LOCALES } from '../../contexts/LocaleContext'
 import PodcastPlayerContext from '../../contexts/PodcastPlayerContext'
 import { commonMessages } from '../../helpers/translation'
 import { useNav } from '../../hooks/data'
@@ -159,6 +160,36 @@ const DefaultLogout: React.VFC<{ onClick?: React.MouseEventHandler<HTMLDivElemen
   )
 }
 
+const LocaleCollapse: React.FC = () => {
+  const { isOpen, onToggle } = useDisclosure()
+  const { currentLocale, setCurrentLocale } = useContext(LocaleContext)
+  return (
+    <>
+      <Box d="flex" justifyContent="space-between" cursor="pointer" onClick={onToggle}>
+        <Box>
+          <List.Item style={{ cursor: 'pointer' }}>
+            <BlankIcon className="mr-2" />
+            {SUPPORTED_LOCALES.find(supportedLocale => supportedLocale.locale === currentLocale)?.label}
+          </List.Item>
+        </Box>
+        <StyledCollapseIconWrapper>
+          {isOpen ? <ChevronDownIcon w="16px" /> : <ChevronRightIcon w="16px" />}
+        </StyledCollapseIconWrapper>
+      </Box>
+      <Collapse in={isOpen} animateOpacity style={{ background: '#f7f8f8', margin: '0 -12px' }}>
+        {SUPPORTED_LOCALES.filter(v => v.locale !== currentLocale).map(v => (
+          <Box ml="3rem" style={{ cursor: 'pointer' }}>
+            <List.Item key={v.locale} onClick={() => setCurrentLocale?.(v.locale)}>
+              <BlankIcon className="mr-2" />
+              {v.label}
+            </List.Item>
+          </Box>
+        ))}
+      </Collapse>
+    </>
+  )
+}
+
 const MemberProfileButton: React.VFC<{
   id: string
   name: string
@@ -218,6 +249,9 @@ const MemberProfileButton: React.VFC<{
                 {formatMessage(commonMessages.content.creatorPage)}
               </List.Item>
             ))}
+
+          {enabledModules.locale ? <LocaleCollapse /> : null}
+
           {renderMyPageNavItem?.({ memberId: member.id }) ||
             (!(settings['nav.my_page.disable'] === '1') && (
               <BorderedItem onClick={() => history.push(`/members/${member.id}`)} style={{ cursor: 'pointer' }}>