MobileMenuTrigger.tsx 984 B

123456789101112131415161718192021222324252627
  1. 'use client';
  2. import { useState } from "react";
  3. import MobileMenu from "./MobileMenu";
  4. export default function MobileMenuTrigger({ menuData }: { menuData: any[] }) {
  5. const [isOpen, setIsOpen] = useState(false);
  6. const toggleMenu = () => setIsOpen((prev) => !prev);
  7. const closeMenu = () => setIsOpen(false);
  8. return (
  9. <>
  10. {/* 汉堡按钮 */}
  11. <button className="flex-none w-6 h-6" onClick={toggleMenu}>
  12. <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  13. <rect x="0" y="0" width="24" height="24" fill="#FFFFFF" fillOpacity="0" />
  14. <path stroke="currentColor" strokeWidth="1.5" d="M4 5L20 5" />
  15. <path stroke="currentColor" strokeWidth="1.5" d="M4 12L20 12" />
  16. <path stroke="currentColor" strokeWidth="1.5" d="M4 19L20 19" />
  17. </svg>
  18. </button>
  19. {/* 抽屉菜单 */}
  20. <MobileMenu menu={menuData} isOpen={isOpen} onClose={closeMenu} />
  21. </>
  22. );
  23. }