/
githubmirror
/
next.js
Обзор
Документация
Войти
/
githubmirror
/
next.js
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
canary
examples/cms-buttercms/components/header-section.js
51 строка
1 KB
Steven
chore(examples): use default prettier for examples/templates (#60530)
12 янв 2024, 02:01
Не верифицирован
12 янв 2024, 02:01
4466ba4
Код
Авторство
О чём код?
import { useEffect, useState, useRef } from "react"; import Image from "next/image"; import MainMenu from "./main-menu/main-menu"; export default function HeaderSection({ mainMenu }) { const [isNavbarSticky, setIsNavbarSticky] = useState(false); const navbarAreaEl = useRef(null); function fixNavBar() { if (navbarAreaEl.current) { setIsNavbarSticky(window.pageYOffset > navbarAreaEl.current.offsetTop); } } useEffect(() => { window.addEventListener("scroll", fixNavBar); return () => { window.removeEventListener("scroll", fixNavBar); }; }, []); return ( <header className="header"> <div ref={navbarAreaEl} className={`navbar-area ${isNavbarSticky ? "sticky" : ""}`} > <div className="container"> <div className="row align-items-center"> <div className="col-lg-12"> <nav className="navbar navbar-expand-lg"> <a className="navbar-brand" href="https://buttercms.com"> <Image src="https://cdn.buttercms.com/PBral0NQGmmFzV0uG7Q6" alt="Logo" width={180} height={45} /> </a> <MainMenu mainMenuLinks={mainMenu} /> </nav> </div> </div> </div> </div> </header> ); }