feat(header): Make it sticky

client/src/components/beta/index.jsx

@@ -3,7 +3,7 @@ import './index.scss';
 
 export default function Beta() {
   return (
-    <div className="wrapper">
+    <div className="ribbon">
       <div className="badge">
         ALPHA
       </div>

client/src/components/beta/index.scss

@@ -1,19 +1,19 @@
-.wrapper {
+.ribbon {
   left: -60px;
   position: absolute;
   top: 10px;
   z-index: calc(var(--ground) + 600);
-}
 
-.badge {
-  background: #e1000f;
-  box-shadow: inset 0px 0px 0px 4px rgba(255, 255, 255, 0.34);
-  color: #FFF;
-  font-family: sans-serif;
-  font-size: 20px;
-  height: 50px;
-  line-height: 50px;
-  text-align: center;
-  transform: rotate(-45deg);
-  width: 200px;
+  .badge {
+    background: #e1000f;
+    box-shadow: inset 0px 0px 0px 4px rgba(255, 255, 255, 0.34);
+    color: #FFF;
+    font-family: sans-serif;
+    font-size: 20px;
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    transform: rotate(-45deg);
+    width: 200px;
+  }
 }

client/src/layout/Header.jsx

@@ -5,6 +5,7 @@ import {
   Logo,
   Service,
 } from '@dataesr/react-dsfr';
+import { useEffect } from 'react';
 import { NavLink } from 'react-router-dom';
 
 import Beta from '../components/beta';
@@ -18,6 +19,23 @@ const {
 } = import.meta.env;
 
 export default function Header() {
+  const isSticky = () => {
+    const header = document.querySelector('.header');
+    const scrollTop = window.scrollY;
+    if (scrollTop >= 100) {
+      header.classList.add('sticky');
+    } else {
+      header.classList.remove('sticky');
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', isSticky);
+    return () => {
+      window.removeEventListener('scroll', isSticky);
+    };
+  });
+
   return (
     <HeaderWrapper className="header">
       <Beta />

client/src/styles/index.scss

@@ -1,7 +1,24 @@
-.text-right {
-  text-align: right;
-}
-
 .fr-tags-group>li {
   line-height: 0rem;
 }
+
+.header.sticky {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 10;
+  animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
+
+  .fr-header__brand-top {
+    display: none;
+  }
+
+  .fr-header__service {
+    padding: 0;
+  }
+}
+
+.text-right {
+  text-align: right;
+}