Thiago Chaves
0d0b38391d
A lingering problem exists where the content is allowed to expand indefinitely vertically. This might be an issue with the stacks of flex elements near the root of the DOM. Since the value fixing this is still uncertain I'll leave as it is for now.
30 lines
834 B
TypeScript
30 lines
834 B
TypeScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/router";
|
|
import { UrlObject } from "url";
|
|
|
|
export interface NavigationItemProps {
|
|
text: string;
|
|
iconUrl?: string;
|
|
href: string;
|
|
}
|
|
|
|
export function NavigationItem({ text, iconUrl, href }: NavigationItemProps) {
|
|
const router = useRouter();
|
|
|
|
let active = false;
|
|
if (href === "/" && router.pathname === "/") active = true;
|
|
if (href !== "/" && router.pathname.startsWith(href)) active = true;
|
|
|
|
return (
|
|
<li className="navigation-li">
|
|
<Link href={href} passHref>
|
|
<a className={active ? "navigation-item active" : "navigation-item"}>
|
|
{iconUrl && <Image src={iconUrl} width="24" height="24" alt="" />}
|
|
<span className="text-navigation">{text}</span>
|
|
</a>
|
|
</Link>
|
|
</li>
|
|
);
|
|
}
|