Link modifications

This commit is contained in:
Maxime Lalo 2023-04-20 11:02:03 +02:00
parent 0538f71ae6
commit eaa68f515a
5 changed files with 30 additions and 17 deletions

View File

@ -20,7 +20,6 @@ export default class BurgerModal extends React.Component<IProps, IState> {
<div className={classes["root"]}>
<NavigationLink path={"/folder"} text="Dossiers en cours" />
<NavigationLink text="Dossiers archivés" />
<NavigationLink path={"/"} text="Home" />
<div className={classes["separator"]} />
<LogOutButton />
</div>

View File

@ -19,4 +19,8 @@
bottom: 0;
left: 0;
}
&.desactivated{
cursor: not-allowed;
}
}

View File

@ -1,11 +1,12 @@
import React from "react";
import classes from "./classes.module.scss";
import Link from "next/link";
import Typography, { ITypo } from "../../Typography";
import classNames from "classnames";
import Link from "next/link";
import router from "next/router";
import React from "react";
import { useEffect, useState } from "react";
import Typography, { ITypo } from "../../Typography";
import classes from "./classes.module.scss";
type IPropsClass = {
text: string | JSX.Element;
path?: string;
@ -16,20 +17,30 @@ type IStateClass = {};
class HeaderLinkClass extends React.Component<IPropsClass, IStateClass> {
public override render(): JSX.Element {
return (
<Link href={this.props.path ?? ""} className={classNames(classes["root"], this.props.isActive && [classes["active"]])}>
<div className={classes["content"]}>
<Typography typo={this.props.isActive ? ITypo.P_SB_18 : ITypo.NAV_HEADER_18}>{this.props.text}</Typography>
if (this.props.path !== "" && this.props.path !== undefined) {
return (
<Link href={this.props.path} className={classNames(classes["root"], this.props.isActive && classes["active"])}>
<div className={classes["content"]}>
<Typography typo={this.props.isActive ? ITypo.P_SB_18 : ITypo.NAV_HEADER_18}>{this.props.text}</Typography>
</div>
{this.props.isActive && <div className={classes["underline"]} />}
</Link>
);
} else {
return (
<div className={classNames(classes["root"], classes["desactivated"])}>
<div className={classes["content"]}>
<Typography typo={ITypo.NAV_HEADER_18}>{this.props.text}</Typography>
</div>
</div>
{this.props.isActive && <div className={classes["underline"]} />}
</Link>
);
);
}
}
}
export default function HeaderLink(props: IPropsClass) {
const [url, setUrl] = useState("");
useEffect(() => setUrl(router?.asPath), []);
const isActive = url === props.path;
const isActive = url.includes(props.path!);
return <HeaderLinkClass {...props} isActive={isActive} />;
}

View File

@ -10,7 +10,6 @@ export default class Navigation extends React.Component<IProps, IState> {
public override render(): JSX.Element {
return (
<div className={classes["root"]}>
<HeaderLink text={"Home"} path={"/"} />
<HeaderLink text={"Dossiers en cours"} path={"/folder"} />
<HeaderLink text={"Dossiers archivés"} path={""} isActive={false} />
</div>

View File

@ -1,4 +1,5 @@
import "reflect-metadata";
import ChevronIcon from "@Assets/Icons/chevron.svg";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import FolderBoxInformation from "@Front/Components/DesignSystem/FolderBoxInformation";
@ -14,7 +15,6 @@ import BasePage from "../../Base";
import classes from "./classes.module.scss";
import ClientSection from "./ClientSection";
type IPropsClass = {
selectedFolderUid: string;
};
@ -105,8 +105,8 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
// const selectedFolder = await Fodler.getInstance().getByUid(this.props.selectedFolderUid);
// this.setState({ selectedFolder });
// console.log(folders);
for(const folder of folders) {
if(folder.uid === this.props.selectedFolderUid) {
for (const folder of folders) {
if (folder.uid === this.props.selectedFolderUid) {
this.setState({ selectedFolder: folder });
break;
}