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 styles from "./header.module.scss";
import { Logo, LogoIcon } from "@/components/general/Logo"; import { Logo, LogoIcon } from "@/components/general/Logo";
import Icon from "../general/Icon"; import Icon from "../general/Icon";
import { useInView } from "react-intersection-observer";
export const Header = () => { export const Header = () => {
const { ref: observer, inView: isScrolled } = useInView({
triggerOnce: false,
});
const [showMenu, setShowMenu] = useState(false); const [showMenu, setShowMenu] = useState(false);
function toggleMenu() { function toggleMenu() {
setShowMenu(!showMenu); setShowMenu(!showMenu);
@ -51,47 +56,19 @@ export const Header = () => {
); );
return ( return (
<header className={styles.header}> <>
<Link href="/" aria-label="Hjem"> <header
<Logo /> className={styles.header}
</Link> data-show={showMenu}
<nav className={styles.siteMenu} data-show={showMenu} ref={siteMenu}> data-small={isScrolled}
<ul className={styles.mainMenu}> ref={siteMenu}
<li> >
<Link <Link href="/" aria-label="Hjem">
href="/arrangementer" <Logo />
data-active={pathname === "/arrangementer"} </Link>
> <nav className={styles.siteMenu}>
Arrangementer <ul className={styles.mainMenu}>
</Link> <li>
</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}>
<Link <Link
href="/arrangementer" href="/arrangementer"
data-active={pathname === "/arrangementer"} data-active={pathname === "/arrangementer"}
@ -99,69 +76,144 @@ export const Header = () => {
Arrangementer Arrangementer
</Link> </Link>
</li> </li>
<li className={styles.menuItemLarge}> <li>
<Link href="/praktisk" data-active={pathname === "/praktisk"}> <Link href="/praktisk" data-active={pathname === "/praktisk"}>
Praktisk info Praktisk info
</Link> </Link>
</li> </li>
<li className={styles.menuItemLarge}> <li>
<Link href="/utleie" data-active={pathname === "/utleie"}> <Link href="/utleie" data-active={pathname === "/utleie"}>
Utleie Utleie
</Link> </Link>
</li> </li>
<li className={styles.menuItemLarge}> <li>
<Link href="/medlem" data-active={pathname === "/medlem"}> <Link href="/medlem" data-active={pathname === "/medlem"}>
Bli medlem Bli medlem
</Link> </Link>
</li> </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> </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> </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 { a {
text-decoration: none; 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 { .logo {
@ -103,7 +137,7 @@
margin-top: var(--spacing-m); margin-top: var(--spacing-m);
} }
.siteMenu[data-show=true] { .header[data-show=true] {
.mainMenu { .mainMenu {
animation: slideOutRight .3s ease-out forwards; animation: slideOutRight .3s ease-out forwards;
} }
@ -156,4 +190,11 @@
transform: translateX(0); transform: translateX(0);
opacity: 1; 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 { html {
min-height: 100%; min-height: 100%;
font-size: calc(1rem + 8 * (100vw - 320px) / 1920); font-size: calc(1rem + 8 * (100vw - 320px) / 1920);
background-color: var(--color-chateauBlue);
} }
html, html,