feat(SW-2782): Updated header as per design, added language switcher and user menu * feat(SW-2782): Updated header as per design, added language switcher and user menu * feat(SW-2782): Updated UI as per design * feat(SW-2782): Optimised code with use of Popover and modal from RAC Approved-by: Anton Gunnarsson
49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
"use client"
|
|
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
import Link from "@scandic-hotels/design-system/Link"
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import { LanguageSwitcher } from "@/components/LanguageSwitcher"
|
|
import useLang from "@/hooks/useLang"
|
|
|
|
import { UserMenu } from "../UserMenu"
|
|
|
|
import styles from "./navigation-menu.module.css"
|
|
|
|
export function NavigationMenu({ isMobile = false }: { isMobile?: boolean }) {
|
|
const intl = useIntl()
|
|
const lang = useLang()
|
|
|
|
return (
|
|
<div
|
|
className={`styles.menuItems ${isMobile ? styles.mobileMenu : styles.desktopMenu}`}
|
|
>
|
|
<Typography
|
|
variant={
|
|
isMobile
|
|
? "Body/Paragraph/mdRegular"
|
|
: "Body/Supporting text (caption)/smRegular"
|
|
}
|
|
>
|
|
<Link
|
|
href="#"
|
|
color={isMobile ? "none" : "white"}
|
|
className={`${styles.menuItem} ${styles.contactLink}`}
|
|
>
|
|
{isMobile ? null : (
|
|
<MaterialIcon icon="call" size={16} color={"CurrentColor"} />
|
|
)}
|
|
{intl.formatMessage({ defaultMessage: "Contact us" })}
|
|
</Link>
|
|
</Typography>
|
|
|
|
<LanguageSwitcher currentLanguage={lang} isMobile={isMobile} />
|
|
|
|
{!isMobile && <UserMenu isMobile={isMobile} />}
|
|
</div>
|
|
)
|
|
}
|