import { FaListUl } from "@react-icons/all-files/fa/FaListUl"; ... function AsideVisibleToggle() { const [targetExists, setTargetExists] = React.useState(false); const [isTargetVisible, setIsTargetVisible] = React.useState(false); const [isOverlayVisible, setIsOverlayVisible] = React.useState(false); const [isSmallScreen, setIsSmallScreen] = React.useState(false); React.useEffect(() => { const targetElement = document.querySelector('.notion-aside-table-of-contents'); setTargetExists(!!targetElement); }, []); React.useEffect(() => { const mediaQuery = window.matchMedia('(max-width: 1300px)'); const handleScreenChange = (e) => { setIsSmallScreen(e.matches); const targetElement = document.querySelector('.notion-aside') as HTMLElement; if (targetElement) { if (e.matches) { setIsTargetVisible(false); } else { targetElement.style.display = 'flex'; targetElement.style.opacity = '1'; targetElement.style.transform = 'translateX(0)'; setIsOverlayVisible(false); } } } mediaQuery.addEventListener('change', handleScreenChange); setIsSmallScreen(mediaQuery.matches); return () => mediaQuery.removeEventListener('change', handleScreenChange); }, []); React.useEffect(() => { const handleClickOutside = (event) => { const targetElement = document.querySelector('.notion-aside'); if (targetElement && !targetElement.contains(event.target) && !event.target.closest('.aside-toggle-button')) { setIsTargetVisible(false); setIsOverlayVisible(false); } }; document.addEventListener('mousedown', handleClickOutside); return () => document.removeEventListener('mousedown', handleClickOutside); }, []); React.useEffect(() => { const targetElement = document.querySelector('.notion-aside') as HTMLElement; if (!isSmallScreen) { return } if (targetElement) { if (isTargetVisible) { targetElement.style.display = 'flex'; requestAnimationFrame(() => { targetElement.style.opacity = '1'; targetElement.style.transform = 'translateX(0)'; }); } else { targetElement.style.opacity = '0'; targetElement.style.transform = 'translateX(100%)'; setTimeout(() => { if (!isTargetVisible) targetElement.style.display = 'none'; }, 300); } } }, [isSmallScreen, isTargetVisible]); const handleToggleVisibility = () => { setIsTargetVisible(true); setIsOverlayVisible(true); }; return (

{isSmallScreen && targetExists && (

)} {isOverlayVisible && (

)}

); } export function NotionPage({ ... return ( <> ... {isBlogPost && } ) }