✨ background and right side overflow on right side

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 @@
 			}
 		}
 	}
-}
+}

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;
 		}
 	}
-}
+}

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}

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 (

src/front/Themes/variables.scss

@@ -31,4 +31,6 @@
 	--grey: #{$grey};
 	--grey-medium: #{$grey-medium};
 	--grey-soft: #{$grey-soft};
-}
+
+	--white: #{$white};
+}