Mastermindzh
7a68e42288
All in 1 big commit :)... Do as I say... not as I do (in my private stuff anyway)
39 lines
977 B
TypeScript
39 lines
977 B
TypeScript
import React, { FunctionComponent } from "react";
|
|
import { Link } from "gatsby";
|
|
|
|
type Props = {
|
|
to: string;
|
|
exact?: boolean;
|
|
activeClassName?: string;
|
|
className?: string;
|
|
activeStyle?: Object;
|
|
style?: Object;
|
|
currentPathName?: string;
|
|
extraActivePaths?: string[];
|
|
};
|
|
|
|
/**
|
|
* A <Link> wrapper that knows if it's "active" or not and sets the status on a parent li.
|
|
*/
|
|
|
|
export const NavItem: FunctionComponent<Props> = ({
|
|
to,
|
|
exact = true,
|
|
activeClassName = "flex-active",
|
|
className,
|
|
extraActivePaths = [],
|
|
currentPathName,
|
|
...rest
|
|
}) => {
|
|
const paths: string[] = [currentPathName, ...extraActivePaths];
|
|
|
|
const isActive = exact
|
|
? paths.includes(to)
|
|
: paths.filter((path) => path !== "/" && (to === path || to.startsWith(path))).length > 0;
|
|
return (
|
|
<li className={isActive ? [className, activeClassName].filter((i) => i).join(" ") : className}>
|
|
<Link to={to} activeClassName={activeClassName} {...rest} />
|
|
</li>
|
|
);
|
|
};
|