sticky menu fuckery
This commit is contained in:
elisejakob
@ -5,8 +5,13 @@ import Link from "next/link";
|
||||
import styles from "./header.module.scss";
|
||||
import { Logo, LogoIcon } from "@/components/general/Logo";
|
||||
import Icon from "../general/Icon";
|
||||
import { useInView } from "react-intersection-observer";
|
||||
|
||||
export const Header = () => {
|
||||
const { ref: observer, inView: isScrolled } = useInView({
|
||||
triggerOnce: false,
|
||||
});
|
||||
|
||||
const [showMenu, setShowMenu] = useState(false);
|
||||
function toggleMenu() {
|
||||
setShowMenu(!showMenu);
|
||||
@ -51,47 +56,19 @@ export const Header = () => {
|
||||
);
|
||||
|
||||
return (
|
||||
<header className={styles.header}>
|
||||
<Link href="/" aria-label="Hjem">
|
||||
<Logo />
|
||||
</Link>
|
||||
<nav className={styles.siteMenu} data-show={showMenu} ref={siteMenu}>
|
||||
<ul className={styles.mainMenu}>
|
||||
<li>
|
||||
<Link
|
||||
href="/arrangementer"
|
||||
data-active={pathname === "/arrangementer"}
|
||||
>
|
||||
Arrangementer
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/praktisk" data-active={pathname === "/praktisk"}>
|
||||
Praktisk info
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/utleie" data-active={pathname === "/utleie"}>
|
||||
Utleie
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/medlem" data-active={pathname === "/medlem"}>
|
||||
Bli medlem
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
<button
|
||||
className={styles.toggleMenu}
|
||||
aria-label="Vis meny"
|
||||
onClick={toggleMenu}
|
||||
>
|
||||
<MenuIcon showMenu={showMenu} />
|
||||
</button>
|
||||
<div className={styles.fullMenu}>
|
||||
<LogoIcon face="right" />
|
||||
<ul>
|
||||
<li className={styles.menuItemLarge}>
|
||||
<>
|
||||
<header
|
||||
className={styles.header}
|
||||
data-show={showMenu}
|
||||
data-small={isScrolled}
|
||||
ref={siteMenu}
|
||||
>
|
||||
<Link href="/" aria-label="Hjem">
|
||||
<Logo />
|
||||
</Link>
|
||||
<nav className={styles.siteMenu}>
|
||||
<ul className={styles.mainMenu}>
|
||||
<li>
|
||||
<Link
|
||||
href="/arrangementer"
|
||||
data-active={pathname === "/arrangementer"}
|
||||
@ -99,69 +76,144 @@ export const Header = () => {
|
||||
Arrangementer
|
||||
</Link>
|
||||
</li>
|
||||
<li className={styles.menuItemLarge}>
|
||||
<li>
|
||||
<Link href="/praktisk" data-active={pathname === "/praktisk"}>
|
||||
Praktisk info
|
||||
</Link>
|
||||
</li>
|
||||
<li className={styles.menuItemLarge}>
|
||||
<li>
|
||||
<Link href="/utleie" data-active={pathname === "/utleie"}>
|
||||
Utleie
|
||||
</Link>
|
||||
</li>
|
||||
<li className={styles.menuItemLarge}>
|
||||
<li>
|
||||
<Link href="/medlem" data-active={pathname === "/medlem"}>
|
||||
Bli medlem
|
||||
</Link>
|
||||
</li>
|
||||
<li className={styles.divider}>
|
||||
<Link href="/aktuelt" data-active={pathname === "/aktuelt"}>
|
||||
Siste nytt
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/om" data-active={pathname === "/om"}>
|
||||
Om oss
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/kontakt" data-active={pathname === "/kontakt"}>
|
||||
Kontakt
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/frivillig" data-active={pathname === "/frivillig"}>
|
||||
Bli frivillig
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
{/* TODO: skal trolig ikke være så synlig ved lansering */}
|
||||
<Link href="/lokaler">Lokaler*</Link>
|
||||
</li>
|
||||
<li>
|
||||
{/* TODO: skal trolig ikke være så synlig ved lansering */}
|
||||
<Link href="/foreninger">Foreninger*</Link>
|
||||
</li>
|
||||
<li className={styles.search}>
|
||||
<label>
|
||||
<p>Søk</p>
|
||||
<input type="text" />
|
||||
</label>
|
||||
</li>
|
||||
<li className={styles.galtinn}>
|
||||
<a
|
||||
href="https://galtinn.neuf.no/"
|
||||
target="_blank"
|
||||
className="button tertiary"
|
||||
>
|
||||
<span>Mitt medlemskap</span>
|
||||
<Icon type="externalLink" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<button
|
||||
className={styles.toggleMenu}
|
||||
aria-label="Vis meny"
|
||||
onClick={toggleMenu}
|
||||
>
|
||||
<MenuIcon showMenu={showMenu} />
|
||||
</button>
|
||||
<div className={styles.fullMenu}>
|
||||
<LogoIcon face="right" />
|
||||
<ul>
|
||||
<li className={styles.menuItemLarge}>
|
||||
<Link
|
||||
href="/arrangementer"
|
||||
data-active={pathname === "/arrangementer"}
|
||||
>
|
||||
Arrangementer
|
||||
</Link>
|
||||
</li>
|
||||
<li className={styles.menuItemLarge}>
|
||||
<Link href="/praktisk" data-active={pathname === "/praktisk"}>
|
||||
Praktisk info
|
||||
</Link>
|
||||
</li>
|
||||
<li className={styles.menuItemLarge}>
|
||||
<Link href="/utleie" data-active={pathname === "/utleie"}>
|
||||
Utleie
|
||||
</Link>
|
||||
</li>
|
||||
<li className={styles.menuItemLarge}>
|
||||
<Link href="/medlem" data-active={pathname === "/medlem"}>
|
||||
Bli medlem
|
||||
</Link>
|
||||
</li>
|
||||
<li className={styles.divider}>
|
||||
<Link href="/aktuelt" data-active={pathname === "/aktuelt"}>
|
||||
Siste nytt
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/om" data-active={pathname === "/om"}>
|
||||
Om oss
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/kontakt" data-active={pathname === "/kontakt"}>
|
||||
Kontakt
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/frivillig" data-active={pathname === "/frivillig"}>
|
||||
Bli frivillig
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
{/* TODO: skal trolig ikke være så synlig ved lansering */}
|
||||
<Link href="/lokaler">Lokaler*</Link>
|
||||
</li>
|
||||
<li>
|
||||
{/* TODO: skal trolig ikke være så synlig ved lansering */}
|
||||
<Link href="/foreninger">Foreninger*</Link>
|
||||
</li>
|
||||
<li className={styles.search}>
|
||||
<label>
|
||||
<p>Søk</p>
|
||||
<input type="text" />
|
||||
</label>
|
||||
</li>
|
||||
<li className={styles.galtinn}>
|
||||
<a
|
||||
href="https://galtinn.neuf.no/"
|
||||
target="_blank"
|
||||
className="button tertiary"
|
||||
>
|
||||
<span>Mitt medlemskap</span>
|
||||
<Icon type="externalLink" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<div className={styles.headerBar} aria-hidden>
|
||||
<Link href="/" aria-label="Hjem">
|
||||
{isScrolled ? <LogoIcon face="right" /> : <Logo />}
|
||||
</Link>
|
||||
<nav className={styles.siteMenu} ref={siteMenu}>
|
||||
<ul className={styles.mainMenu}>
|
||||
<li>
|
||||
<Link
|
||||
href="/arrangementer"
|
||||
data-active={pathname === "/arrangementer"}
|
||||
>
|
||||
Arrangementer
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/praktisk" data-active={pathname === "/praktisk"}>
|
||||
Praktisk info
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/utleie" data-active={pathname === "/utleie"}>
|
||||
Utleie
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/medlem" data-active={pathname === "/medlem"}>
|
||||
Bli medlem
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
<button
|
||||
className={styles.toggleMenu}
|
||||
aria-label="Vis meny"
|
||||
onClick={toggleMenu}
|
||||
>
|
||||
<MenuIcon showMenu={showMenu} />
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
</header>
|
||||
<div className={styles.observer} ref={observer}></div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user