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

🐛 Wrong links in submenu

Browse Source
This commit is contained in:
Maxime Lalo 2023-04-27 10:59:08 +02:00
parent eaaff579fb
commit 7b7e499c73
3 changed files with 23 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,7 +10,7 @@ type IProps = {
text: string | JSX.Element; text: string | JSX.Element;
path: string; path: string;
isActive?: boolean; isActive?: boolean;
routesActive: string[]; routesActive?: string[];
}; };
type IPropsClass = IProps; type IPropsClass = IProps;
@ -44,9 +44,11 @@ export default function HeaderLink(props: IProps) {
const router = useRouter(); const router = useRouter();
const { pathname } = router; const { pathname } = router;
let isActive = props.path === pathname; let isActive = props.path === pathname;
if(props.routesActive){
for (const routeActive of props.routesActive) { for (const routeActive of props.routesActive) {
if (isActive) break; if (isActive) break;
isActive = pathname.includes(routeActive); isActive = pathname.includes(routeActive);
} }
}
return <HeaderLinkClass {...props} isActive={isActive} />; return <HeaderLinkClass {...props} isActive={isActive} />;
} }

21
src/front/Components/DesignSystem/Header/NavigationLink/index.tsx
View File

@ -2,18 +2,19 @@ import React from "react";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import Link from "next/link"; import Link from "next/link";
import classNames from "classnames"; import classNames from "classnames";
import router from "next/router"; import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography"; import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
type IPropsClass = { type IProps = {
text: string | JSX.Element; text: string | JSX.Element;
path?: string; path?: string;
onClick?: () => void; onClick?: () => void;
isEnabled?: boolean; isEnabled?: boolean;
isActive?: boolean; isActive?: boolean;
routesActive?: string[];
}; };
type IPropsClass = IProps;
type IStateClass = {}; type IStateClass = {};
class NavigationLinkClass extends React.Component<IPropsClass, IStateClass> { class NavigationLinkClass extends React.Component<IPropsClass, IStateClass> {
@ -33,9 +34,15 @@ class NavigationLinkClass extends React.Component<IPropsClass, IStateClass> {
} }
} }
export default function NavigationLink(props: IPropsClass) { export default function NavigationLink(props: IProps) {
const [url, setUrl] = useState(""); const router = useRouter();
useEffect(() => setUrl(router?.asPath), []); const { pathname } = router;
const isActive = url === props.path; let isActive = props.path === pathname;
if(props.routesActive){
for (const routeActive of props.routesActive) {
if (isActive) break;
isActive = pathname.includes(routeActive);
}
}
return <NavigationLinkClass {...props} isActive={isActive} />; return <NavigationLinkClass {...props} isActive={isActive} />;
} }

8
src/front/Components/DesignSystem/Header/Profile/ProfileModal/index.tsx
View File

@ -2,6 +2,7 @@ import React from "react";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import NavigationLink from "../../NavigationLink"; import NavigationLink from "../../NavigationLink";
import LogOutButton from "@Front/Components/DesignSystem/LogOutButton"; import LogOutButton from "@Front/Components/DesignSystem/LogOutButton";
import Module from "@Front/Config/Module";
type IProps = { type IProps = {
isOpen: boolean; isOpen: boolean;
@ -17,12 +18,9 @@ export default class ProfileModal extends React.Component<IProps, IState> {
<> <>
<div className={classes["background"]} onClick={this.props.closeModal} /> <div className={classes["background"]} onClick={this.props.closeModal} />
<div className={classes["root"]}> <div className={classes["root"]}>
<NavigationLink text="Mon compte" /> <NavigationLink path={Module.getInstance().get().modules.pages.MyAccount.props.path} text="Mon compte" />
<NavigationLink text="Gestion des utilisateurs" />
<NavigationLink text="Gestion des offices" />
<NavigationLink text="CGU" /> <NavigationLink text="CGU" />
<NavigationLink path={"/design-system"} text="Design System" /> <NavigationLink path={Module.getInstance().get().modules.pages.Home.props.path} text="Home" />
<NavigationLink path={"/"} text="Home" />
<div className={classes["separator"]} /> <div className={classes["separator"]} />
<LogOutButton /> <LogOutButton />
</div> </div>