From 95897aa1c5efc3561b3a8ec1e0877f548006e890 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Wed, 2 Dec 2020 13:22:41 -0300 Subject: [PATCH] Disable & Block Scroll and Click Outside for Dropdown Menu --- components/common/UserNav/DropdownMenu.tsx | 135 ++++++++++++--------- 1 file changed, 78 insertions(+), 57 deletions(-) diff --git a/components/common/UserNav/DropdownMenu.tsx b/components/common/UserNav/DropdownMenu.tsx index 99b92dff0..fb3ddc7de 100644 --- a/components/common/UserNav/DropdownMenu.tsx +++ b/components/common/UserNav/DropdownMenu.tsx @@ -1,12 +1,18 @@ import cn from 'classnames' import Link from 'next/link' -import { FC, useState } from 'react' +import { FC, useRef, useState, useEffect } from 'react' import { useTheme } from 'next-themes' import { useRouter } from 'next/router' import s from './DropdownMenu.module.css' import { Avatar } from '@components/common' import { Moon, Sun } from '@components/icons' import { useUI } from '@components/ui/context' +import ClickOutside from '@lib/click-outside' +import { + disableBodyScroll, + enableBodyScroll, + clearAllBodyScrollLocks, +} from 'body-scroll-lock' import useLogout from '@bigcommerce/storefront-data-hooks/use-logout' interface DropdownMenuProps { @@ -34,65 +40,80 @@ const DropdownMenu: FC = ({ open = false }) => { const { theme, setTheme } = useTheme() const [display, setDisplay] = useState(false) const { closeSidebarIfPresent } = useUI() + const ref = useRef() as React.MutableRefObject + + useEffect(() => { + if (ref.current) { + if (display) { + disableBodyScroll(ref.current) + } else { + enableBodyScroll(ref.current) + } + } + return () => { + clearAllBodyScrollLocks() + } + }, [display]) return ( -
- - - {display && ( - + )} +
+ ) }