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 Typography, { ITypo } from "../../Typography";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
type IPropsClass = { type IProps = {
text: string | JSX.Element; text: string | JSX.Element;
path?: string; path: string;
isActive?: boolean; isActive?: boolean;
routesActive: string[];
}; };
type IPropsClass = IProps;
type IStateClass = {}; type IStateClass = {};
class HeaderLinkClass extends React.Component<IPropsClass, 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) { export default function HeaderLink(props: IProps) {
/**
* TODO: We need to fix the check and include subPathName
* BUT
* `/folder/archived` and `/folder/xxx` should be differenciated
*/
const router = useRouter(); const router = useRouter();
const { pathname } = router; 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} />; 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 React from "react";
import HeaderLink from "../HeaderLink"; import HeaderLink from "../HeaderLink";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import Module from "@Front/Config/Module";
type IProps = {}; type IProps = {};
type IState = {}; type IState = {};
@ -11,10 +11,15 @@ export default class Navigation extends React.Component<IProps, IState> {
public override render(): JSX.Element { public override render(): JSX.Element {
return ( return (
<div className={classes["root"]}> <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 <HeaderLink
text={"Dossiers archivés"} text={"Dossiers archivés"}
path={Module.getInstance().get().modules.pages.Folder.pages.FolderArchived.props.path} path={Module.getInstance().get().modules.pages.Folder.pages.FolderArchived.props.path}
routesActive={[Module.getInstance().get().modules.pages.Folder.pages.FolderArchived.props.path]}
/> />
</div> </div>
); );