| 23 | }; |
| 24 | |
| 25 | export function MobileHeaderMenu({ hideSubmitCta = false, onClose }: Props) { |
| 26 | const locale = useLocale(); |
| 27 | const currentLocale: Locale = hasLocale(locale) ? locale : "en"; |
| 28 | const t = useTranslations("header"); |
| 29 | const common = useTranslations("common"); |
| 30 | const showDownload = true; |
| 31 | |
| 32 | function href(pathname: string) { |
| 33 | return withLocale(pathname, currentLocale); |
| 34 | } |
| 35 | |
| 36 | return ( |
| 37 | <div className="fixed inset-0 z-40 flex flex-col bg-background/95 backdrop-blur lg:hidden"> |
| 38 | <button |
| 39 | type="button" |
| 40 | aria-label={t("closeMenu")} |
| 41 | onClick={onClose} |
| 42 | className="absolute inset-0" |
| 43 | /> |
| 44 | <div className="flex items-center justify-between gap-3 px-5 pt-5 pb-3"> |
| 45 | <PetdexLogo href={href("/")} ariaLabel={common("petdexHome")} /> |
| 46 | <Button |
| 47 | type="button" |
| 48 | variant="petdex-pill" |
| 49 | size="petdex-icon" |
| 50 | aria-label={t("closeMenu")} |
| 51 | onClick={onClose} |
| 52 | > |
| 53 | <X className="size-4" /> |
| 54 | </Button> |
| 55 | </div> |
| 56 | <nav className="mt-4 flex flex-col gap-1 px-5 text-lg"> |
| 57 | <MobileLink href={href("/create")} onClick={onClose}> |
| 58 | {t("create")} |
| 59 | </MobileLink> |
| 60 | <MobileLink href={href("/docs")} onClick={onClose}> |
| 61 | {t("docs")} |
| 62 | </MobileLink> |
| 63 | {showDownload ? ( |
| 64 | <MobileLink href={href("/download")} onClick={onClose}> |
| 65 | <span className="inline-flex items-center gap-2"> |
| 66 | {t("download")} |
| 67 | <span className="rounded-full bg-brand-tint px-1.5 py-0.5 font-mono text-[9px] font-semibold tracking-[0.12em] text-brand uppercase ring-1 ring-brand/30 dark:bg-brand-tint-dark"> |
| 68 | new |
| 69 | </span> |
| 70 | </span> |
| 71 | </MobileLink> |
| 72 | ) : null} |
| 73 | <MobileLink href={href("/collections")} onClick={onClose}> |
| 74 | {t("collections")} |
| 75 | </MobileLink> |
| 76 | <MobileLink href={href("/leaderboard")} onClick={onClose}> |
| 77 | {t("creators")} |
| 78 | </MobileLink> |
| 79 | <MobileLink href={href("/requests")} onClick={onClose}> |
| 80 | {t("requests")} |
| 81 | </MobileLink> |
| 82 | <MobileLink href={href("/advertise")} onClick={onClose}> |