From 5d471c08f54ff2706da4dc323d8658842eb8bf28 Mon Sep 17 00:00:00 2001
From: Hugo Lextrait <hugo.lextrait@smart-chain.fr>
Date: Mon, 17 Apr 2023 17:38:41 +0200
Subject: [PATCH] :sparkles: background and right side overflow on right side

---
 .../DesignSystem/Header/classes.module.scss   |  5 ++--
 .../classes.module.scss                       | 26 ++++++++++++++++---
 .../DefaultNotaryDashboard/index.tsx          |  1 +
 .../FolderInformation/ClientSection/index.tsx |  2 +-
 src/front/Themes/variables.scss               |  4 ++-
 5 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/src/front/Components/DesignSystem/Header/classes.module.scss b/src/front/Components/DesignSystem/Header/classes.module.scss
index 134e0588..44a74c10 100644
--- a/src/front/Components/DesignSystem/Header/classes.module.scss
+++ b/src/front/Components/DesignSystem/Header/classes.module.scss
@@ -10,10 +10,11 @@
 	padding: 0 48px;
 	position: sticky;
 	top: 0;
-	z-index: 2;
+	z-index: 4;
 
 	@media (max-width: $screen-m) {
 		transition: transform 500ms ease-out;
+
 		&[data-open="closed"] {
 			transform: translateY(-85px);
 		}
@@ -60,4 +61,4 @@
 			}
 		}
 	}
-}
+}
\ No newline at end of file
diff --git a/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/classes.module.scss
index 980f4d89..79f4c8ed 100644
--- a/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/classes.module.scss
+++ b/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/classes.module.scss
@@ -1,14 +1,34 @@
 @import "@Themes/constants.scss";
 
+@keyframes growWidth {
+	0% {
+		width: 100%;
+	}
+
+	100% {
+		width: 200%;
+	}
+}
+
 .root {
 	.content {
 		display: flex;
 		overflow: hidden;
 		height: calc(100vh - 83px);
 
+		.overlay {
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			background-color: var(--white);
+			opacity: 0.5;
+			z-index: 2;
+			transition: all 0.3s $custom-easing;
+		}
+
 		.left-side {
 			background-color: $white;
-			z-index: 1;
+			z-index: 3;
 			display: flex;
 			width: 389px;
 			min-width: 389px;
@@ -51,9 +71,9 @@
 		}
 
 		.right-side {
-			width: 100%;
+			min-width: calc(100vw - 83px);
 			padding: 64px 48px;
 			overflow-y: auto;
 		}
 	}
-}
+}
\ No newline at end of file
diff --git a/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx b/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx
index ce555674..add86b5e 100644
--- a/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx
@@ -53,6 +53,7 @@ export default class DefaultNotaryDashboard extends React.Component<IProps, ISta
 			<div className={classes["root"]}>
 				<Header isUserConnected={true} />
 				<div className={classes["content"]}>
+					{this.state.isLeftSideOpen && <div className={classes["overlay"]} onClick={this.onCloseLeftSide} />}
 					<div className={classNames(classes["left-side"], this.state.isLeftSideOpen && classes["opened"])}>
 						<FolderListContainer
 							folders={this.state.folders}
diff --git a/src/front/Components/Layouts/Folder/FolderInformation/ClientSection/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/ClientSection/index.tsx
index 476e14fd..bd602156 100644
--- a/src/front/Components/Layouts/Folder/FolderInformation/ClientSection/index.tsx
+++ b/src/front/Components/Layouts/Folder/FolderInformation/ClientSection/index.tsx
@@ -44,7 +44,7 @@ export default class ClientSection extends React.Component<IProps, IState> {
 	}
 
 	private renderCustomerFolders() {
-		const output = this.props.folder.office_folder_has_customers?.map((folderHasCustomer, key) => {
+		const output = this.props.folder.office_folder_has_customers?.map((folderHasCustomer) => {
 			if (!folderHasCustomer.customer) return null;
 			// TODO : Les documents ASKED fonctionne mais les autres documents ne doivcent etre seulement ceux qui correspondent au folder
 			return (
diff --git a/src/front/Themes/variables.scss b/src/front/Themes/variables.scss
index 9bdcf0ec..67b267d8 100644
--- a/src/front/Themes/variables.scss
+++ b/src/front/Themes/variables.scss
@@ -31,4 +31,6 @@
 	--grey: #{$grey};
 	--grey-medium: #{$grey-medium};
 	--grey-soft: #{$grey-soft};
-}
+
+	--white: #{$white};
+}
\ No newline at end of file