From 7e750de6fa9f6c5972fc78145adb85ee91c2d57a Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Wed, 8 Jan 2020 18:06:07 +0300
Subject: [PATCH] refactor(v2): disable scroll when sidebar menu is open
 (#2189)

---
 .../src/theme/DocSidebar/index.js             |  3 +++
 .../src/theme/Navbar/index.js                 |  5 +++--
 .../src/theme/hooks/useLockBodyScroll.js      | 20 +++++++++++++++++++
 3 files changed, 26 insertions(+), 2 deletions(-)
 create mode 100644 packages/docusaurus-theme-classic/src/theme/hooks/useLockBodyScroll.js

diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js
index 1d0080c55b..0d01b97b43 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js
+++ b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js
@@ -9,6 +9,7 @@ import React, {useState, useCallback} from 'react';
 import classnames from 'classnames';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import useLockBodyScroll from '@theme/hooks/useLockBodyScroll';
 import Link from '@docusaurus/Link';
 import isInternalUrl from '@docusaurus/utils'; // eslint-disable-line import/no-extraneous-dependencies
 
@@ -125,6 +126,8 @@ function DocSidebar(props) {
     sidebarCollapsible,
   } = props;
 
+  useLockBodyScroll(showResponsiveSidebar);
+
   if (!currentSidebar) {
     return null;
   }
diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js b/packages/docusaurus-theme-classic/src/theme/Navbar/index.js
index 421e9d5918..76cc27849d 100644
--- a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js
+++ b/packages/docusaurus-theme-classic/src/theme/Navbar/index.js
@@ -17,6 +17,7 @@ import classnames from 'classnames';
 
 import useThemeContext from '@theme/hooks/useThemeContext';
 import useHideableNavbar from '@theme/hooks/useHideableNavbar';
+import useLockBodyScroll from '@theme/hooks/useLockBodyScroll';
 
 import styles from './styles.module.css';
 
@@ -54,12 +55,12 @@ function Navbar() {
   const {theme, setTheme} = useThemeContext();
   const {navbarRef, isNavbarVisible} = useHideableNavbar(hideOnScroll);
 
+  useLockBodyScroll(sidebarShown);
+
   const showSidebar = useCallback(() => {
-    document.body.style.overflow = 'hidden';
     setSidebarShown(true);
   }, [setSidebarShown]);
   const hideSidebar = useCallback(() => {
-    document.body.style.overflow = 'visible';
     setSidebarShown(false);
   }, [setSidebarShown]);
 
diff --git a/packages/docusaurus-theme-classic/src/theme/hooks/useLockBodyScroll.js b/packages/docusaurus-theme-classic/src/theme/hooks/useLockBodyScroll.js
new file mode 100644
index 0000000000..44f6e33835
--- /dev/null
+++ b/packages/docusaurus-theme-classic/src/theme/hooks/useLockBodyScroll.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {useEffect} from 'react';
+
+function useLockBodyScroll(lock = true) {
+  useEffect(() => {
+    document.body.style.overflow = lock ? 'hidden' : 'visible';
+
+    return () => {
+      document.body.style.overflow = 'visible';
+    };
+  }, [lock]);
+}
+
+export default useLockBodyScroll;