From 9bb5241f464b36fa5f53f5670f5e8974f86ae437 Mon Sep 17 00:00:00 2001
From: "Arnaud D. Natali" <79214488+0xSaitama@users.noreply.github.com>
Date: Tue, 28 Feb 2023 10:06:41 +0100
Subject: [PATCH] add burger menu & navigation links (#6)

solve this ticket :
https://app.ora.pm/p/fb56ed95daa7456b888d266a050b9afa?v=86662&s=28293&t=k&c=657791f3b1c64e6cbbf22f9378c0bdae

Co-authored-by: OxSaitama <arnaud.daubernatali@smart-chain.fr>
---
 Dockerfiles/Dockerfile.front                  |  24 +--
 .../BurgerModal/classes.module.scss           |  31 ++++
 .../Header/BurgerMenu/BurgerModal/index.tsx   |  38 +++++
 .../Header/BurgerMenu/classes.module.scss     |   9 ++
 .../DesignSystem/Header/BurgerMenu/index.tsx  |  44 +++++
 .../DesignSystem/Header/HeaderLink/index.tsx  |   2 +-
 .../classes.module.scss                       |   0
 .../Header/NavigationLink/index.tsx           |  41 +++++
 .../NotificationModal/classes.module.scss     |  14 +-
 .../Notifications/NotificationModal/index.tsx |   8 +-
 .../Header/Profile/ProfileLink/index.tsx      |  28 ----
 .../Header/Profile/ProfileModal/index.tsx     |  12 +-
 .../DesignSystem/Header/classes.module.scss   |  30 +++-
 .../Components/DesignSystem/Header/index.tsx  |  12 +-
 .../DesignSystem/LogIn/classes.module.scss    |   4 -
 .../Components/DesignSystem/LogIn/index.tsx   |  13 --
 .../DesignSystem/LogOutButton/index.tsx       |   6 +-
 .../ToolTip/Content/classes.module.scss       |   2 +-
 .../Typography/classes.module.scss            |   1 +
 .../Components/Layouts/DesignSystem/index.tsx |  25 ++-
 ...sx~ea121be (refacto css for profile links) | 100 ------------
 src/front/assets/icons/burger.svg             |   6 +
 .../components/Layouts/DesignSystem/index.tsx | 152 ------------------
 src/front/themes/constants.scss               |   2 +-
 24 files changed, 266 insertions(+), 338 deletions(-)
 create mode 100644 src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/classes.module.scss
 create mode 100644 src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/index.tsx
 create mode 100644 src/front/Components/DesignSystem/Header/BurgerMenu/classes.module.scss
 create mode 100644 src/front/Components/DesignSystem/Header/BurgerMenu/index.tsx
 rename src/front/Components/DesignSystem/Header/{Profile/ProfileLink => NavigationLink}/classes.module.scss (100%)
 create mode 100644 src/front/Components/DesignSystem/Header/NavigationLink/index.tsx
 delete mode 100644 src/front/Components/DesignSystem/Header/Profile/ProfileLink/index.tsx
 delete mode 100644 src/front/Components/DesignSystem/LogIn/classes.module.scss
 delete mode 100644 src/front/Components/DesignSystem/LogIn/index.tsx
 delete mode 100644 src/front/Components/Layouts/DesignSystem/index.tsx~ea121be (refacto css for profile links)
 create mode 100644 src/front/assets/icons/burger.svg
 delete mode 100644 src/front/components/Layouts/DesignSystem/index.tsx

diff --git a/Dockerfiles/Dockerfile.front b/Dockerfiles/Dockerfile.front
index fe327de5..2b30fddc 100644
--- a/Dockerfiles/Dockerfile.front
+++ b/Dockerfiles/Dockerfile.front
@@ -1,7 +1,7 @@
 # Install dependencies only when needed
 FROM node:19-alpine AS deps
 
-WORKDIR tezosLink
+WORKDIR LEcoffre
 
 COPY package.json ./
 
@@ -10,27 +10,27 @@ RUN npm install --frozen-lockfile
 # Rebuild the source code only when needed
 FROM node:19-alpine AS builder
 
-WORKDIR tezosLink
+WORKDIR LEcoffre
 
 COPY . .
-COPY --from=deps tezosLink/node_modules ./node_modules
+COPY --from=deps LEcoffre/node_modules ./node_modules
 RUN npm run build
 
 # Production image, copy all the files and run next
 FROM node:19-alpine AS production
 
-WORKDIR tezosLink
+WORKDIR LEcoffre
 
-RUN adduser -D tezoslinkuser --uid 10000 && chown -R tezoslinkuser .
+RUN adduser -D lecoffreuser --uid 10000 && chown -R lecoffreuser .
 
-COPY --from=builder --chown=tezoslinkuser tezosLink/node_modules ./node_modules
-COPY --from=builder --chown=tezoslinkuser tezosLink/public ./public
-COPY --from=builder --chown=tezoslinkuser tezosLink/dist/front ./src/front
-COPY --from=builder --chown=tezoslinkuser tezosLink/.next ./.next
+COPY --from=builder --chown=lecoffreuser LEcoffre/node_modules ./node_modules
+COPY --from=builder --chown=lecoffreuser LEcoffre/public ./public
+COPY --from=builder --chown=lecoffreuser LEcoffre/dist/front ./src/front
+COPY --from=builder --chown=lecoffreuser LEcoffre/.next ./.next
 
-COPY --from=builder --chown=tezoslinkuser tezosLink/package.json ./package.json
-#COPY --from=builder --chown=tezoslinkuser src/front/next.config.js ./next.config.js 
+COPY --from=builder --chown=lecoffreuser LEcoffre/package.json ./package.json
+#COPY --from=builder --chown=lecoffreuser src/front/next.config.js ./next.config.js 
 
-USER tezoslinkuser
+USER lecoffreuser
 
 CMD ["npm", "run web:start"]
\ No newline at end of file
diff --git a/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/classes.module.scss b/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/classes.module.scss
new file mode 100644
index 00000000..77be3233
--- /dev/null
+++ b/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/classes.module.scss
@@ -0,0 +1,31 @@
+@import "@Themes/constants.scss";
+
+.root {
+	display: flex;
+	flex-direction: column;
+	background-color: $white;
+	box-shadow: $shadow-nav;
+	padding: 24px;
+	position: absolute;
+	top: 83px;
+	width: 100%;
+	left: 0;
+	text-align: center;
+	> *:not(:last-child) {
+		margin-bottom: 24px;
+	}
+
+	.separator {
+		width: 100%;
+		border: 1px solid $grey-medium;
+	}
+}
+
+.background {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: transparent;
+}
diff --git a/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/index.tsx b/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/index.tsx
new file mode 100644
index 00000000..56cd641d
--- /dev/null
+++ b/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/index.tsx
@@ -0,0 +1,38 @@
+import LogOutButton from "@Front/Components/DesignSystem/LogOutButton";
+import React from "react";
+import NavigationLink from "../../NavigationLink";
+import classes from "./classes.module.scss";
+
+type IProps = {
+	isOpen: boolean;
+	closeModal: () => void;
+};
+type IState = {};
+
+export default class BurgerModal extends React.Component<IProps, IState> {
+	// TODO isEnabled depending on role given by DB
+	public override render(): JSX.Element | null {
+		if (!this.props.isOpen) return null;
+		return (
+			<>
+				<div className={classes["background"]} onClick={this.props.closeModal} />
+				<div className={classes["root"]}>
+					<NavigationLink text="Dossiers en cours" />
+					<NavigationLink text="Dossiers archivés" />
+					<NavigationLink text="Ancrage" />
+					<NavigationLink text="Collaborateurs" />
+					<NavigationLink text="Paramétrage des listes de pièces" />
+					<NavigationLink text="Gestion des utilisateurs" />
+					<NavigationLink text="Gestion des offices" />
+					<NavigationLink text="Gestion des noms de domaine" />
+					<NavigationLink text="Mon compte" />
+					<NavigationLink text="CGU" />
+					<NavigationLink path={"/design-system"} text="Design System" />
+					<NavigationLink path={"/"} text="Home" />
+					<div className={classes["separator"]} />
+					<LogOutButton />
+				</div>
+			</>
+		);
+	}
+}
diff --git a/src/front/Components/DesignSystem/Header/BurgerMenu/classes.module.scss b/src/front/Components/DesignSystem/Header/BurgerMenu/classes.module.scss
new file mode 100644
index 00000000..5d2c84dc
--- /dev/null
+++ b/src/front/Components/DesignSystem/Header/BurgerMenu/classes.module.scss
@@ -0,0 +1,9 @@
+@import "@Themes/constants.scss";
+
+.root {
+	.burger-icon {
+		cursor: pointer;
+		height: 24px;
+		width: 24px;
+	}
+}
diff --git a/src/front/Components/DesignSystem/Header/BurgerMenu/index.tsx b/src/front/Components/DesignSystem/Header/BurgerMenu/index.tsx
new file mode 100644
index 00000000..a94a30c1
--- /dev/null
+++ b/src/front/Components/DesignSystem/Header/BurgerMenu/index.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import classes from "./classes.module.scss";
+import Image from "next/image";
+import BurgerIcon from "@Assets/icons/burger.svg";
+import CrossIcon from "@Assets/icons/cross.svg";
+import BurgerModal from "./BurgerModal";
+
+type IProps = {};
+type IState = {
+	isModalOpen: boolean;
+};
+
+export default class BurgerMenu extends React.Component<IProps, IState> {
+	constructor(props: IProps) {
+		super(props);
+		this.state = {
+			isModalOpen: false,
+		};
+		this.openModal = this.openModal.bind(this);
+		this.closeModal = this.closeModal.bind(this);
+	}
+
+	public override render(): JSX.Element {
+		return (
+			<div className={classes["root"]}>
+				<Image
+					alt="burger"
+					src={this.state.isModalOpen ? CrossIcon : BurgerIcon}
+					className={classes["burger-icon"]}
+					onClick={this.openModal}
+				/>
+				{this.state.isModalOpen && <BurgerModal isOpen={this.state.isModalOpen} closeModal={this.closeModal} />}
+			</div>
+		);
+	}
+
+	private openModal() {
+		this.setState({ isModalOpen: true });
+	}
+
+	private closeModal() {
+		this.setState({ isModalOpen: false });
+	}
+}
diff --git a/src/front/Components/DesignSystem/Header/HeaderLink/index.tsx b/src/front/Components/DesignSystem/Header/HeaderLink/index.tsx
index c8e108f9..bfe47b5f 100644
--- a/src/front/Components/DesignSystem/Header/HeaderLink/index.tsx
+++ b/src/front/Components/DesignSystem/Header/HeaderLink/index.tsx
@@ -19,7 +19,7 @@ class HeaderLinkClass extends React.Component<IPropsClass, IStateClass> {
 		return (
 			<Link href={this.props.path ?? ""} className={classNames(classes["root"], this.props.isActive && [classes["active"]])}>
 				<div className={classes["content"]}>
-					<Typography typo={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>
 				{this.props.isActive && <div className={classes["underline"]} />}
 			</Link>
diff --git a/src/front/Components/DesignSystem/Header/Profile/ProfileLink/classes.module.scss b/src/front/Components/DesignSystem/Header/NavigationLink/classes.module.scss
similarity index 100%
rename from src/front/Components/DesignSystem/Header/Profile/ProfileLink/classes.module.scss
rename to src/front/Components/DesignSystem/Header/NavigationLink/classes.module.scss
diff --git a/src/front/Components/DesignSystem/Header/NavigationLink/index.tsx b/src/front/Components/DesignSystem/Header/NavigationLink/index.tsx
new file mode 100644
index 00000000..ee9ace3b
--- /dev/null
+++ b/src/front/Components/DesignSystem/Header/NavigationLink/index.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+import classes from "./classes.module.scss";
+import Link from "next/link";
+import classNames from "classnames";
+import router from "next/router";
+import { useEffect, useState } from "react";
+import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
+
+type IPropsClass = {
+	text: string | JSX.Element;
+	path?: string;
+	onClick?: () => void;
+	isEnabled?: boolean;
+	isActive?: boolean;
+};
+
+type IStateClass = {};
+
+class NavigationLinkClass extends React.Component<IPropsClass, IStateClass> {
+	static defaultProps = { isEnabled: true };
+	public override render(): JSX.Element | null {
+		if (!this.props.isEnabled) return null;
+		return (
+			<Link
+				href={this.props.path ?? ""}
+				className={classNames(classes["root"], this.props.isActive && [classes["active"]])}
+				onClick={this.props.onClick}>
+				<div className={classes["content"]}>
+					<Typography typo={this.props.isActive ? ITypo.P_SB_18 : ITypo.NAV_HEADER_18}>{this.props.text}</Typography>
+				</div>
+			</Link>
+		);
+	}
+}
+
+export default function NavigationLink(props: IPropsClass) {
+	const [url, setUrl] = useState("");
+	useEffect(() => setUrl(router?.asPath), []);
+	const isActive = url === props.path;
+	return <NavigationLinkClass {...props} isActive={isActive} />;
+}
diff --git a/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss b/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss
index a1f1ffc5..8afe36e8 100644
--- a/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss
+++ b/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss
@@ -3,8 +3,8 @@
 .root {
 	display: flex;
 	flex-direction: column;
-	width: 300px;
-	max-height: 80%;
+	width: 390px;
+	max-height: 80vh;
 	background-color: $white;
 	box-shadow: $shadow-nav;
 	padding: 24px;
@@ -24,6 +24,16 @@
 		margin-top: 24px;
 		overflow: hidden;
 		overflow-y: auto;
+
+		.missing-notification {
+			padding: 56px 0;
+			text-align: center;
+		}
+	}
+
+	@media (max-width: $screen-s) {
+		width: 100%;
+		left: 0;
 	}
 }
 
diff --git a/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/index.tsx b/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/index.tsx
index 444611eb..73dc84fb 100644
--- a/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/index.tsx
+++ b/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/index.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import classes from "./classes.module.scss";
-import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
+import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
 import CloseIcon from "@Assets/icons/cross.svg";
 import Image from "next/image";
 import ToastHandler from "@Front/Components/DesignSystem/Toasts/ToastsHandler";
@@ -41,8 +41,10 @@ export default class NotificationModal extends React.Component<IProps, IState> {
 					<div className={classes["notification-body"]}>
 						<>
 							{Toasts.getInstance().toasts.length === 0 ? (
-								<div>
-									<Typography typo={ITypo.P_16}>No notification yet</Typography>
+								<div className={classes["missing-notification"]}>
+									<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
+										Vous n’avez pas de notifications.
+									</Typography>
 								</div>
 							) : (
 								<ToastHandler />
diff --git a/src/front/Components/DesignSystem/Header/Profile/ProfileLink/index.tsx b/src/front/Components/DesignSystem/Header/Profile/ProfileLink/index.tsx
deleted file mode 100644
index a0d13494..00000000
--- a/src/front/Components/DesignSystem/Header/Profile/ProfileLink/index.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from "react";
-import classes from "./classes.module.scss";
-import Link from "next/link";
-import classNames from "classnames";
-import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
-
-type IPropsClass = {
-	text: string | JSX.Element;
-	path?: string;
-	isEnabled?: boolean;
-};
-
-type IStateClass = {};
-
-export default class ProfileLink extends React.Component<IPropsClass, IStateClass> {
-	public override render(): JSX.Element | null {
-		if (this.props.isEnabled === false) return null;
-		return (
-			<Link href={this.props.path ?? ""} className={classNames(classes["root"])}>
-				<div className={classes["content"]}>
-					<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
-						{this.props.text}
-					</Typography>
-				</div>
-			</Link>
-		);
-	}
-}
diff --git a/src/front/Components/DesignSystem/Header/Profile/ProfileModal/index.tsx b/src/front/Components/DesignSystem/Header/Profile/ProfileModal/index.tsx
index e399cb1a..49ec6729 100644
--- a/src/front/Components/DesignSystem/Header/Profile/ProfileModal/index.tsx
+++ b/src/front/Components/DesignSystem/Header/Profile/ProfileModal/index.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import classes from "./classes.module.scss";
-import ProfileLink from "../ProfileLink";
+import NavigationLink from "../../NavigationLink";
 import LogOutButton from "@Front/Components/DesignSystem/LogOutButton";
 
 type IProps = {
@@ -17,10 +17,12 @@ export default class ProfileModal extends React.Component<IProps, IState> {
 			<>
 				<div className={classes["background"]} onClick={this.props.closeModal} />
 				<div className={classes["root"]}>
-					<ProfileLink text="Mon compte" path={""} isEnabled={true} />
-					<ProfileLink text="Gestion des utilisateurs" path={""} isEnabled={true} />
-					<ProfileLink text="Gestion des offices" path={""} isEnabled={true} />
-					<ProfileLink text="CGU" path={""} isEnabled={true} />
+					<NavigationLink text="Mon compte" />
+					<NavigationLink text="Gestion des utilisateurs" />
+					<NavigationLink text="Gestion des offices" />
+					<NavigationLink text="CGU" />
+					<NavigationLink path={"/design-system"} text="Design System" />
+					<NavigationLink path={"/"} text="Home" />
 					<div className={classes["separator"]} />
 					<LogOutButton />
 				</div>
diff --git a/src/front/Components/DesignSystem/Header/classes.module.scss b/src/front/Components/DesignSystem/Header/classes.module.scss
index 097f1290..42129e2f 100644
--- a/src/front/Components/DesignSystem/Header/classes.module.scss
+++ b/src/front/Components/DesignSystem/Header/classes.module.scss
@@ -18,9 +18,33 @@
 	}
 
 	.right-section {
-		display: inline-flex;
-		> :first-child {
-			margin-right: 32px;
+		.profile-section {
+			display: inline-flex;
+			> :first-child {
+				margin-right: 32px;
+			}
+
+			@media (max-width: $screen-ls) {
+				display: none;
+			}
+		}
+
+		.notification-section {
+			display: inline-flex;
+			> :first-child {
+				margin-right: 32px;
+			}
+		}
+	}
+
+	.burger-menu {
+		display: none;
+		@media (max-width: $screen-ls) {
+			display: inline-flex;
+			.icon {
+				width: 24px;
+				height: 24px;
+			}
 		}
 	}
 }
diff --git a/src/front/Components/DesignSystem/Header/index.tsx b/src/front/Components/DesignSystem/Header/index.tsx
index 4eaa8d6a..18fd9777 100644
--- a/src/front/Components/DesignSystem/Header/index.tsx
+++ b/src/front/Components/DesignSystem/Header/index.tsx
@@ -6,6 +6,7 @@ import Link from "next/link";
 import Navigation from "./Navigation";
 import Notifications from "./Notifications";
 import Profile from "./Profile";
+import BurgerMenu from "./BurgerMenu";
 
 type IProps = {};
 type IState = {};
@@ -21,8 +22,15 @@ export default class Header extends React.Component<IProps, IState> {
 				</div>
 				<Navigation />
 				<div className={classes["right-section"]}>
-					<Notifications />
-					<Profile />
+					<div className={classes["notification-section"]}>
+						<Notifications />
+					</div>
+					<div className={classes["profile-section"]}>
+						<Profile />
+					</div>
+					<div className={classes["burger-menu"]}>
+						<BurgerMenu />
+					</div>
 				</div>
 			</div>
 		);
diff --git a/src/front/Components/DesignSystem/LogIn/classes.module.scss b/src/front/Components/DesignSystem/LogIn/classes.module.scss
deleted file mode 100644
index f68b3ab0..00000000
--- a/src/front/Components/DesignSystem/LogIn/classes.module.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@import "@Themes/constants.scss";
-
-.root {
-}
diff --git a/src/front/Components/DesignSystem/LogIn/index.tsx b/src/front/Components/DesignSystem/LogIn/index.tsx
deleted file mode 100644
index ea25a506..00000000
--- a/src/front/Components/DesignSystem/LogIn/index.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from "react";
-import classes from "./classes.module.scss";
-
-type IProps = {};
-type IState = {
-	logged: boolean;
-};
-
-export default class Login extends React.Component<IProps, IState> {
-	public override render(): JSX.Element {
-		return <div className={classes["root"]}></div>;
-	}
-}
diff --git a/src/front/Components/DesignSystem/LogOutButton/index.tsx b/src/front/Components/DesignSystem/LogOutButton/index.tsx
index 48720703..299f135e 100644
--- a/src/front/Components/DesignSystem/LogOutButton/index.tsx
+++ b/src/front/Components/DesignSystem/LogOutButton/index.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import Image from "next/image";
 import DisconnectIcon from "@Assets/icons/disconnect.svg";
 import classes from "./classes.module.scss";
-import Typography, { ITypo, ITypoColor } from "../Typography";
+import Typography, { ITypo } from "../Typography";
 
 type IProps = {};
 type IState = {
@@ -13,9 +13,7 @@ export default class LogOutButton extends React.Component<IProps, IState> {
 	public override render(): JSX.Element {
 		return (
 			<div className={classes["root"]} onClick={this.disconnect}>
-				<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
-					Déconnexion
-				</Typography>
+				<Typography typo={ITypo.NAV_HEADER_18}>Déconnexion</Typography>
 				<Image src={DisconnectIcon} className={classes["disconnect-icon"]} alt="disconnect" />
 			</div>
 		);
diff --git a/src/front/Components/DesignSystem/ToolTip/Content/classes.module.scss b/src/front/Components/DesignSystem/ToolTip/Content/classes.module.scss
index c860f23b..8152d619 100644
--- a/src/front/Components/DesignSystem/ToolTip/Content/classes.module.scss
+++ b/src/front/Components/DesignSystem/ToolTip/Content/classes.module.scss
@@ -8,7 +8,7 @@
 	position: fixed;
 	transition: opacity 0.2s ease-in-out;
 	text-align: left;
-	filter: drop-shadow(0px 9px 18px $shadow-tooltip);
+	filter: drop-shadow($shadow-tooltip);
 	opacity: 0;
 	pointer-events: none;
 	img {
diff --git a/src/front/Components/DesignSystem/Typography/classes.module.scss b/src/front/Components/DesignSystem/Typography/classes.module.scss
index 54b3c942..f9d08e11 100644
--- a/src/front/Components/DesignSystem/Typography/classes.module.scss
+++ b/src/front/Components/DesignSystem/Typography/classes.module.scss
@@ -61,6 +61,7 @@
 		font-size: 18px;
 		line-height: 22px;
 		letter-spacing: 0.5px;
+		color: $grey;
 	}
 
 	&.Paragraphe-18-error {
diff --git a/src/front/Components/Layouts/DesignSystem/index.tsx b/src/front/Components/Layouts/DesignSystem/index.tsx
index c3ffb5de..7026d158 100644
--- a/src/front/Components/Layouts/DesignSystem/index.tsx
+++ b/src/front/Components/Layouts/DesignSystem/index.tsx
@@ -36,9 +36,11 @@ export default class DesignSystem extends BasePage<IProps, IState> {
 						</div>
 						<div className={classes["sub-section"]}>
 							<Typography typo={ITypo.P_18}>
-								This page allows to gather all the design system of the site. A Design System is a library of components, visuals and principles with reusable code. This evolving kit offers a UX and UI repository for
-								designers and developers of digital products and services. The construction of a design system offers many advantages. This solution facilitates the work of the teams and reduces the "design debt" and the
-								"technical debt". The result is a coherent ecosystem and therefore a better experience for users and customers.
+								This page allows to gather all the design system of the site. A Design System is a library of components,
+								visuals and principles with reusable code. This evolving kit offers a UX and UI repository for designers and
+								developers of digital products and services. The construction of a design system offers many advantages.
+								This solution facilitates the work of the teams and reduces the "design debt" and the "technical debt". The
+								result is a coherent ecosystem and therefore a better experience for users and customers.
 							</Typography>
 						</div>
 					</div>
@@ -68,8 +70,15 @@ export default class DesignSystem extends BasePage<IProps, IState> {
 							Show Modal
 						</Button>
 
-						<Confirm isOpen={this.state.isModalDisplayed} onClose={this.closeModal} closeBtn header={"Title"} cancelText={"Cancel"} confirmText={"Confirmer"}>
-							Lorem ipsum dolor sit amet consectetur. Aliquam nunc lobortis lacus vulputate sagittis sed tempor eget feugiat. Elementum malesuada at sit elit.
+						<Confirm
+							isOpen={this.state.isModalDisplayed}
+							onClose={this.closeModal}
+							closeBtn
+							header={"Title"}
+							cancelText={"Cancel"}
+							confirmText={"Confirmer"}>
+							Lorem ipsum dolor sit amet consectetur. Aliquam nunc lobortis lacus vulputate sagittis sed tempor eget feugiat.
+							Elementum malesuada at sit elit.
 						</Confirm>
 					</div>
 
@@ -86,14 +95,16 @@ export default class DesignSystem extends BasePage<IProps, IState> {
 						<div className={classes["sub-section"]}>
 							<Typography typo={ITypo.H3}>CheckBox component</Typography>
 						</div>
-						<CheckBox name="Check Box 1" toolTip="Checkbox with tooltip"/>
+						<CheckBox name="Check Box 1" toolTip="Checkbox with tooltip" />
 						<CheckBox name="Check Box 2" />
 					</div>
 					<div className={classes["section"]}>
 						<div className={classes["sub-section"]}>
 							<Typography typo={ITypo.H3}>RadioBox component</Typography>
 						</div>
-						<RadioBox name="RadioBox" toolTip="Radiobox with tooltip">Radio Box 1</RadioBox>
+						<RadioBox name="RadioBox" toolTip="Radiobox with tooltip">
+							Radio Box 1
+						</RadioBox>
 						<RadioBox name="RadioBox">Radio Box 2</RadioBox>
 					</div>
 					<div className={classes["section"]}>
diff --git a/src/front/Components/Layouts/DesignSystem/index.tsx~ea121be (refacto css for profile links) b/src/front/Components/Layouts/DesignSystem/index.tsx~ea121be (refacto css for profile links)
deleted file mode 100644
index 529baa0d..00000000
--- a/src/front/Components/Layouts/DesignSystem/index.tsx~ea121be (refacto css for profile links)	
+++ /dev/null
@@ -1,100 +0,0 @@
-import BasePage from "@Front/Components/Layouts/Base";
-import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
-import classes from "./classes.module.scss";
-import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
-import Toasts, { IToast } from "@Front/Stores/Toasts";
-import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
-import HeaderLink from "@Front/Components/DesignSystem/Header/HeaderLink";
-
-type IState = {
-	isModalDisplayed: boolean;
-};
-type IProps = {};
-
-export default class DesignSystem extends BasePage<IProps, IState> {
-	constructor(props: IProps) {
-		super(props);
-		this.state = {
-			isModalDisplayed: false,
-		};
-		this.openModal = this.openModal.bind(this);
-		this.closeModal = this.closeModal.bind(this);
-	}
-
-	public override render(): JSX.Element {
-		return (
-			<DefaultTemplate title={"HomePage"}>
-				<div className={classes["root"]}>
-					<div className={classes["section"]}>
-						<div className={classes["sub-section"]}>
-							<Typography typo={ITypo.H1}>Website design System</Typography>
-						</div>
-						<div className={classes["sub-section"]}>
-							<Typography typo={ITypo.P_18}>
-								This page allows to gather all the design system of the site. A Design System is a library of components, visuals and principles with reusable code. This evolving kit offers a UX and UI repository for
-								designers and developers of digital products and services. The construction of a design system offers many advantages. This solution facilitates the work of the teams and reduces the "design debt" and the
-								"technical debt". The result is a coherent ecosystem and therefore a better experience for users and customers.
-							</Typography>
-						</div>
-					</div>
-
-					<div className={classes["section"]}>
-						<div className={classes["sub-section"]}>
-							<Typography typo={ITypo.H3}>Button components</Typography>
-						</div>
-						<Button variant={EButtonVariant.PRIMARY}>Primary</Button>
-						<Button variant={EButtonVariant.SECONDARY}>Secondary</Button>
-						<Button variant={EButtonVariant.GHOST}>Ghost</Button>
-					</div>
-
-					<div className={classes["section"]}>
-						<div className={classes["sub-section"]}>
-							<Typography typo={ITypo.H3}>Toaster component</Typography>
-						</div>
-						<Button variant={EButtonVariant.PRIMARY} onClick={this.spawnToast}>
-							Spawn a toast
-						</Button>
-					</div>
-					<div className={classes["section"]}>
-						<div className={classes["sub-section"]}>
-							<Typography typo={ITypo.H3}>Modal components</Typography>
-						</div>
-						<Button variant={EButtonVariant.PRIMARY} onClick={this.openModal}>
-							Show Modal
-						</Button>
-
-						<Confirm isOpen={this.state.isModalDisplayed} onClose={this.closeModal} closeBtn header={"Title"} cancelText={"Cancel"} confirmText={"Confirmer"}>
-							Lorem ipsum dolor sit amet consectetur. Aliquam nunc lobortis lacus vulputate sagittis sed tempor eget feugiat. Elementum malesuada at sit elit.
-						</Confirm>
-					</div>
-
-					<div className={classes["section"]}>
-						<div className={classes["sub-section"]}>
-							<Typography typo={ITypo.H3}>HeaderLink components</Typography>
-						</div>
-						<div className={classes["inline-flex"]}>
-							<HeaderLink text={"Home"} path={"/"} />
-							<HeaderLink text={"Design-system"} path={"/design-system"} />
-						</div>
-					</div>
-				</div>
-			</DefaultTemplate>
-		);
-	}
-	private openModal() {
-		this.setState({
-			isModalDisplayed: true,
-		});
-	}
-	private closeModal() {
-		this.setState({
-			isModalDisplayed: false,
-		});
-	}
-
-	private spawnToast() {
-		const toast: IToast = { title: "Un collaborateur veut rejoindre votre office", text: "12:00 - 1 fev 2023" };
-		Toasts.getInstance().open(toast);
-	}
-}
diff --git a/src/front/assets/icons/burger.svg b/src/front/assets/icons/burger.svg
new file mode 100644
index 00000000..21139237
--- /dev/null
+++ b/src/front/assets/icons/burger.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 18.5H7" stroke="#101010" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21 14.5H3" stroke="#101010" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21 10.5H7" stroke="#101010" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21 6.5H3" stroke="#101010" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/front/components/Layouts/DesignSystem/index.tsx b/src/front/components/Layouts/DesignSystem/index.tsx
deleted file mode 100644
index c86a194f..00000000
--- a/src/front/components/Layouts/DesignSystem/index.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-import BasePage from "@Front/Components/Layouts/Base";
-import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
-import classes from "./classes.module.scss";
-import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
-import Toasts, { IToast } from "@Front/Stores/Toasts";
-import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
-import HeaderLink from "@Front/Components/DesignSystem/Header/HeaderLink";
-import CheckBox from "@Front/Components/DesignSystem/CheckBox";
-import ToolTip from "@Front/Components/DesignSystem/ToolTip";
-import RadioBox from "@Front/Components/DesignSystem/RadioBox";
-// import Input from "@Front/Components/DesignSystem/Input";
-import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
-
-type IState = {
-	isModalDisplayed: boolean;
-};
-type IProps = {};
-
-export default class DesignSystem extends BasePage<IProps, IState> {
-	constructor(props: IProps) {
-		super(props);
-		this.state = {
-			isModalDisplayed: false,
-		};
-		this.openModal = this.openModal.bind(this);
-		this.closeModal = this.closeModal.bind(this);
-	}
-
-	public override render(): JSX.Element {
-		return (
-			<DefaultTemplate title={"HomePage"}>
-				<div className={classes["root"]}>
-					<div className={classes["section"]}>
-						<div className={classes["sub-section"]}>
-							<Typography typo={ITypo.H1}>Website design System</Typography>
-						</div>
-						<div className={classes["sub-section"]}>
-							<Typography typo={ITypo.P_18}>
-								This page allows to gather all the design system of the site. A Design System is a library of components,
-								visuals and principles with reusable code. This evolving kit offers a UX and UI repository for designers and
-								developers of digital products and services. The construction of a design system offers many advantages.
-								This solution facilitates the work of the teams and reduces the "design debt" and the "technical debt". The
-								result is a coherent ecosystem and therefore a better experience for users and customers.
-							</Typography>
-						</div>
-					</div>
-
-					<div className={classes["section"]}>
-						<div className={classes["sub-section"]}>
-							<Typography typo={ITypo.H3}>Button components</Typography>
-						</div>
-						<Button variant={EButtonVariant.PRIMARY}>Primary</Button>
-						<Button variant={EButtonVariant.SECONDARY}>Secondary</Button>
-						<Button variant={EButtonVariant.GHOST}>Ghost</Button>
-					</div>
-
-					<div className={classes["section"]}>
-						<div className={classes["sub-section"]}>
-							<Typography typo={ITypo.H3}>Toaster component</Typography>
-						</div>
-						<Button variant={EButtonVariant.PRIMARY} onClick={this.spawnToast}>
-							Spawn a toast
-						</Button>
-					</div>
-					<div className={classes["section"]}>
-						<div className={classes["sub-section"]}>
-							<Typography typo={ITypo.H3}>Modal components</Typography>
-						</div>
-						<Button variant={EButtonVariant.PRIMARY} onClick={this.openModal}>
-							Show Modal
-						</Button>
-
-						<Confirm
-							isOpen={this.state.isModalDisplayed}
-							onClose={this.closeModal}
-							closeBtn
-							header={"Title"}
-							cancelText={"Cancel"}
-							confirmText={"Confirmer"}>
-							Lorem ipsum dolor sit amet consectetur. Aliquam nunc lobortis lacus vulputate sagittis sed tempor eget feugiat.
-							Elementum malesuada at sit elit.
-						</Confirm>
-					</div>
-
-					<div className={classes["section"]}>
-						<div className={classes["sub-section"]}>
-							<Typography typo={ITypo.H3}>HeaderLink components</Typography>
-						</div>
-						<div className={classes["inline-flex"]}>
-							<HeaderLink text={"Home"} path={"/"} />
-							<HeaderLink text={"Design-system"} path={"/design-system"} />
-						</div>
-					</div>
-					<div className={classes["section"]}>
-						<div className={classes["sub-section"]}>
-							<Typography typo={ITypo.H3}>CheckBox component</Typography>
-						</div>
-						<CheckBox name="Check Box 1" toolTip="Checkbox with tooltip" />
-						<CheckBox name="Check Box 2" />
-					</div>
-					<div className={classes["section"]}>
-						<div className={classes["sub-section"]}>
-							<Typography typo={ITypo.H3}>RadioBox component</Typography>
-						</div>
-						<RadioBox name="RadioBox" toolTip="Radiobox with tooltip">
-							Radio Box 1
-						</RadioBox>
-						<RadioBox name="RadioBox">Radio Box 2</RadioBox>
-					</div>
-					<div className={classes["section"]}>
-						<div className={classes["sub-section"]}>
-							<Typography typo={ITypo.H3}>Tool tip component</Typography>
-						</div>
-						<ToolTip title="toolTip" text="tooltip content" isNotFlex={true} />
-					</div>
-					<div className={classes["section"]}>
-						<div className={classes["sub-section"]}>
-							<Typography typo={ITypo.H3}>Input component</Typography>
-						</div>
-						<div className={classes["sub-section"]}>
-							<InputField name="input field" fakeplaceholder="input place hodler" />
-						</div>
-						<div className={classes["sub-section"]}>
-							<InputField name="input field" fakeplaceholder="text area place hodler" large={true} />
-						</div>
-						<div className={classes["sub-section"]}>
-							<InputField name="input field" fakeplaceholder="number place hodler" type="number" />
-						</div>
-					</div>
-				</div>
-			</DefaultTemplate>
-		);
-	}
-	private openModal() {
-		this.setState({
-			isModalDisplayed: true,
-		});
-	}
-	private closeModal() {
-		this.setState({
-			isModalDisplayed: false,
-		});
-	}
-	private spawnToast() {
-		const toast: IToast = {
-			title: "Un collaborateur veut rejoindre votre office",
-			text: "12:00 - 1 fev 2023",
-		};
-		Toasts.getInstance().open(toast);
-	}
-}
diff --git a/src/front/themes/constants.scss b/src/front/themes/constants.scss
index e344cb10..00a254a8 100644
--- a/src/front/themes/constants.scss
+++ b/src/front/themes/constants.scss
@@ -1,6 +1,6 @@
 // $screen-xl: 2559px;
 $screen-l: 1440px;
-$screen-ls: 1210px;
+$screen-ls: 1300px;
 $screen-m: 1023px;
 $screen-s: 767px;
 // $screen-xs: 424px;