93 lines
2.7 KiB
TypeScript
93 lines
2.7 KiB
TypeScript
"use client"
|
|
import { useState } from "react"
|
|
|
|
import Image from "@/components/Image"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
|
|
import styles from "./mainMenu.module.css"
|
|
|
|
import type { MainMenuProps } from "@/types/components/current/header/mainMenu"
|
|
|
|
export function MainMenu({
|
|
frontpageLinkText,
|
|
homeHref,
|
|
links,
|
|
logo,
|
|
topMenuMobileLinks,
|
|
languageSwitcher,
|
|
}: 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" />
|
|
<nav className={styles.navBar}>
|
|
<button
|
|
aria-pressed="false"
|
|
className={`${styles.expanderBtn} ${isOpen ? styles.expanded : ""}`}
|
|
onClick={toogleIsOpen}
|
|
type="button"
|
|
>
|
|
<span className={styles.iconBars}></span>
|
|
<span className={styles.hiddenAccessible}>Menu</span>
|
|
</button>
|
|
|
|
<a className={styles.logoLink} href={homeHref}>
|
|
<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>
|
|
|
|
<ul
|
|
className={`${styles.listWrapper} ${isOpen ? styles.isOpen : ""}`}
|
|
>
|
|
<ul className={styles.mainLinks}>
|
|
{links.map((link, i) => (
|
|
<li className={styles.li} key={link.href + i}>
|
|
<a className={styles.link} href={link.href}>
|
|
{link.title}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<ul className={styles.mobileList}>
|
|
{topMenuMobileLinks.map(({ link }, i) => (
|
|
<li className={styles.mobileLi} key={link.href + i}>
|
|
<a className={styles.mobileLink} href={link.href}>
|
|
{link.title}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
{languageSwitcher ? (
|
|
<li className={styles.mobileLi}>{languageSwitcher}</li>
|
|
) : null}
|
|
</ul>
|
|
{/* <div className={styles.buttonContainer}>
|
|
<Button>Book</Button>
|
|
</div> */}
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|