import { NavLink, useLocation, useNavigate } from "react-router-dom";
const ICON = {
home: (
),
browse: (
),
search: (
),
schedule: (
),
movies: (
),
manga: (
),
music: (
),
profile: (
),
};
const ITEMS = [
{ to: "/home", label: "Home", icon: ICON.home },
{ to: "/browse", label: "Browse", icon: ICON.browse },
{ to: "/movies", label: "Movies", icon: ICON.movies },
{ to: "/schedule", label: "Schedule", icon: ICON.schedule },
{ to: "/manga", label: "Manga", icon: ICON.manga },
{ to: "/music", label: "Music", icon: ICON.music },
{ to: "/home", label: "Profile", icon: ICON.profile, action: "profile" },
];
export default function MobileNav() {
const { pathname } = useLocation();
const navigate = useNavigate();
const isFullscreen =
pathname.startsWith("/watch") ||
pathname === "/manga/read" ||
pathname.startsWith("/manga/read/") ||
/^\/movies\/.+\/watch$/.test(pathname);
if (isFullscreen) return null;
const isActive = (to, action) => {
if (action === "profile") return pathname === "/home" || pathname === "/";
if (to === "/browse") return pathname === "/browse" || pathname === "/search";
return pathname === to;
};
const handleClick = (item) => {
if (item.action === "profile") {
window.dispatchEvent(new CustomEvent("open-auth-modal"));
return;
}
if (item.to) navigate(item.to);
};
return (
);
}