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

sticky menu fuckery

Browse Source
This commit is contained in:
elisejakob
2024-06-27 00:15:58 +02:00
parent 5f1afa620a
commit e0b26b1032
3 changed files with 184 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>
</>
);
};

43
web/src/components/layout/header.module.scss
View File

@ -11,6 +11,40 @@
a {
text-decoration: none;
}
&[data-small=true] {
.headerBar {
animation: slideDown .6s ease forwards;
}
}
}
.headerBar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
background: var(--color-chateauBlue);
color: var(--color-white);
padding: .5rem var(--spacing-sitepadding-inline);
display: flex;
justify-content: space-between;
align-items: flex-start;
transform: translateY(-100%);
animation: slideUp .4s ease forwards;
}
@keyframes slideDown {
to {
transform: translateY(0);
}
}
@keyframes slideUp {
to {
transform: translateY(-100%);
}
}
.logo {
@ -103,7 +137,7 @@
margin-top: var(--spacing-m);
}
.siteMenu[data-show=true] {
.header[data-show=true] {
.mainMenu {
animation: slideOutRight .3s ease-out forwards;
}
@ -156,4 +190,11 @@
transform: translateX(0);
opacity: 1;
}
}
// observer to trigger small menu
.observer {
position: absolute;
top: calc(100vh + 8rem);
height: calc(100% - 100vh - 8rem);
}

1
web/src/css/base.scss
View File

@ -7,7 +7,6 @@
html {
min-height: 100%;
font-size: calc(1rem + 8 * (100vw - 320px) / 1920);
background-color: var(--color-chateauBlue);
}
html,