mobile menu fix animation close on page load (#652)

This commit is contained in:
Max Kotlan 2022-01-10 13:14:46 -05:00 committed by GitHub
parent 6bd384b01a
commit c9108f530c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -221,14 +221,17 @@ function SideNavigation(props: Props) {
const isAbsolute = isOnFilePage || isMediumScreen; const isAbsolute = isOnFilePage || isMediumScreen;
const isMobile = useIsMobile(); const isMobile = useIsMobile();
const menuCanCloseCompletely = isOnFilePage || isMobile; const [menuInitialized, setMenuInitialized] = React.useState(false);
const menuCanCloseCompletely = (isOnFilePage && !isMobile) || (isMobile && menuInitialized);
const hideMenuFromView = menuCanCloseCompletely && !sidebarOpen; const hideMenuFromView = menuCanCloseCompletely && !sidebarOpen;
const [canDisposeMenu, setCanDisposeMenu] = React.useState(false); const [canDisposeMenu, setCanDisposeMenu] = React.useState(false);
React.useEffect(() => { React.useEffect(() => {
if (hideMenuFromView) { if (hideMenuFromView || !menuInitialized) {
const handler = setTimeout(() => { const handler = setTimeout(() => {
setMenuInitialized(true);
setCanDisposeMenu(true); setCanDisposeMenu(true);
}, 250); }, 250);
return () => { return () => {
@ -237,7 +240,7 @@ function SideNavigation(props: Props) {
} else { } else {
setCanDisposeMenu(false); setCanDisposeMenu(false);
} }
}, [hideMenuFromView]); }, [hideMenuFromView, menuInitialized]);
const shouldRenderLargeMenu = menuCanCloseCompletely || sidebarOpen; const shouldRenderLargeMenu = menuCanCloseCompletely || sidebarOpen;