From a95bd0450c4a00e62bade61ed3d3359e69035695 Mon Sep 17 00:00:00 2001 From: guillaume Date: Sun, 14 Jun 2020 16:26:51 +0200 Subject: [PATCH 1/4] Add hooks to detect window resize, toggle off sidebar and navbar on desktop --- .../src/theme/DocSidebar/index.js | 8 ++++ .../src/theme/Navbar/index.js | 11 ++++- .../src/theme/hooks/useWindowSize.js | 42 +++++++++++++++++++ 3 files changed, 60 insertions(+), 1 deletion(-) create mode 100644 packages/docusaurus-theme-classic/src/theme/hooks/useWindowSize.js diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js index 68e710db040a..49516cc0af89 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js +++ b/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, {desktopSize} 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 === desktopSize && showResponsiveSidebar) { + setShowResponsiveSidebar(false); + } + }, [windowSize]); 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 5edee09174ff..aa0ae7018f48 100644 --- a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js +++ b/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, {desktopSize} 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 === desktopSize && sidebarShown) { + setSidebarShown(false); + } + }, [windowSize]); + const {leftLinks, rightLinks} = splitLinks(links); return ( diff --git a/packages/docusaurus-theme-classic/src/theme/hooks/useWindowSize.js b/packages/docusaurus-theme-classic/src/theme/hooks/useWindowSize.js new file mode 100644 index 000000000000..1e2abcc0c86e --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/hooks/useWindowSize.js @@ -0,0 +1,42 @@ +/** + * 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 desktopSize = 'desktop'; +const mobileSize = 'mobile'; + +function useWindowSize() { + const isClient = typeof window === 'object'; + + function getSize() { + return isClient + ? (window.innerWidth > desktopThresholdWidth && desktopSize) || mobileSize + : undefined; + } + + 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 {desktopSize, mobileSize}; +export default useWindowSize; From 80420b89fdfaebb43b3e5c29814f87e23361870a Mon Sep 17 00:00:00 2001 From: guillaume Date: Tue, 16 Jun 2020 10:54:41 +0200 Subject: [PATCH 2/4] Review fixes --- .../docusaurus-theme-classic/src/theme/Navbar/index.js | 4 ++-- .../src/theme/hooks/useWindowSize.js | 7 ++++--- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js b/packages/docusaurus-theme-classic/src/theme/Navbar/index.js index aa0ae7018f48..dec672d1c762 100644 --- a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js +++ b/packages/docusaurus-theme-classic/src/theme/Navbar/index.js @@ -205,10 +205,10 @@ function Navbar() { const windowSize = useWindowSize(); useEffect(() => { - if (windowSize === desktopSize && sidebarShown) { + if (windowSize === desktopSize) { setSidebarShown(false); } - }, [windowSize]); + }, [windowSize, sidebarShown]); const {leftLinks, rightLinks} = splitLinks(links); diff --git a/packages/docusaurus-theme-classic/src/theme/hooks/useWindowSize.js b/packages/docusaurus-theme-classic/src/theme/hooks/useWindowSize.js index 1e2abcc0c86e..7d2b71f92803 100644 --- a/packages/docusaurus-theme-classic/src/theme/hooks/useWindowSize.js +++ b/packages/docusaurus-theme-classic/src/theme/hooks/useWindowSize.js @@ -15,9 +15,10 @@ function useWindowSize() { const isClient = typeof window === 'object'; function getSize() { - return isClient - ? (window.innerWidth > desktopThresholdWidth && desktopSize) || mobileSize - : undefined; + if (isClient) { + return undefined; + } + return window.innerWidth > desktopThresholdWidth ? desktopSize : mobileSize; } const [windowSize, setWindowSize] = useState(getSize); From 25da3cf7b1f31261233a005e53b7de1fc5d6a942 Mon Sep 17 00:00:00 2001 From: guillaume Date: Tue, 16 Jun 2020 11:28:09 +0200 Subject: [PATCH 3/4] Latest fixes. Refactor window sizes into object --- .../src/theme/DocSidebar/index.js | 4 ++-- .../src/theme/Navbar/index.js | 4 ++-- .../src/theme/hooks/useWindowSize.js | 17 +++++++++++------ 3 files changed, 15 insertions(+), 10 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js index 49516cc0af89..efcb95fe4882 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js +++ b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js @@ -10,7 +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, {desktopSize} from '@theme/hooks/useWindowSize'; +import useWindowSize, {windowSizes} from '@theme/hooks/useWindowSize'; import useLogo from '@theme/hooks/useLogo'; import useScrollPosition from '@theme/hooks/useScrollPosition'; import Link from '@docusaurus/Link'; @@ -180,7 +180,7 @@ function DocSidebar(props) { const windowSize = useWindowSize(); useEffect(() => { - if (windowSize === desktopSize && showResponsiveSidebar) { + if (windowSize === windowSizes.desktop && showResponsiveSidebar) { setShowResponsiveSidebar(false); } }, [windowSize]); diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js b/packages/docusaurus-theme-classic/src/theme/Navbar/index.js index dec672d1c762..952cb8015eeb 100644 --- a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js +++ b/packages/docusaurus-theme-classic/src/theme/Navbar/index.js @@ -16,7 +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, {desktopSize} from '@theme/hooks/useWindowSize'; +import useWindowSize, {windowSizes} from '@theme/hooks/useWindowSize'; import useLogo from '@theme/hooks/useLogo'; import styles from './styles.module.css'; @@ -205,7 +205,7 @@ function Navbar() { const windowSize = useWindowSize(); useEffect(() => { - if (windowSize === desktopSize) { + if (windowSize === windowSizes.desktop) { setSidebarShown(false); } }, [windowSize, sidebarShown]); diff --git a/packages/docusaurus-theme-classic/src/theme/hooks/useWindowSize.js b/packages/docusaurus-theme-classic/src/theme/hooks/useWindowSize.js index 7d2b71f92803..255dbfe5422b 100644 --- a/packages/docusaurus-theme-classic/src/theme/hooks/useWindowSize.js +++ b/packages/docusaurus-theme-classic/src/theme/hooks/useWindowSize.js @@ -8,17 +8,22 @@ import {useEffect, useState} from 'react'; const desktopThresholdWidth = 996; -const desktopSize = 'desktop'; -const mobileSize = 'mobile'; + +const windowSizes = { + desktop: 'desktop', + mobile: 'mobile', +}; function useWindowSize() { - const isClient = typeof window === 'object'; + const isClient = typeof window !== 'undefined'; function getSize() { - if (isClient) { + if (!isClient) { return undefined; } - return window.innerWidth > desktopThresholdWidth ? desktopSize : mobileSize; + return window.innerWidth > desktopThresholdWidth + ? windowSizes.desktop + : windowSizes.mobile; } const [windowSize, setWindowSize] = useState(getSize); @@ -39,5 +44,5 @@ function useWindowSize() { return windowSize; } -export {desktopSize, mobileSize}; +export {windowSizes}; export default useWindowSize; From b1896687611aea10ba51348203e81648b539a833 Mon Sep 17 00:00:00 2001 From: guillaume Date: Tue, 16 Jun 2020 18:10:36 +0200 Subject: [PATCH 4/4] Fix deps and checks on windowSize change --- packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js | 2 +- packages/docusaurus-theme-classic/src/theme/Navbar/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js index efcb95fe4882..422ec5337c06 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js +++ b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js @@ -180,7 +180,7 @@ function DocSidebar(props) { const windowSize = useWindowSize(); useEffect(() => { - if (windowSize === windowSizes.desktop && showResponsiveSidebar) { + if (windowSize === windowSizes.desktop) { setShowResponsiveSidebar(false); } }, [windowSize]); diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js b/packages/docusaurus-theme-classic/src/theme/Navbar/index.js index 952cb8015eeb..3914a1600eab 100644 --- a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js +++ b/packages/docusaurus-theme-classic/src/theme/Navbar/index.js @@ -208,7 +208,7 @@ function Navbar() { if (windowSize === windowSizes.desktop) { setSidebarShown(false); } - }, [windowSize, sidebarShown]); + }, [windowSize]); const {leftLinks, rightLinks} = splitLinks(links);