52 lines
1.2 KiB
TypeScript
52 lines
1.2 KiB
TypeScript
|
import { FC, useMemo } from "react";
|
||
|
|
import { useRouter } from "next/router";
|
||
|
|
import { Breadcrumbs, Link as MuiLink } from "@mui/material";
|
||
|
|
import Link from "next/link";
|
||
|
|
|
||
|
|
export const DefaultNavbar: FC = () => {
|
||
|
|
const router = useRouter();
|
||
|
|
|
||
|
|
const breadcrumbs = useMemo(() => {
|
||
|
|
const linkPath = router.asPath.split("/");
|
||
|
|
linkPath.shift();
|
||
|
|
return linkPath.map((path, i) => ({
|
||
|
|
breadcrumb: path,
|
||
|
|
href: "/" + linkPath.slice(0, i + 1).join("/"),
|
||
|
|
}));
|
||
|
|
}, [router.asPath]);
|
||
|
|
|
||
|
|
if (!breadcrumbs) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
|
||
|
|
console.log(breadcrumbs);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Breadcrumbs aria-label="breadcrumb">
|
||
|
|
<Link href="/" passHref>
|
||
|
|
<MuiLink
|
||
|
|
underline="hover"
|
||
|
|
color={
|
||
|
|
breadcrumbs.length === 1 && breadcrumbs[0].href == "/"
|
||
|
|
? "text.primary"
|
||
|
|
: "inherit"
|
||
|
|
}
|
||
|
|
>
|
||
|
|
home
|
||
|
|
</MuiLink>
|
||
|
|
</Link>
|
||
|
|
|
||
|
|
{breadcrumbs.map((breadcrumb, i) => (
|
||
|
|
<Link key={breadcrumb.href} href={breadcrumb.href} passHref>
|
||
|
|
<MuiLink
|
||
|
|
underline="hover"
|
||
|
|
color={i === breadcrumbs.length - 1 ? "text.primary" : "inherit"}
|
||
|
|
>
|
||
|
|
{breadcrumb.breadcrumb}
|
||
|
|
</MuiLink>
|
||
|
|
</Link>
|
||
|
|
))}
|
||
|
|
</Breadcrumbs>
|
||
|
|
);
|
||
|
|
};
|