✨ header done, need to implement responsiv, notifications component, profile component and burgermenu

src/front/assets/icons/notification.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 8.5C18 6.9087 17.3679 5.38258 16.2426 4.25736C15.1174 3.13214 13.5913 2.5 12 2.5C10.4087 2.5 8.88258 3.13214 7.75736 4.25736C6.63214 5.38258 6 6.9087 6 8.5C6 15.5 3 17.5 3 17.5H21C21 17.5 18 15.5 18 8.5Z" stroke="#101010" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.73 21.5C13.5542 21.8031 13.3019 22.0547 12.9982 22.2295C12.6946 22.4044 12.3504 22.4965 12 22.4965C11.6496 22.4965 11.3054 22.4044 11.0018 22.2295C10.6982 22.0547 10.4458 21.8031 10.27 21.5" stroke="#101010" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 11.1666H8.00667" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/front/assets/icons/user.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 21.5V19.5C20 18.4391 19.5786 17.4217 18.8284 16.6716C18.0783 15.9214 17.0609 15.5 16 15.5H8C6.93913 15.5 5.92172 15.9214 5.17157 16.6716C4.42143 17.4217 4 18.4391 4 19.5V21.5" stroke="#101010" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 11.5C14.2091 11.5 16 9.70914 16 7.5C16 5.29086 14.2091 3.5 12 3.5C9.79086 3.5 8 5.29086 8 7.5C8 9.70914 9.79086 11.5 12 11.5Z" stroke="#101010" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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

@@ -8,7 +8,7 @@ import { useEffect, useState } from 'react'
 
 type IPropsClass = {
   text: string | JSX.Element;
-  path: string;
+  path?: string;
   isActive?: boolean;
 };
 
@@ -16,7 +16,7 @@ type IStateClass = {};
 
 class HeaderLinkClass extends React.Component<IPropsClass, IStateClass> {
   public override render(): JSX.Element {
-    return <Link href={this.props.path} className={classNames(classes["root"], this.props.isActive && [classes["active"]])}
+    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}>

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

@@ -0,0 +1,5 @@
+@import "@Themes/constants.scss";
+
+.root {
+    display: inline-flex;
+}

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

@@ -0,0 +1,18 @@
+import React from "react";
+import classes from "./classes.module.scss";
+import HeaderLink from "../HeaderLink";
+
+type IProps = {};
+type IState = {};
+
+export default class Navigation extends React.Component<IProps, IState> {
+  public override render(): JSX.Element {
+    return <div className={classes["root"]}>
+      <HeaderLink text={"Home"} path={"/"} />
+      <HeaderLink text={"Design system"} path={"/design-system"} />
+      <HeaderLink text={"Ancrage"} path={""} />
+      <HeaderLink text={"Collaborateurs"} path={""} />
+      <HeaderLink text={"Paramétrage des listes de pièces"} path={""} />
+    </div>;
+  }
+}

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

@@ -0,0 +1,8 @@
+@import "@Themes/constants.scss";
+
+.root {
+    .notification-icon{
+        height: 24px;
+        width: 24px;
+    }
+}

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

@@ -0,0 +1,15 @@
+import React from "react";
+import classes from "./classes.module.scss";
+import Image from "next/image";
+import NotificationIcon from "@Assets/icons/notification.svg";
+
+type IProps = {};
+type IState = {};
+
+export default class Notifications extends React.Component<IProps, IState> {
+  public override render(): JSX.Element {
+    return <div className={classes["root"]}>
+      <Image alt="notifications" src={NotificationIcon} className={classes["notification-icon"]}/>
+    </div>;
+  }
+}

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

@@ -0,0 +1,8 @@
+@import "@Themes/constants.scss";
+
+.root {
+    .profile-icon{
+        height: 24px;
+        width: 24px;
+    }
+}

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

@@ -0,0 +1,15 @@
+import React from "react";
+import classes from "./classes.module.scss";
+import Image from "next/image";
+import ProfileIcon from "@Assets/icons/user.svg";
+
+type IProps = {};
+type IState = {};
+
+export default class Profile extends React.Component<IProps, IState> {
+  public override render(): JSX.Element {
+    return <div className={classes["root"]}>
+      <Image alt="notifications" src={ProfileIcon} className={classes["profile-icon"]} />
+    </div>;
+  }
+}

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

@@ -3,14 +3,23 @@
 .root {
     display: flex;
     align-items: center;
+    justify-content: space-between;
     height: 83px;
     background-color: $white;
     box-shadow: $shadow-neutral;
     padding: 0 48px;
-    .logo-container{
+
-        .logo{
+    .logo-container {
+        .logo {
             width: 174px;
             height: 39px;
         }
     }
+
+    .right-section {
+        display: inline-flex;
+        >:first-child{
+            margin-right: 32px;
+        }
+    }
 }

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

@@ -3,6 +3,9 @@ import classes from "./classes.module.scss";
 import Image from "next/image";
 import LogoIcon from "@Assets/logo.png"
 import Link from "next/link";
+import Navigation from "./Navigation";
+import Notifications from "./Notifications";
+import Profile from "./Profile";
 
 type IProps = {};
 type IState = {};
@@ -15,6 +18,11 @@ export default class Header extends React.Component<IProps, IState> {
           <Image src={LogoIcon} alt="logo" className={classes["logo"]} />
         </Link>
       </div>
+      <Navigation />
+      <div className={classes["right-section"]}>
+        <Notifications/>
+        <Profile />
+      </div>
     </div>;
   }
 }