fix(v2): Add hooks to detect window resize, toggle off sidebar and navbar in desktop (#2932)

* Add hooks to detect window resize, toggle off sidebar and navbar on desktop

* Review fixes

* Latest fixes. Refactor window sizes into object

* Fix deps and checks on windowSize change

Co-authored-by: guillaume <guillaume.jacquart@abtasty.com>

packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js

@@ -10,6 +10,7 @@ import clsx from 'clsx';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useUserPreferencesContext from '@theme/hooks/useUserPreferencesContext';
 import useLockBodyScroll from '@theme/hooks/useLockBodyScroll';
+import useWindowSize, {windowSizes} from '@theme/hooks/useWindowSize';
 import useLogo from '@theme/hooks/useLogo';
 import useScrollPosition from '@theme/hooks/useScrollPosition';
 import Link from '@docusaurus/Link';
@@ -176,6 +177,13 @@ function DocSidebar(props) {
   } = props;
 
   useLockBodyScroll(showResponsiveSidebar);
+  const windowSize = useWindowSize();
+
+  useEffect(() => {
+    if (windowSize === windowSizes.desktop) {
+      setShowResponsiveSidebar(false);
+    }
+  }, [windowSize]);
 
   if (!currentSidebar) {
     return null;

packages/docusaurus-theme-classic/src/theme/Navbar/index.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {useCallback, useState} from 'react';
+import React, {useCallback, useState, useEffect} from 'react';
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
@@ -16,6 +16,7 @@ import Toggle from '@theme/Toggle';
 import useThemeContext from '@theme/hooks/useThemeContext';
 import useHideableNavbar from '@theme/hooks/useHideableNavbar';
 import useLockBodyScroll from '@theme/hooks/useLockBodyScroll';
+import useWindowSize, {windowSizes} from '@theme/hooks/useWindowSize';
 import useLogo from '@theme/hooks/useLogo';
 
 import styles from './styles.module.css';
@@ -201,6 +202,14 @@ function Navbar() {
     [setLightTheme, setDarkTheme],
   );
 
+  const windowSize = useWindowSize();
+
+  useEffect(() => {
+    if (windowSize === windowSizes.desktop) {
+      setSidebarShown(false);
+    }
+  }, [windowSize]);
+
   const {leftLinks, rightLinks} = splitLinks(links);
 
   return (

packages/docusaurus-theme-classic/src/theme/hooks/useWindowSize.js

@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {useEffect, useState} from 'react';
+
+const desktopThresholdWidth = 996;
+
+const windowSizes = {
+  desktop: 'desktop',
+  mobile: 'mobile',
+};
+
+function useWindowSize() {
+  const isClient = typeof window !== 'undefined';
+
+  function getSize() {
+    if (!isClient) {
+      return undefined;
+    }
+    return window.innerWidth > desktopThresholdWidth
+      ? windowSizes.desktop
+      : windowSizes.mobile;
+  }
+
+  const [windowSize, setWindowSize] = useState(getSize);
+
+  useEffect(() => {
+    if (!isClient) {
+      return false;
+    }
+
+    function handleResize() {
+      setWindowSize(getSize());
+    }
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return windowSize;
+}
+
+export {windowSizes};
+export default useWindowSize;