diff --git a/src/layouts/Main.tsx b/src/layouts/Main.tsx index 7a540298c..c78bdf8bd 100644 --- a/src/layouts/Main.tsx +++ b/src/layouts/Main.tsx @@ -1,5 +1,4 @@ import { useEffect, useMemo, useState } from 'react'; -import { useSelector } from 'react-redux'; import { Telegram } from 'src/components/actionBar/Telegram'; import { GitHub } from 'src/components/actionBar/GitHub'; import { localStorageKeys } from 'src/constants/localStorageKeys'; @@ -7,19 +6,21 @@ import AppMenu from 'src/containers/application/AppMenu'; import AppSideBar from 'src/containers/application/AppSideBar'; import Header from 'src/containers/application/Header/Header'; import useSetActiveAddress from 'src/hooks/useSetActiveAddress'; -import { RootState } from 'src/redux/store'; -import styles from './Main.module.scss'; -import { useDevice } from 'src/contexts/device'; import Discord from 'src/components/actionBar/Discord/Discord'; import Twitter from 'src/components/actionBar/Twitter/Twitter'; +import { useAppSelector } from 'src/redux/hooks'; +import styles from './Main.module.scss'; function MainLayout({ children }: { children: JSX.Element }) { - const { pocket } = useSelector((state: RootState) => state); + const pocket = useAppSelector(({ pocket }) => pocket); const { defaultAccount } = pocket; - const { isMobile } = useDevice(); const { addressActive } = useSetActiveAddress(defaultAccount); - const [openMenu, setOpenMenu] = useState(false); + + // for new user show menu, else no + animation + const [openMenu, setOpenMenu] = useState( + !localStorage.getItem(localStorageKeys.MENU_SHOW) + ); function toggleMenu(isOpen: boolean) { const newState = isOpen; @@ -28,15 +29,18 @@ function MainLayout({ children }: { children: JSX.Element }) { localStorage.setItem(localStorageKeys.MENU_SHOW, newState.toString()); } + // for initial animation useEffect(() => { - // for animation - if ( - localStorage.getItem(localStorageKeys.MENU_SHOW) !== 'false' && - !isMobile - ) { - toggleMenu(true); - } - }, [isMobile]); + const menuLSState = localStorage.getItem(localStorageKeys.MENU_SHOW); + + const timeout = setTimeout(() => { + toggleMenu(menuLSState === 'true'); + }, 500); + + return () => { + clearTimeout(timeout); + }; + }, []); function closeMenu() { toggleMenu(false);