Merge pull request #3 from AstraProtocol/fix/change-language-in-mobil…

…e-nav fix: change language in mobile nav
AstraProtocol · Jun 27, 2023 · 10e7ed3 · 10e7ed3
2 parents 9e480fe + 4d76379
commit 10e7ed3
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 52 deletions.
diff --git a/src/components/Navbar/MobileNavigation.tsx b/src/components/Navbar/MobileNavigation.tsx
@@ -1,55 +1,23 @@
 import { Collapse, Icon, IconEnum, Typography } from '@astraprotocol/astra-ui'
 import { CollapseProps } from '@astraprotocol/astra-ui/lib/es/components/Collapse'
 import clsx from 'clsx'
-import NavigationConnect from 'components/ButtonConnect/NavigationConnect'
+
 import { useTranslation } from 'contexts/Localization'
 import Image from 'next/image'
 import { useRouter } from 'next/router'
 import { useMemo } from 'react'
+import { LinkMenuConnect, LinkMenuItem, LinkMenuLocale } from './components/LinkMenu'
 import { MenuItem } from './Navigation'
 import styles from './style.module.scss'
 
 type MobileNavigationProps = {
 	items: MenuItem[]
 }
 
-const Checked = () => <span className="icon-checked alert-color-success block-ver-center"></span>
 
-const LinkMenuItem = ({
-	link,
-	label,
-	pathname,
-	classes,
-	prefix,
-}: {
-	link?: string
-	label?: React.ReactNode
-	pathname?: string
-	classes?: string
-	prefix?: React.ReactNode
-}) => (
-	<div
-		className={clsx('radius-base', 'padding-sm', styles.subItem, {
-			[styles.subActive]: pathname === link,
-		})}
-	>
-		<span className="block-center">
-			{!!prefix && prefix}
-			<Typography.Link href={link || ''} classes={clsx('text text-base', styles.link, classes)}>
-				{label}
-			</Typography.Link>
-		</span>
-		{pathname === link && <Checked />}
-	</div>
-)
 
-const LinkMenuConnect = () => (
-	<div className={clsx('radius-base padding-sm', styles.subItem)}>
-		<NavigationConnect classes="width-100 " />
-	</div>
-)
 
