101 lines
2.7 KiB
TypeScript
101 lines
2.7 KiB
TypeScript
"use client"
|
|
import { useState } from "react"
|
|
|
|
import Image from "@/components/Image"
|
|
|
|
import Mobile from "../LanguageSwitcher/Mobile"
|
|
|
|
import styles from "./mainMenu.module.css"
|
|
|
|
import type { MainMenuProps } from "@/types/components/current/header/mainMenu"
|
|
|
|
export default function MainMenu({
|
|
currentLanguage,
|
|
frontpageLinkText,
|
|
homeHref,
|
|
links,
|
|
logo,
|
|
topMenuMobileLinks,
|
|
urls,
|
|
}: MainMenuProps) {
|
|
const [isOpen, setIsOpen] = useState(false)
|
|
|
|
function toogleIsOpen() {
|
|
setIsOpen((prevIsOpen) => !prevIsOpen)
|
|
}
|
|
|
|
return (
|
|
<div className={styles.mainMenu}>
|
|
<div
|
|
className={styles.container}
|
|
itemScope
|
|
itemType="http://schema.org/Organization"
|
|
>
|
|
<meta itemProp="name" content="Scandic" />
|
|
<button
|
|
aria-pressed="false"
|
|
className={`${styles.expanderBtn} ${isOpen ? styles.expanded : ""}`}
|
|
data-js="main-nav-toggler"
|
|
data-target="#main-menu"
|
|
onClick={toogleIsOpen}
|
|
type="button"
|
|
>
|
|
<span className={styles.iconBars}></span>
|
|
<span className={styles.hiddenAccessible}>Menu</span>
|
|
</button>
|
|
|
|
<a
|
|
className={styles.logoLink}
|
|
href={homeHref}
|
|
id="scandic-logo"
|
|
itemProp="url"
|
|
>
|
|
<span className={styles.hiddenAccessible}>{frontpageLinkText}</span>
|
|
<Image
|
|
alt="Scandic Hotels logo"
|
|
className={styles.logo}
|
|
data-js="scandiclogoimg"
|
|
data-nosvgsrc="/_static/img/scandic-logotype.png"
|
|
itemProp="logo"
|
|
height={22}
|
|
src={logo.url}
|
|
width={logo.dimension.width}
|
|
/>
|
|
</a>
|
|
|
|
<nav>
|
|
<ul
|
|
className={`${styles.list} ${isOpen ? styles.isOpen : ""}`}
|
|
data-collapsable="main-menu"
|
|
id="main-menu"
|
|
>
|
|
{links.map((link) => (
|
|
<li className={styles.li} key={link.href}>
|
|
<a className={styles.link} href={link.href}>
|
|
{link.title}
|
|
</a>
|
|
</li>
|
|
))}
|
|
|
|
<ul className={styles.mobileList}>
|
|
{topMenuMobileLinks.map(({ link }) => (
|
|
<li className={styles.mobileLi} key={link.href}>
|
|
<a className={styles.mobileLink} href={link.href}>
|
|
{link.title}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
{urls ? (
|
|
<li className={styles.mobileLi}>
|
|
<Mobile currentLanguage={currentLanguage} urls={urls} />
|
|
</li>
|
|
) : null}
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|