gistfile1.txt

export const MobileNavigationMenu = ({ targetSelector }: { targetSelector: string }) => {
    if (!document) {
        // We're in SSR/SSG. Render fallback content of a menu button in the closed stated.
        return <MenuButton isOpen={ false } />;
    }

    const menu = document.querySelector(targetSelector);
    if (!menu) return null;

    const [isOpen, setIsOpen] = useState(false);

    useEffect(() => {
        if (isOpen) {
            menu.classList.remove('hidden');
            menu.classList.add('block');
        } else {
            menu.classList.remove('block');
            menu.classList.add('hidden');
        }
    }, [isOpen]);

    return (
        <>
            { isOpen }
            <MenuButton isOpen={ isOpen } onChange={ setIsOpen } />
        </>
    );
};