🚧 WIP notification modal

src/front/components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss

@@ -0,0 +1,19 @@
+@import "@Themes/constants.scss";
+
+.root {
+    width: 300px;
+    height: 500px;
+    background-color: $orange-flash;
+    padding: 24px;
+    position: absolute;
+    top: 107px;
+    right:56px;
+    .notification-header{
+        width: 100%;
+        display: inline-flex;
+        justify-content: space-between;
+        .close-icon{
+            cursor: pointer;
+        }
+    }
+}

src/front/components/DesignSystem/Header/Notifications/NotificationModal/index.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import classes from "./classes.module.scss";
+import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
+import CloseIcon from "@Assets/icons/cross.svg";
+import Image from "next/image";
+
+type IProps = {
+  openModal: () => void;
+};
+type IState = {
+  isModalOpen: boolean;
+};
+
+export default class NotificationModal extends React.Component<IProps, IState> {
+  constructor(props: IProps) {
+    super(props);
+    this.state = {
+      isModalOpen: true,
+    };
+    this.closeModal = this.closeModal.bind(this);
+    this.openModal = this.openModal.bind(this);
+  }
+
+  public override render(): JSX.Element | null {
+    if (!this.state.isModalOpen) return null;
+    return <div className={classes["root"]}>
+      <div className={classes["notification-header"]}>
+        <Typography typo={ITypo.P_16}>
+          Notifications
+        </Typography>
+        <div className={classes["close-icon"]} onClick={this.closeModal}>
+          <Image src={CloseIcon} alt="Close notification modal" className={classes["close-icon"]}></Image>
+        </div>
+      </div>;
+    </div>
+  }
+  private closeModal() {
+    this.setState({ isModalOpen: false });
+  }
+  private openModal() {
+    this.setState({ isModalOpen: true });
+  }
+}

src/front/components/DesignSystem/Header/Notifications/classes.module.scss

@@ -1,8 +1,21 @@
 @import "@Themes/constants.scss";
 
 .root {
+    .icon-container{
+        position: relative;
+
         .notification-icon{
             height: 24px;
             width: 24px;
         }
+        .notification-dot{
+            position: absolute;
+            top: 0;
+            right: 0;
+            height: 12px;
+            width: 12px;
+            border-radius: 50%;
+            background-color: $orange-flash;
+        }
+    }
 }

src/front/components/DesignSystem/Header/Notifications/index.tsx

@@ -2,19 +2,37 @@ import React from "react";
 import classes from "./classes.module.scss";
 import Image from "next/image";
 import NotificationIcon from "@Assets/icons/notification.svg";
+import Toasts from "@Front/Stores/Toasts";
+import NotificationModal from "./NotificationModal";
 
 type IProps = {};
 type IState = {
   hasNotifications: boolean;
+  isModalOpen: boolean;
 };
 
 export default class Notifications extends React.Component<IProps, IState> {
+  constructor(props: IProps) {
+    super(props);
+    this.state = {
+      hasNotifications: true,
+      isModalOpen: true,
+    };
+    this.opeModal = this.opeModal.bind(this);
+  }
   public override render(): JSX.Element {
+    const hasNotifications = Toasts.getInstance().toasts.length;
+    console.log(hasNotifications)
     return <div className={classes["root"]}>
-      <div className={classes["icon-container"]}>
+      <div className={classes["icon-container"]} onClick={this.opeModal}>
         <Image alt="notifications" src={NotificationIcon} className={classes["notification-icon"]} />
+        {this.state.hasNotifications && <div className={classes["notification-dot"]}></div>}
       </div>
 
+      { this.state.isModalOpen && <NotificationModal isOpen={this.state.isModalOpen} />}
     </div>;
   }
+  private opeModal() {
+    this.setState({ isModalOpen: true });
+  };
 }

src/front/components/Layouts/DesignSystem/index.tsx

@@ -106,7 +106,6 @@ export default class DesignSystem extends BasePage<IProps, IState> {
 
 
     private spawnToast() {
-        console.log('spawn toast')
         const toast: IToast = { title: "Un collaborateur veut rejoindre votre office", text: "12:00 - 1 fev 2023" }
         Toasts.getInstance().open(toast)
     }