4nk/lecoffre-front
4
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

✨ Fixing active link in header

Browse Source
This commit is contained in:
Maxime Lalo 2023-04-27 10:42:30 +02:00
parent cd93d5c340
commit 39cba4981f
2 changed files with 18 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/front/Components/DesignSystem/Header/HeaderLink/index.tsx
View File

@ -6,12 +6,15 @@ import React from "react";
import Typography, { ITypo } from "../../Typography";
import classes from "./classes.module.scss";
type IPropsClass = {
type IProps = {
text: string | JSX.Element;
path?: string;
path: string;
isActive?: boolean;
routesActive: string[];
};
type IPropsClass = IProps;
type IStateClass = {};
class HeaderLinkClass extends React.Component<IPropsClass, IStateClass> {
@ -37,14 +40,13 @@ class HeaderLinkClass extends React.Component<IPropsClass, IStateClass> {
}
}
export default function HeaderLink(props: IPropsClass) {
/**
* TODO: We need to fix the check and include subPathName
* BUT
* `/folder/archived` and `/folder/xxx` should be differenciated
*/
export default function HeaderLink(props: IProps) {
const router = useRouter();
const { pathname } = router;
const isActive = pathname === props.path;
let isActive = props.path === pathname;
for (const routeActive of props.routesActive) {
if (isActive) break;
isActive = pathname.includes(routeActive);
}
return <HeaderLinkClass {...props} isActive={isActive} />;
}

9
src/front/Components/DesignSystem/Header/Navigation/index.tsx
View File

@ -1,8 +1,8 @@
import Module from "@Front/Config/Module";
import React from "react";
import HeaderLink from "../HeaderLink";
import classes from "./classes.module.scss";
import Module from "@Front/Config/Module";
type IProps = {};
type IState = {};
@ -11,10 +11,15 @@ export default class Navigation extends React.Component<IProps, IState> {
public override render(): JSX.Element {
return (
<div className={classes["root"]}>
<HeaderLink text={"Dossiers en cours"} path={Module.getInstance().get().modules.pages.Folder.props.path} />
<HeaderLink
text={"Dossiers en cours"}
path={Module.getInstance().get().modules.pages.Folder.props.path}
routesActive={[Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path]}
/>
<HeaderLink
text={"Dossiers archivés"}
path={Module.getInstance().get().modules.pages.Folder.pages.FolderArchived.props.path}
routesActive={[Module.getInstance().get().modules.pages.Folder.pages.FolderArchived.props.path]}
/>
</div>
);