-export default function MoibleNavigation({ items }: MobileNavigationProps) {
+export default function MobileNavigation({ items }: MobileNavigationProps) {
 	const router = useRouter()
 	const { currentLanguage } = useTranslation()
 	const { pathname, locale } = router
@@ -77,10 +45,9 @@ export default function MoibleNavigation({ items }: MobileNavigationProps) {
 						</div>
 					)
 					subCollapse = item.submenus.map(item => (
-						<LinkMenuItem
-							link={item.link}
+						<LinkMenuLocale
 							label={item.label}
-							pathname={pathname}
+							onClick={item.onClick}
 							classes={'padding-left-xs'}
 							key={`sub-${item.label}`}
 							prefix={

diff --git a/src/components/Navbar/components/LinkMenu.tsx b/src/components/Navbar/components/LinkMenu.tsx
@@ -0,0 +1,64 @@
+import { Typography } from '@astraprotocol/astra-ui'
+import clsx from 'clsx'
+
+import NavigationConnect from 'components/ButtonConnect/NavigationConnect'
+import styles from '../style.module.scss'
+
+export const LinkMenuLocale = ({
+	onClick,
+	label,
+
+	classes,
+	prefix,
+}: {
+	onClick: Function
+	label?: React.ReactNode
+
+	classes?: string
+	prefix?: React.ReactNode
+}) => (
+	<div className={clsx('radius-base', 'padding-sm', styles.subItem)}>
+		<span className="block-center">
+			{!!prefix && prefix}
+			<a className={clsx('text text-base', styles.link, classes)} onClick={() => onClick()}>
+				{label}
+			</a>
+		</span>
+	</div>
+)
+
+const Checked = () => <span className="icon-checked alert-color-success block-ver-center"></span>
+
+export const LinkMenuItem = ({
+	link,
+	label,
+	pathname,
+	classes,
+	prefix,
+}: {
+	link?: string
+	label?: React.ReactNode
+	pathname?: string
+	classes?: string
+	prefix?: React.ReactNode
+}) => (
+	<div
+		className={clsx('radius-base', 'padding-sm', styles.subItem, {
+			[styles.subActive]: pathname === link,
+		})}
+	>
+		<span className="block-center">
+			{!!prefix && prefix}
+			<Typography.Link href={link || ''} classes={clsx('text text-base', styles.link, classes)}>
+				{label}
+			</Typography.Link>
+		</span>
+		{pathname === link && <Checked />}
+	</div>
+)
+
+export const LinkMenuConnect = () => (
+	<div className={clsx('radius-base padding-sm', styles.subItem)}>
+		<NavigationConnect classes="width-100 " />
+	</div>
+)
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
@@ -13,12 +13,9 @@ import { cloneDeep, isEmpty } from 'lodash'
 import { useTranslation } from 'contexts/Localization'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { WalletHelper } from 'utils/wallet'
-import LiveIcon from './LiveIcon'
 import MobileNavigation from './MobileNavigation'
 import Navigation, { MenuItem, SubMenuItem } from './Navigation'
 import styles from './style.module.scss'
-import SwitchTheme from './SwitchTheme'
-import ButtonConnect from 'components/ButtonConnect'
 import { VI, EN } from '../../config/localization/languages'
 import useAuth from 'hooks/useAuth'
 import { Modal, useModal } from 'components/Modal'
@@ -27,17 +24,17 @@ import NavigationConnect from 'components/ButtonConnect/NavigationConnect'
 export default function Navbar() {
 	const [shadow, setShadow] = useState(false)
 	const [showHamburgerMenu, setShowHamburgerMenu] = useState(false)
-	const [load, setLoad] = useState(false)
-	const { logout } = useAuth()
+	// const [load, setLoad] = useState(false)
+	// const { logout } = useAuth()
 	const _searchWrapperRef = useRef<HTMLDivElement>(null)
 	const [{ wallet }, connect] = useConnectWallet()
 
 	const { t, setLanguage, currentLanguage } = useTranslation()
 
 	const _hideMenu = () => {
-		setLoad(false)
+		// setLoad(false)
 		//time for animation
-		setTimeout(() => setShowHamburgerMenu(false), 500)
+		setShowHamburgerMenu(false)
 	}
 
 	useClickOutsideElement(_searchWrapperRef, _hideMenu)
@@ -57,9 +54,10 @@ export default function Navbar() {
 		}
 	}, [shadow])
 
-	useEffect(() => {
-		setTimeout(() => setLoad(showHamburgerMenu), 100)
-	}, [showHamburgerMenu])
+	// useEffect(() => {
+	// 	const timeout = setTimeout(() => setLoad(showHamburgerMenu), 100)
+	// 	return () => clearTimeout(timeout)
+	// }, [showHamburgerMenu])
 
 	const _setWalletFromLocalStorage = useCallback(async () => {
 		try {
@@ -88,7 +86,7 @@ export default function Navbar() {
 		}
 	}, [wallet])
 
-	const _changeMenu = useCallback(() => {
+	const menus = useMemo(() => {
 		const MENU_ITEMS: MenuItem[] = [
 			{
 				id: '1',
@@ -124,13 +122,19 @@ export default function Navbar() {
 						id: '4.1',
 						label: EN.language,
 						link: EN.code,
-						onClick: () => setLanguage(EN),
+						onClick: () => {
+							dismisMobileNav()
+							setLanguage(EN)
+						},
 					},
 					{
 						id: '4.2',
 						label: VI.language,
 						link: VI.code,
-						onClick: () => setLanguage(VI),
+						onClick: () => {
+							dismisMobileNav()
+							setLanguage(VI)
+						},
 					},
 				],
 			},
@@ -139,7 +143,6 @@ export default function Navbar() {
 		return MENU_ITEMS
 	}, [currentLanguage])
 
-	const menus = _changeMenu()
 
 	const ModalMobileNav = () => (
 		<div