83 lines
2.3 KiB
TypeScript
83 lines
2.3 KiB
TypeScript
"use client";
|
|
import { useState } from "react";
|
|
import Link from "next/link";
|
|
import styles from "./header.module.scss";
|
|
import { Logo } from "../general/Logo";
|
|
|
|
export const Header = () => {
|
|
const [showMenu, setShowMenu] = useState(false);
|
|
function toggleMenu() {
|
|
setShowMenu(!showMenu);
|
|
}
|
|
|
|
return (
|
|
<header className={styles.header}>
|
|
<Link href="/" aria-label="Hjem">
|
|
<Logo />
|
|
</Link>
|
|
<nav className={styles.siteMenu} data-show={showMenu}>
|
|
<ul className={styles.mainMenu}>
|
|
<li>
|
|
<Link href="/arrangementer">Arrangementer</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/">Praktisk info</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/utleie">Utleie</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/">Bli medlem</Link>
|
|
</li>
|
|
</ul>
|
|
<button
|
|
className={styles.toggleMenu}
|
|
aria-label="Vis meny"
|
|
onClick={toggleMenu}
|
|
>
|
|
<span className={styles.menuIcon}></span>
|
|
</button>
|
|
<ul className={styles.fullMenu}>
|
|
<li className={styles.menuItemLarge}>
|
|
<Link href="/arrangementer">Arrangementer</Link>
|
|
</li>
|
|
<li className={styles.menuItemLarge}>
|
|
<Link href="/">Praktisk info</Link>
|
|
</li>
|
|
<li className={styles.menuItemLarge}>
|
|
<Link href="/utleie">Utleie</Link>
|
|
</li>
|
|
<li className={styles.menuItemLarge}>
|
|
<Link href="/">Bli medlem</Link>
|
|
</li>
|
|
<li className={styles.divider}>
|
|
<Link href="/aktuelt">Siste nytt</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/">Om oss</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/">Kontakt</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/">Bli frivillig</Link>
|
|
</li>
|
|
<li className={styles.search}>
|
|
<label>
|
|
<p>Søk</p>
|
|
<input type="text" />
|
|
</label>
|
|
</li>
|
|
<li className={styles.galtinn}>
|
|
<Link href="/">Mitt medlemskap →</Link>
|
|
</li>
|
|
<li>
|
|
{/* TODO: skal trolig ikke være så synlig ved lansering */}
|
|
<Link href="/lokaler">Lokaler*</Link>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
);
|
|
};
|