216 lines
7.9 KiB
TypeScript
216 lines
7.9 KiB
TypeScript
"use client";
|
|
|
|
import { memo, useEffect, useRef, useState } from "react";
|
|
import { Link, usePathname, useTranslation } from "@/i18n/navigation";
|
|
import { getStoredUserEmail, pbLogout } from "@/app/lib/pocketbase";
|
|
|
|
interface MenuItem {
|
|
labelKey: string;
|
|
href: string;
|
|
icon: string;
|
|
new?: boolean;
|
|
ad?: boolean;
|
|
}
|
|
|
|
interface MenuSection {
|
|
titleKey: string;
|
|
items: MenuItem[];
|
|
}
|
|
|
|
export default memo(function SiteMenu({
|
|
isOpen,
|
|
onClose,
|
|
onLoginClick,
|
|
}: {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onLoginClick: () => void;
|
|
}) {
|
|
const { t } = useTranslation("menu");
|
|
const pathname = usePathname();
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
const [userEmail, setUserEmail] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
setUserEmail(getStoredUserEmail());
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const handleClickOutside = (e: MouseEvent) => {
|
|
if (ref.current && !ref.current.contains(e.target as Node)) onClose();
|
|
};
|
|
const handleEscape = (e: KeyboardEvent) => {
|
|
if (e.key === "Escape") onClose();
|
|
};
|
|
if (isOpen) {
|
|
document.addEventListener("mousedown", handleClickOutside);
|
|
document.addEventListener("keydown", handleEscape);
|
|
}
|
|
return () => {
|
|
document.removeEventListener("mousedown", handleClickOutside);
|
|
document.removeEventListener("keydown", handleEscape);
|
|
};
|
|
}, [isOpen, onClose]);
|
|
|
|
const sections: MenuSection[] = [
|
|
{
|
|
titleKey: "community",
|
|
items: [
|
|
{ labelKey: "chat", href: "/join", icon: "💬" },
|
|
{ labelKey: "hostMeetup", href: "/meetups/host", icon: "🎤", new: true },
|
|
{ labelKey: "membersMap", href: "/map", icon: "🌐" },
|
|
],
|
|
},
|
|
{
|
|
titleKey: "tools",
|
|
items: [
|
|
{ labelKey: "climateFinder", href: "/tools", icon: "🌤️" },
|
|
{ labelKey: "fireCalculator", href: "/tools", icon: "🌱" },
|
|
{ labelKey: "costCalculator", href: "/tools", icon: "💱" },
|
|
{ labelKey: "aiAssistant", href: "/ai", icon: "🤖", new: true },
|
|
{ labelKey: "yearInReview", href: "/report", icon: "🥂" },
|
|
{ labelKey: "nomadStats", href: "/report/data", icon: "📊", new: true },
|
|
{ labelKey: "gigBoard", href: "/gigs", icon: "💰" },
|
|
],
|
|
},
|
|
{
|
|
titleKey: "help",
|
|
items: [
|
|
{ labelKey: "ideasBugs", href: "/feedback", icon: "💡" },
|
|
{ labelKey: "faq", href: "#", icon: "🆘" },
|
|
{ labelKey: "terms", href: "#", icon: "📄" },
|
|
{ labelKey: "changelog", href: "#", icon: "🚀" },
|
|
],
|
|
},
|
|
{
|
|
titleKey: "other",
|
|
items: [
|
|
{ labelKey: "digitalNomadGuide", href: process.env.NEXT_PUBLIC_DIGITAL_URL || "https://digital.hackrobot.cn/", icon: "📖" },
|
|
{ labelKey: "remoteJobs", href: "#", icon: "💼" },
|
|
{ labelKey: "coworking", href: "#", icon: "🏢" },
|
|
],
|
|
},
|
|
];
|
|
|
|
const profileItems: MenuItem[] = [
|
|
{ labelKey: "yourProfile", href: "/join", icon: "👤" },
|
|
{ labelKey: "settings", href: "/join", icon: "⚙️" },
|
|
{ labelKey: "favorites", href: "/", icon: "❤️" },
|
|
{ labelKey: "pricing", href: "/pricing", icon: "👑" },
|
|
{ labelKey: "nomadInsurance", href: "#", icon: "🛡️", ad: true },
|
|
];
|
|
|
|
const filteredSections = sections;
|
|
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<>
|
|
<div className="fixed inset-0 z-40 bg-black/20 backdrop-blur-sm md:bg-transparent md:backdrop-blur-none" aria-hidden />
|
|
<div
|
|
ref={ref}
|
|
className="fixed left-4 right-4 top-20 md:left-auto md:right-4 md:top-16 md:w-[480px] z-50 rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-2xl overflow-hidden"
|
|
>
|
|
{/* Profile links */}
|
|
<div className="px-4 py-3 border-b border-gray-100 dark:border-gray-800 flex flex-wrap items-center gap-2">
|
|
{profileItems.map((item) => (
|
|
<Link
|
|
key={item.labelKey}
|
|
href={item.href}
|
|
onClick={onClose}
|
|
className="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100 transition-colors"
|
|
>
|
|
<span>{item.icon}</span>
|
|
<span>{t(item.labelKey)}</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
{/* Sections */}
|
|
<div className="max-h-[60vh] overflow-y-auto p-4">
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
|
{filteredSections.map((section) => (
|
|
<div key={section.titleKey}>
|
|
<h3 className="text-xs font-bold uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-3">
|
|
{t(section.titleKey)}
|
|
</h3>
|
|
<ul className="space-y-1">
|
|
{section.items.map((item) => {
|
|
const isExternal = item.href.startsWith("http");
|
|
const linkClass = `flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors ${
|
|
item.href !== "#" && !isExternal && (pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href)))
|
|
? "bg-[#ff4d4f]/10 text-[#ff4d4f]"
|
|
: "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800"
|
|
}`;
|
|
return (
|
|
<li key={item.labelKey}>
|
|
{isExternal ? (
|
|
<a
|
|
href={item.href}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
onClick={onClose}
|
|
className={linkClass}
|
|
>
|
|
<span className="w-5 text-center">{item.icon}</span>
|
|
<span className="flex-1">{t(item.labelKey)}</span>
|
|
{item.new && (
|
|
<span className="px-2 py-0.5 rounded-full bg-[#ff4d4f] text-white text-[10px] font-medium">
|
|
NEW
|
|
</span>
|
|
)}
|
|
{item.ad && (
|
|
<span className="px-2 py-0.5 rounded bg-gray-200 dark:bg-gray-700 text-[10px] text-gray-500">
|
|
Ad
|
|
</span>
|
|
)}
|
|
</a>
|
|
) : (
|
|
<Link
|
|
href={item.href}
|
|
onClick={onClose}
|
|
className={linkClass}
|
|
>
|
|
<span className="w-5 text-center">{item.icon}</span>
|
|
<span className="flex-1">{t(item.labelKey)}</span>
|
|
{item.new && (
|
|
<span className="px-2 py-0.5 rounded-full bg-[#ff4d4f] text-white text-[10px] font-medium">
|
|
NEW
|
|
</span>
|
|
)}
|
|
{item.ad && (
|
|
<span className="px-2 py-0.5 rounded bg-gray-200 dark:bg-gray-700 text-[10px] text-gray-500">
|
|
Ad
|
|
</span>
|
|
)}
|
|
</Link>
|
|
)}
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
{userEmail && (
|
|
<div className="p-4 border-t border-gray-100 dark:border-gray-800">
|
|
<button
|
|
onClick={() => {
|
|
pbLogout();
|
|
onClose();
|
|
}}
|
|
className="flex items-center gap-2 w-full px-3 py-2 rounded-lg text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
|
|
>
|
|
<span>🚪</span>
|
|
<span>{t("logout")}</span>
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
});
|