✨ Link modifications
This commit is contained in:
parent
0538f71ae6
commit
eaa68f515a
@ -20,7 +20,6 @@ export default class BurgerModal extends React.Component<IProps, IState> {
|
|||||||
<div className={classes["root"]}>
|
<div className={classes["root"]}>
|
||||||
<NavigationLink path={"/folder"} text="Dossiers en cours" />
|
<NavigationLink path={"/folder"} text="Dossiers en cours" />
|
||||||
<NavigationLink text="Dossiers archivés" />
|
<NavigationLink text="Dossiers archivés" />
|
||||||
<NavigationLink path={"/"} text="Home" />
|
|
||||||
<div className={classes["separator"]} />
|
<div className={classes["separator"]} />
|
||||||
<LogOutButton />
|
<LogOutButton />
|
||||||
</div>
|
</div>
|
||||||
|
@ -19,4 +19,8 @@
|
|||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.desactivated{
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -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 classNames from "classnames";
|
||||||
|
import Link from "next/link";
|
||||||
import router from "next/router";
|
import router from "next/router";
|
||||||
|
import React from "react";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
|
|
||||||
|
import Typography, { ITypo } from "../../Typography";
|
||||||
|
import classes from "./classes.module.scss";
|
||||||
|
|
||||||
type IPropsClass = {
|
type IPropsClass = {
|
||||||
text: string | JSX.Element;
|
text: string | JSX.Element;
|
||||||
path?: string;
|
path?: string;
|
||||||
@ -16,20 +17,30 @@ type IStateClass = {};
|
|||||||
|
|
||||||
class HeaderLinkClass extends React.Component<IPropsClass, IStateClass> {
|
class HeaderLinkClass extends React.Component<IPropsClass, IStateClass> {
|
||||||
public override render(): JSX.Element {
|
public override render(): JSX.Element {
|
||||||
|
if (this.props.path !== "" && this.props.path !== undefined) {
|
||||||
return (
|
return (
|
||||||
<Link href={this.props.path ?? ""} className={classNames(classes["root"], this.props.isActive && [classes["active"]])}>
|
<Link href={this.props.path} className={classNames(classes["root"], this.props.isActive && classes["active"])}>
|
||||||
<div className={classes["content"]}>
|
<div className={classes["content"]}>
|
||||||
<Typography typo={this.props.isActive ? ITypo.P_SB_18 : ITypo.NAV_HEADER_18}>{this.props.text}</Typography>
|
<Typography typo={this.props.isActive ? ITypo.P_SB_18 : ITypo.NAV_HEADER_18}>{this.props.text}</Typography>
|
||||||
</div>
|
</div>
|
||||||
{this.props.isActive && <div className={classes["underline"]} />}
|
{this.props.isActive && <div className={classes["underline"]} />}
|
||||||
</Link>
|
</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>
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function HeaderLink(props: IPropsClass) {
|
export default function HeaderLink(props: IPropsClass) {
|
||||||
const [url, setUrl] = useState("");
|
const [url, setUrl] = useState("");
|
||||||
useEffect(() => setUrl(router?.asPath), []);
|
useEffect(() => setUrl(router?.asPath), []);
|
||||||
const isActive = url === props.path;
|
const isActive = url.includes(props.path!);
|
||||||
return <HeaderLinkClass {...props} isActive={isActive} />;
|
return <HeaderLinkClass {...props} isActive={isActive} />;
|
||||||
}
|
}
|
||||||
|
@ -10,7 +10,6 @@ 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={"Home"} path={"/"} />
|
|
||||||
<HeaderLink text={"Dossiers en cours"} path={"/folder"} />
|
<HeaderLink text={"Dossiers en cours"} path={"/folder"} />
|
||||||
<HeaderLink text={"Dossiers archivés"} path={""} isActive={false} />
|
<HeaderLink text={"Dossiers archivés"} path={""} isActive={false} />
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
import "reflect-metadata";
|
import "reflect-metadata";
|
||||||
|
|
||||||
import ChevronIcon from "@Assets/Icons/chevron.svg";
|
import ChevronIcon from "@Assets/Icons/chevron.svg";
|
||||||
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
|
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
|
||||||
import FolderBoxInformation from "@Front/Components/DesignSystem/FolderBoxInformation";
|
import FolderBoxInformation from "@Front/Components/DesignSystem/FolderBoxInformation";
|
||||||
@ -14,7 +15,6 @@ import BasePage from "../../Base";
|
|||||||
import classes from "./classes.module.scss";
|
import classes from "./classes.module.scss";
|
||||||
import ClientSection from "./ClientSection";
|
import ClientSection from "./ClientSection";
|
||||||
|
|
||||||
|
|
||||||
type IPropsClass = {
|
type IPropsClass = {
|
||||||
selectedFolderUid: string;
|
selectedFolderUid: string;
|
||||||
};
|
};
|
||||||
@ -105,8 +105,8 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
|
|||||||
// const selectedFolder = await Fodler.getInstance().getByUid(this.props.selectedFolderUid);
|
// const selectedFolder = await Fodler.getInstance().getByUid(this.props.selectedFolderUid);
|
||||||
// this.setState({ selectedFolder });
|
// this.setState({ selectedFolder });
|
||||||
// console.log(folders);
|
// console.log(folders);
|
||||||
for(const folder of folders) {
|
for (const folder of folders) {
|
||||||
if(folder.uid === this.props.selectedFolderUid) {
|
if (folder.uid === this.props.selectedFolderUid) {
|
||||||
this.setState({ selectedFolder: folder });
|
this.setState({ selectedFolder: folder });
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user