73 lines
2.3 KiB
TypeScript
73 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import type { CommonContent } from "@/content/types";
|
|
import { type Locale } from "@/lib/i18n";
|
|
import { isComingSoonMode } from "@/lib/site";
|
|
|
|
type BottomNavProps = {
|
|
locale: Locale;
|
|
common: CommonContent;
|
|
};
|
|
|
|
export default function BottomNav({ locale, common }: BottomNavProps) {
|
|
const pathname = usePathname();
|
|
|
|
if (isComingSoonMode()) {
|
|
return (
|
|
<nav aria-label={common.navLabel} className="bottom-nav">
|
|
<div className="container bottom-nav-inner">
|
|
<div className="bottom-nav-links">
|
|
<Link href={`/${locale}`} className="active" aria-current="page">
|
|
<span aria-hidden className="nav-icon">
|
|
○
|
|
</span>
|
|
{common.nav.home}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|
|
|
|
const normalizedPath = pathname !== "/" && pathname.endsWith("/") ? pathname.slice(0, -1) : pathname;
|
|
const homePath = `/${locale}`;
|
|
const aboutPath = `/${locale}/about`;
|
|
const contactPath = `/${locale}/contact`;
|
|
const isHome = normalizedPath === homePath;
|
|
const isAbout = normalizedPath === aboutPath || normalizedPath.startsWith(`${aboutPath}/`);
|
|
const isContact = normalizedPath === contactPath || normalizedPath.startsWith(`${contactPath}/`);
|
|
|
|
return (
|
|
<nav aria-label={common.navLabel} className="bottom-nav">
|
|
<div className="container bottom-nav-inner">
|
|
<div className="bottom-nav-links">
|
|
<Link href={homePath} className={isHome ? "active" : undefined} aria-current={isHome ? "page" : undefined}>
|
|
<span aria-hidden className="nav-icon">
|
|
○
|
|
</span>
|
|
{common.nav.home}
|
|
</Link>
|
|
<Link href={aboutPath} className={isAbout ? "active" : undefined} aria-current={isAbout ? "page" : undefined}>
|
|
<span aria-hidden className="nav-icon">
|
|
□
|
|
</span>
|
|
{common.nav.about}
|
|
</Link>
|
|
<Link
|
|
href={contactPath}
|
|
className={isContact ? "active" : undefined}
|
|
aria-current={isContact ? "page" : undefined}
|
|
>
|
|
<span aria-hidden className="nav-icon">
|
|
◇
|
|
</span>
|
|
{common.nav.contact}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|