Drawer.jsx 560 B

12345678910111213141516171819
  1. const Drawer = ({isOpen, onClose, children}) => {
  2. console.log(isOpen);
  3. return (
  4. <>
  5. {/* 遮罩层 */}
  6. {isOpen && <div className="drawer-overlay" onClick={onClose}/>}
  7. {/* 抽屉导航 */}
  8. <div className={`drawer ${isOpen ? 'drawer-open' : ''}`}>
  9. <div className="drawer-content">
  10. <button className="drawer-close" onClick={onClose}>×</button>
  11. {children}
  12. </div>
  13. </div>
  14. </>
  15. );
  16. };
  17. export default Drawer;