cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

Disable & Block Scroll and Click Outside for Dropdown Menu

Browse Source
This commit is contained in:
Belen Curcio 2020-12-02 13:22:41 -03:00
parent 3f5045d3a8
commit 95897aa1c5
1 changed files with 78 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

135
components/common/UserNav/DropdownMenu.tsx
View File

@ -1,12 +1,18 @@
import cn from 'classnames' import cn from 'classnames'
import Link from 'next/link' import Link from 'next/link'
import { FC, useState } from 'react' import { FC, useRef, useState, useEffect } from 'react'
import { useTheme } from 'next-themes' import { useTheme } from 'next-themes'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import s from './DropdownMenu.module.css' import s from './DropdownMenu.module.css'
import { Avatar } from '@components/common' import { Avatar } from '@components/common'
import { Moon, Sun } from '@components/icons' import { Moon, Sun } from '@components/icons'
import { useUI } from '@components/ui/context' 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' import useLogout from '@bigcommerce/storefront-data-hooks/use-logout'
interface DropdownMenuProps { interface DropdownMenuProps {
@ -34,65 +40,80 @@ const DropdownMenu: FC<DropdownMenuProps> = ({ open = false }) => {
const { theme, setTheme } = useTheme() const { theme, setTheme } = useTheme()
const [display, setDisplay] = useState(false) const [display, setDisplay] = useState(false)
const { closeSidebarIfPresent } = useUI() 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 ( return (
<div> <ClickOutside active={display} onClick={() => setDisplay(false)}>
<button <div>
className={s.avatarButton} <button
onClick={() => setDisplay(!display)} className={s.avatarButton}
aria-label="Menu" onClick={() => setDisplay(!display)}
> aria-label="Menu"
<Avatar /> >
</button> <Avatar />
</button>
{display && ( {display && (
<ul className={s.dropdownMenu}> <ul className={s.dropdownMenu} ref={ref}>
{LINKS.map(({ name, href }) => ( {LINKS.map(({ name, href }) => (
<li key={href}> <li key={href}>
<div> <div>
<Link href={href}> <Link href={href}>
<a <a
className={cn(s.link, { className={cn(s.link, {
[s.active]: pathname === href, [s.active]: pathname === href,
})} })}
onClick={closeSidebarIfPresent} onClick={closeSidebarIfPresent}
> >
{name} {name}
</a> </a>
</Link> </Link>
</div> </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>
))} <li>
<li> <a
<a className={cn(s.link, 'border-t border-accents-2 mt-4')}
className={cn(s.link, 'justify-between')} onClick={() => logout()}
onClick={() => >
theme === 'dark' ? setTheme('light') : setTheme('dark') Logout
} </a>
> </li>
<div> </ul>
Theme: <strong>{theme}</strong>{' '} )}
</div> </div>
<div className="ml-3"> </ClickOutside>
{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>
) )
} }