edb/neuf-www
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

reverse header observer fuckery

Browse Source
This commit is contained in:
elisejakob
2024-07-07 14:02:42 +02:00
parent 53f8d03f27
commit aa914f4e6f
3 changed files with 11 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
web/src/components/layout/Header.tsx
View File

@ -8,7 +8,7 @@ import Icon from "../general/Icon";
import { useInView } from "react-intersection-observer";
export const Header = () => {
const { ref: observer, inView: isScrolled } = useInView({
const { ref: observer, inView: isInView } = useInView({
triggerOnce: false,
});
@ -36,11 +36,14 @@ export const Header = () => {
useEffect(() => {
if (showMenu) {
document.body.style.overflow = "hidden";
document.body.style.height = "100vh";
const scrollY = window.scrollY;
document.body.style.position = "fixed";
document.body.style.top = `-${scrollY}px`;
} else {
document.body.style.overflow = "";
document.body.style.height = "";
const scrollY = parseInt(document.body.style.top || "0") * -1;
document.body.style.position = "";
document.body.style.top = "";
window.scrollTo(0, scrollY);
}
}, [showMenu]);
@ -60,7 +63,7 @@ export const Header = () => {
<header
className={styles.header}
data-show={showMenu}
data-small={isScrolled}
data-small={!isInView}
ref={siteMenu}
>
<Link href="/" aria-label="Hjem">
@ -176,7 +179,7 @@ export const Header = () => {
</nav>
<div className={styles.headerBar} aria-hidden>
<Link href="/" aria-label="Hjem">
{isScrolled ? <LogoIcon face="right" /> : <Logo />}
{!isInView ? <LogoIcon face="right" /> : <Logo />}
</Link>
<nav className={styles.siteMenu} ref={siteMenu}>
<ul className={styles.mainMenu}>