import cn from 'classnames' import Link from 'next/link' 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 useLogout from '@framework/auth/use-logout' import { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks, } from 'body-scroll-lock' interface DropdownMenuProps { open?: boolean } const LINKS = [ { name: 'My Orders', href: '/orders', }, { name: 'My Profile', href: '/profile', }, { name: 'My Cart', href: '/cart', }, ] const DropdownMenu: FC = ({ open = false }) => { const logout = useLogout() const { pathname } = useRouter() 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 ( setDisplay(false)}>
{display && ( )}
) } export default DropdownMenu