Fix body scrolling

This commit is contained in:
JamesIntellijoint 2022-01-02 12:31:14 -05:00
parent b9d4ec698e
commit 8fe6cde592

View File

@ -49,27 +49,26 @@ function App() {
} }
} }
function handleBodyScroll() { const menuOpen = showChapterMenu || showTranslationMenu || showMainMenu;
if (showChapterMenu || showTranslationMenu || showMainMenu) {
document.body.style.overflow = "unset"; useEffect(() => {
} else { if (menuOpen) {
document.body.style.overflow = "hidden"; document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "unset";
} }
} }, [showChapterMenu, showTranslationMenu, showMainMenu]);
function showChapters() { function showChapters() {
setShowChapterMenu(!showChapterMenu); setShowChapterMenu(!showChapterMenu);
handleBodyScroll();
} }
function showTranslations() { function showTranslations() {
setShowTranslationMenu(!showTranslationMenu); setShowTranslationMenu(!showTranslationMenu);
handleBodyScroll();
} }
function showMain() { function showMain() {
setShowMainMenu(!showMainMenu); setShowMainMenu(!showMainMenu);
handleBodyScroll();
} }
function selectThemeColor(newTheme: string) { function selectThemeColor(newTheme: string) {
@ -108,7 +107,7 @@ function App() {
return ( return (
<div className={`main theme--${themeColor} theme--${themeFont}`}> <div className={`main theme--${themeColor} theme--${themeFont}`}>
{(showChapterMenu || showTranslationMenu || showMainMenu) && ( {menuOpen && (
<div <div
className="overlay" className="overlay"
onClick={() => { onClick={() => {