navbar: ajout d'un style conditionné à la présence du header dans le viewport

package.json

@@ -24,6 +24,7 @@
 		"react": "^17.0.1",
 		"react-dom": "^17.0.1",
 		"react-helmet": "^6.1.0",
+		"react-intersection-observer": "^8.32.0",
 		"react-toastify": "^7.0.4",
 		"sass": "^1.37.5"
 	},

src/components/contactForm/index.jsx

@@ -103,7 +103,7 @@ const ContactForm = () => {
 						onChange={handleEmailChange}
 					/>
 				</div>
-				<div className="form-group" style={{ display: "none;" }}>
+				<div className="form-group" style={{ display: "none" }}>
 					<input
 						style={{ display: "none;" }}
 						type="email-confirm"

src/components/header/index.jsx

@@ -1,11 +1,26 @@
-import React from "react";
+import React, { useContext, useEffect } from "react";
+import { useInView } from "react-intersection-observer";
 
 import "./index.scss";
 import BtnContact from "../btnContact";
+import HeaderContext from "../../context/headerContext";
 
 const Header = () => {
+	const navbarContext = useContext(HeaderContext);
+	const { ref, inView } = useInView({
+		threshold: 0
+	});
+
+	const handleVisibility = (x) => {
+		navbarContext.isHeaderHiddenFct(x);
+	};
+
+	useEffect(() => {
+		handleVisibility(inView);
+	}, [inView]);
+
 	return (
-		<header>
+		<header ref={ref}>
 			<div className="hero">
 				<h1>Du numérique, en Alsace, au plus proche de vos besoins.</h1>
 				<div className="hero-box">

src/components/header/index.scss

@@ -2,11 +2,12 @@
 @use "../../scss/abstracts/fonts" as *;
 
 header {
-	width: 100vw;
+	width: calc(100vw - 12px);
 	height: 100vh;
 	display: flex;
 	background-image: url("../../images/pen-blue.jpg");
 	background-position: center;
+	background-size: cover;
 	padding-top: 5rem;
 	color: $light;
 

src/components/layout/index.jsx

@@ -1,17 +1,29 @@
-import React from "react";
+import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { ToastContainer, toast } from "react-toastify";
 
+import HeaderContext from "../../context/headerContext";
+
 import Navbar from "../navbar";
 import Footer from "../footer";
 
 toast.configure();
 
 const Layout = ({ children }) => {
+	const [headerState, setHeaderState] = useState(false);
+
 	return (
 		<>
-			<Navbar />
-			<main>{children}</main>
+			<HeaderContext.Provider
+				value={{
+					isHeaderHiddenFct: (x) => {
+						setHeaderState(x);
+					},
+					isHeaderHidden: headerState
+				}}>
+				<Navbar />
+				<main>{children}</main>
+			</HeaderContext.Provider>
 			<ToastContainer
 				position="bottom-center"
 				autoClose={3000}

src/components/navbar/index.jsx

@@ -1,12 +1,27 @@
-import React from "react";
+import React, { useContext } from "react";
 import { Link } from "gatsby";
+import HeaderContext from "../../context/headerContext";
 
 import "./index.scss";
 
 const Navbar = () => {
+	const mustShowNavbar = useContext(HeaderContext);
+
+	const handleShowNavbar = (context) => {
+		if (context.isHeaderHidden === true) {
+			console.log(context.isHeaderHidden);
+			console.log("transparent");
+			return { background: "transparent" };
+		} else {
+			console.log(context.isHeaderHidden);
+			console.log("white");
+			return { background: "white" };
+		}
+	};
+
 	return (
 		<div id="navbar-container">
-			<nav>
+			<nav style={handleShowNavbar(mustShowNavbar)}>
 				<div className="details">
 					<Link to="/services" className="menu-btn">
 						<span>Services</span>

src/components/navbar/index.scss

@@ -9,12 +9,11 @@
 nav {
 	padding: 0.5rem 2rem;
 	position: fixed;
-	overflow-y: scroll;
 	z-index: 1;
 	width: 100vw;
 	height: 3.5rem;
 	padding: 0;
-	background: transparent;
+	// background: transparent;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;

src/context/headerContext.jsx

@@ -0,0 +1,8 @@
+import { createContext } from "react";
+
+const HeaderContext = createContext({
+	isHeaderHiddenFct: null,
+	isHeaderHidden: null
+});
+
+export default HeaderContext;

yarn.lock

@@ -9152,6 +9152,11 @@ react-helmet@^6.1.0:
     react-fast-compare "^3.1.1"
     react-side-effect "^2.1.0"
 
+react-intersection-observer@^8.32.0:
+  version "8.32.0"
+  resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-8.32.0.tgz#47249332e12e8bb99ed35a10bb7dd10446445a7b"
+  integrity sha512-RlC6FvS3MFShxTn4FHAy904bVjX5Nn4/eTjUkurW0fHK+M/fyQdXuyCy9+L7yjA+YMGogzzSJNc7M4UtfSKvtw==
+
 react-is@^16.12.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"