Disable & Block Scroll and Click Outside for Dropdown Menu

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<DropdownMenuProps> = ({ open = false }) => {
   const { theme, setTheme } = useTheme()
   const [display, setDisplay] = useState(false)
   const { closeSidebarIfPresent } = useUI()
+  const ref = useRef() as React.MutableRefObject<HTMLUListElement>
+
+  useEffect(() => {
+    if (ref.current) {
+      if (display) {
+        disableBodyScroll(ref.current)
+      } else {
+        enableBodyScroll(ref.current)
+      }
+    }
+    return () => {
+      clearAllBodyScrollLocks()
+    }
+  }, [display])
 
   return (
-    <div>
-      <button
-        className={s.avatarButton}
-        onClick={() => setDisplay(!display)}
-        aria-label="Menu"
-      >
-        <Avatar />
-      </button>
-
-      {display && (
-        <ul className={s.dropdownMenu}>
-          {LINKS.map(({ name, href }) => (
-            <li key={href}>
-              <div>
-                <Link href={href}>
-                  <a
-                    className={cn(s.link, {
-                      [s.active]: pathname === href,
-                    })}
-                    onClick={closeSidebarIfPresent}
-                  >
-                    {name}
-                  </a>
-                </Link>
-              </div>
+    <ClickOutside active={display} onClick={() => setDisplay(false)}>
+      <div>
+        <button
+          className={s.avatarButton}
+          onClick={() => setDisplay(!display)}
+          aria-label="Menu"
+        >
+          <Avatar />
+        </button>
+        {display && (
+          <ul className={s.dropdownMenu} ref={ref}>
+            {LINKS.map(({ name, href }) => (
+              <li key={href}>
+                <div>
+                  <Link href={href}>
+                    <a
+                      className={cn(s.link, {
+                        [s.active]: pathname === href,
+                      })}
+                      onClick={closeSidebarIfPresent}
+                    >
+                      {name}
+                    </a>
+                  </Link>
+                </div>
+              </li>
+            ))}
+            <li>
+              <a
+                className={cn(s.link, 'justify-between')}
+                onClick={() =>
+                  theme === 'dark' ? setTheme('light') : setTheme('dark')
+                }
+              >
+                <div>
+                  Theme: <strong>{theme}</strong>{' '}
+                </div>
+                <div className="ml-3">
+                  {theme == 'dark' ? (
+                    <Moon width={20} height={20} />
+                  ) : (
+                    <Sun width="20" height={20} />
+                  )}
+                </div>
+              </a>
             </li>
-          ))}
-          <li>
-            <a
-              className={cn(s.link, 'justify-between')}
-              onClick={() =>
-                theme === 'dark' ? setTheme('light') : setTheme('dark')
-              }
-            >
-              <div>
-                Theme: <strong>{theme}</strong>{' '}
-              </div>
-              <div className="ml-3">
-                {theme == 'dark' ? (
-                  <Moon width={20} height={20} />
-                ) : (
-                  <Sun width="20" height={20} />
-                )}
-              </div>
-            </a>
-          </li>
-          <li>
-            <a
-              className={cn(s.link, 'border-t border-accents-2 mt-4')}
-              onClick={() => logout()}
-            >
-              Logout
-            </a>
-          </li>
-        </ul>
-      )}
-    </div>
+            <li>
+              <a
+                className={cn(s.link, 'border-t border-accents-2 mt-4')}
+                onClick={() => logout()}
+              >
+                Logout
+              </a>
+            </li>
+          </ul>
+        )}
+      </div>
+    </ClickOutside>
   )
 }