✨ Active folder

src/front/Components/DesignSystem/FolderList/classes.module.scss

@@ -1,4 +1,7 @@
 @import "@Themes/constants.scss";
 
 .root {
+	.active {
+		background-color: var(--grey-medium);
+	}
 }

src/front/Components/DesignSystem/FolderList/index.tsx

@@ -1,8 +1,10 @@
-import React from "react";
-import classes from "./classes.module.scss";
-import FolderContainer from "../FolderContainer";
 import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
 import Link from "next/link";
+import { useRouter } from "next/router";
+import React from "react";
+
+import FolderContainer from "../FolderContainer";
+import classes from "./classes.module.scss";
 
 type IProps = {
 	folders: IDashBoardFolder[];
@@ -10,15 +12,22 @@ type IProps = {
 	onCloseLeftSide?: () => void;
 };
 
+type IPropsClass = IProps & {
+	selectedFolder: string;
+};
+
 type IState = {};
 
-export default class FolderList extends React.Component<IProps, IState> {
+class FolderListClass extends React.Component<IPropsClass, IState> {
 	public override render(): JSX.Element {
 		return (
 			<div className={classes["root"]}>
 				{this.props.folders.map((folder) => {
 					return (
-						<div onClick={this.props.onCloseLeftSide} key={folder.uid}>
+						<div
+							onClick={this.props.onCloseLeftSide}
+							key={folder.uid}
+							className={folder.uid === this.props.selectedFolder ? classes["active"] : ""}>
 							<Link href={"/folder/".concat(folder.uid)}>
 								<FolderContainer folder={folder} onSelectedFolder={this.props.onSelectedFolder} />;
 							</Link>
@@ -30,3 +39,10 @@ export default class FolderList extends React.Component<IProps, IState> {
 		);
 	}
 }
+
+export default function FolderList(props: IProps) {
+	const router = useRouter();
+	let { folderUid } = router.query;
+	folderUid = folderUid as string;
+	return <FolderListClass {...props} selectedFolder={folderUid} />;
+}