Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-09 23:15:43 +01:00
Code Issues Packages Projects Releases Activity

fixed active state of sub navigation items, which are using activeWhenMatch

Browse Source
This commit is contained in:
Sebastian Sdorra
2020-06-17 14:49:54 +02:00
committed by René Pfeuffer
parent 91aca71591
commit dcac6b3f22
6 changed files with 143 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
scm-ui/ui-components/src/navigation/NavLink.tsx
View File

@@ -27,6 +27,7 @@ import { Link, useRouteMatch } from "react-router-dom";
import { RoutingProps } from "./RoutingProps";
import { FC } from "react";
import useMenuContext from "./MenuContext";
import useActiveMatch from "./useActiveMatch";
type Props = RoutingProps & {
label: string;
@@ -34,11 +35,8 @@ type Props = RoutingProps & {
icon?: string;
};
const NavLink: FC<Props> = ({ to, activeOnlyWhenExact, icon, label, title }) => {
const match = useRouteMatch({
path: to,
exact: activeOnlyWhenExact
});
const NavLink: FC<Props> = ({ to, activeWhenMatch, activeOnlyWhenExact, icon, label, title }) => {
const active = useActiveMatch({to, activeWhenMatch, activeOnlyWhenExact});
const context = useMenuContext();
const collapsed = context.isCollapsed();
@@ -54,7 +52,7 @@ const NavLink: FC<Props> = ({ to, activeOnlyWhenExact, icon, label, title }) =>
return (
<li title={collapsed ? title : undefined}>
<Link className={classNames(!!match ? "is-active" : "", collapsed ? "has-text-centered" : "")} to={to}>
<Link className={classNames(active ? "is-active" : "", collapsed ? "has-text-centered" : "")} to={to}>
{showIcon}
{collapsed ? null : label}
</Link>