103 lines
2.9 KiB
TypeScript
103 lines
2.9 KiB
TypeScript
"use client"
|
|
import { useState } from "react"
|
|
|
|
import Image from "@/components/Image"
|
|
import Link from "next/link"
|
|
// import Mobile from "../LanguageSwitcher/Mobile"
|
|
|
|
import styles from "./mainMenu.module.css"
|
|
|
|
import type { MainMenuProps } from "@/types/components/current/header/mainMenu"
|
|
|
|
/**
|
|
* Mobile is commented out as it relates to
|
|
* LanguageSwitcher and will be handled in another task
|
|
*/
|
|
export default function MainMenu({ frontpageLinkText, homeHref, links, logo, topMenuMobileLinks }: 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>
|
|
|
|
<Link
|
|
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}
|
|
/>
|
|
</Link>
|
|
|
|
<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}
|
|
>
|
|
<Link
|
|
className={styles.link}
|
|
href={link.href}
|
|
>
|
|
{link.title}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
|
|
<ul className={styles.mobileList}>
|
|
{topMenuMobileLinks.map(({ link }) => (
|
|
<li className={styles.mobileLi} key={link.href}>
|
|
<Link className={styles.mobileLink} href={link.href}>
|
|
{link.title}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
{/* <li className="nav-primary__item hidden-medium hidden-large">
|
|
{links ? <Mobile currentLanguage={currentLanguage} links={links} /> : null}
|
|
</li> */}
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|