Merge pull request #106 from the-programmers-hangout/fix-lock-body-on-opening-sidebar

fix(resources): lock body on opening mobile sidebar.

src/components/ResourcesSidebar/index.tsx

@@ -2,6 +2,7 @@ import { graphql, Link, useStaticQuery } from "gatsby"
 import React, { FC, HTMLAttributes, memo, useState } from "react"
 import Scrollbar from "react-perfect-scrollbar"
 import "react-perfect-scrollbar/dist/css/styles.css"
+import { useLockBodyScroll } from "../../hooks/useLockBodyScroll"
 import TriangleDown from "../../icons/triangle-down.svg"
 import Banner from "../../images/tph-banner.svg"
 import { IAllResourcesQuery, IFileOrFolder, IFolder } from "../../types"
@@ -95,7 +96,7 @@ const MenuItem: FC<IMenuItemProps> = ({ children, to }) => {
   )
 }
 
-export const ResourcesSidebar: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
+export const ResourcesSidebar: FC<HTMLAttributes<HTMLDivElement>> = props => {
   const resources = useStaticQuery<IAllResourcesQuery>(ALL_RESOURCES)
   const tree = useBuildTree(resources)
 

src/hooks/useLockBodyScroll.tsx

@@ -0,0 +1,23 @@
+import { useState } from "react"
+
+export const useLockBodyScroll = () => {
+  const documentGlobal = typeof document !== "undefined" && document
+  const [locked, setLocked] = useState<boolean>(false)
+
+  function lock() {
+    setLocked(true)
+  }
+
+  function unlock() {
+    setLocked(false)
+  }
+
+  const body = documentGlobal && document.querySelector("body")
+  const gatsbyNode = documentGlobal && document.querySelector<HTMLDivElement>("#___gatsby")
+  if (body && gatsbyNode) {
+    body.style.overflow = locked ? "hidden" : ""
+    gatsbyNode.style.overflowY = locked ? "scroll" : ""
+  }
+
+  return { locked, lock, unlock }
+}

src/layouts/ResourcesLayout/index.tsx

@@ -10,19 +10,23 @@ import React, { FC, useState } from "react"
 import { MobileHeader } from "../../components/MobileHeader"
 import { ResourcesSidebar } from "../../components/ResourcesSidebar"
 import { GlobalStyles } from "../../globalStyles"
+import { useLockBodyScroll } from "../../hooks/useLockBodyScroll"
 import { SidebarProvider } from "../../SidebarProvider"
 import { ThemeProvider } from "../../ThemeProvider"
 import * as SC from "./styles"
 
 export const ResourcesLayout: FC = ({ children }) => {
   const [activeMobileMenu, setActiveMobileMenu] = useState(false)
+  const { lock, unlock } = useLockBodyScroll()
 
   function openMenu() {
     setActiveMobileMenu(true)
+    lock()
   }
 
   function closeMenu() {
     setActiveMobileMenu(false)
+    unlock()
   }
 
   return (