update menu opening logic

src/layouts/Main.tsx

@@ -1,25 +1,26 @@
 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';
 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);