|
| 1 | +"use client"; |
| 2 | + |
| 3 | +import cn from "classnames"; |
| 4 | +import type { ReactNode } from "react"; |
| 5 | +import { useState } from "react"; |
| 6 | +import styles from "./styles.module.css"; |
| 7 | + |
| 8 | +export interface HeaderNavLink { |
| 9 | + content: string; |
| 10 | + href: string; |
| 11 | + className?: string; |
| 12 | + isCta?: boolean; |
| 13 | + leadingIcon?: ReactNode; |
| 14 | + target?: string; |
| 15 | +} |
| 16 | + |
| 17 | +interface MobileMenuProps { |
| 18 | + isHome?: boolean; |
| 19 | + links: HeaderNavLink[]; |
| 20 | +} |
| 21 | + |
| 22 | +export default function MobileMenu({ isHome, links }: MobileMenuProps) { |
| 23 | + const [open, setOpen] = useState(false); |
| 24 | + |
| 25 | + return ( |
| 26 | + <> |
| 27 | + <button |
| 28 | + className={cn(styles.drawerButton, "z-10")} |
| 29 | + aria-expanded={open} |
| 30 | + aria-label="Toggle menu" |
| 31 | + onClick={() => setOpen((current) => !current)} |
| 32 | + type="button" |
| 33 | + > |
| 34 | + <span className="sr-only">Toggle navigation</span> |
| 35 | + <svg |
| 36 | + aria-hidden="true" |
| 37 | + className="h-6 w-6" |
| 38 | + fill="none" |
| 39 | + viewBox="0 0 24 24" |
| 40 | + > |
| 41 | + {open ? ( |
| 42 | + <path |
| 43 | + d="M6 6l12 12M18 6 6 18" |
| 44 | + stroke="currentColor" |
| 45 | + strokeLinecap="round" |
| 46 | + strokeLinejoin="round" |
| 47 | + strokeWidth="2" |
| 48 | + /> |
| 49 | + ) : ( |
| 50 | + <path |
| 51 | + d="M4 7h16M4 12h16M4 17h16" |
| 52 | + stroke="currentColor" |
| 53 | + strokeLinecap="round" |
| 54 | + strokeLinejoin="round" |
| 55 | + strokeWidth="2" |
| 56 | + /> |
| 57 | + )} |
| 58 | + </svg> |
| 59 | + </button> |
| 60 | + |
| 61 | + <div |
| 62 | + className={cn( |
| 63 | + styles.drawer, |
| 64 | + open && styles.open, |
| 65 | + isHome && styles.homeDrawer, |
| 66 | + )} |
| 67 | + > |
| 68 | + <nav className={cn(styles.mobileLinks, "!gap-4")} aria-label="Mobile"> |
| 69 | + {links.map( |
| 70 | + ({ href, target, content, className, leadingIcon, isCta }) => ( |
| 71 | + <a |
| 72 | + key={href} |
| 73 | + href={href} |
| 74 | + target={target} |
| 75 | + rel={target === "_blank" ? "noopener noreferrer" : undefined} |
| 76 | + onClick={() => setOpen(false)} |
| 77 | + className={cn( |
| 78 | + styles.link, |
| 79 | + isCta && styles.ctaLinkOverride, |
| 80 | + className, |
| 81 | + )} |
| 82 | + > |
| 83 | + {leadingIcon ? ( |
| 84 | + <span className="inline-flex items-center gap-2"> |
| 85 | + {leadingIcon} |
| 86 | + <span>{content}</span> |
| 87 | + </span> |
| 88 | + ) : ( |
| 89 | + content |
| 90 | + )} |
| 91 | + </a> |
| 92 | + ), |
| 93 | + )} |
| 94 | + </nav> |
| 95 | + </div> |
| 96 | + </> |
| 97 | + ); |
| 98 | +} |
0 commit comments