MobileMenuTrigger.tsx 1.1 KB

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