feat(WEB-93): add Header to CMS and render it in Next
This commit is contained in:
Simon Emanuelsson
102
components/Current/Header/MainMenu/index.tsx
Normal file
102
components/Current/Header/MainMenu/index.tsx
Normal file
@@ -0,0 +1,102 @@
|
||||
"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>
|
||||
)
|
||||
}
|
||||
219
components/Current/Header/MainMenu/mainMenu.module.css
Normal file
219
components/Current/Header/MainMenu/mainMenu.module.css
Normal file
@@ -0,0 +1,219 @@
|
||||
.mainMenu {
|
||||
background-color: #fff;
|
||||
background-image: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
max-height: 100%;
|
||||
width: 100%;
|
||||
z-index: 99999;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.container {
|
||||
box-sizing: content-box;
|
||||
display: grid;
|
||||
/** Third column is Book button */
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
max-width: 1200px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.expanderBtn {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
justify-self: flex-start;
|
||||
left: 0;
|
||||
padding: 0.75rem 0.5rem 1rem;
|
||||
transition: .3s;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.iconBars,
|
||||
.iconBars::after,
|
||||
.iconBars::before {
|
||||
background: #757575;
|
||||
border-radius: 0.1428571429rem;
|
||||
display: inline-block;
|
||||
height: 0.2857142857rem;
|
||||
position: relative;
|
||||
transition: .3s;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.iconBars::after,
|
||||
.iconBars::before {
|
||||
content: "";
|
||||
left: 0;
|
||||
position: absolute;
|
||||
transform-origin: 0.1428571429rem center;
|
||||
}
|
||||
|
||||
.iconBars::after {
|
||||
top: -0.5rem;
|
||||
}
|
||||
|
||||
.iconBars::before {
|
||||
top: 0.5rem;
|
||||
}
|
||||
|
||||
.expanded .iconBars {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.expanded .iconBars::after,
|
||||
.expanded .iconBars::before {
|
||||
top: 0;
|
||||
transform-origin: 50% 50%;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.expanded .iconBars::after {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.expanded .iconBars::before {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.hiddenAccessible {
|
||||
display: block;
|
||||
height: 1px;
|
||||
left: -100000em;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.logoLink {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.list {
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #e3e0db;
|
||||
display: none;
|
||||
list-style: none;
|
||||
overflow-y: visible;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.list.isOpen {
|
||||
display: block;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 100%;
|
||||
}
|
||||
|
||||
.li {
|
||||
border-bottom: none;
|
||||
display: block;
|
||||
line-height: 17px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: #000;
|
||||
display: block;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: .875rem;
|
||||
font-weight: 700;
|
||||
padding-bottom: 20px;
|
||||
padding-top: 20px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
color: #7f7369;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.mobileList {
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
.mobileLi {
|
||||
display: block;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mobileLink {
|
||||
color: #000;
|
||||
display: block;
|
||||
font-family: Helvetica;
|
||||
font-size: .875rem;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 950px) {
|
||||
.logoLink {
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
.li {
|
||||
background-color: #f3f2f1;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 950px) {
|
||||
.mainMenu {
|
||||
background-color: hsla(0, 0%, 100%, .95);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container {
|
||||
gap: 30px;
|
||||
grid-template-columns: minmax(100px, auto) 1fr;
|
||||
padding: 0px 30px;
|
||||
}
|
||||
|
||||
.expanderBtn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo {
|
||||
max-width: none;
|
||||
min-width: 98px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.list {
|
||||
border-top: none;
|
||||
display: block;
|
||||
padding-bottom: 0;
|
||||
padding-top: 0;
|
||||
position: static;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.list.isOpen {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.li {
|
||||
display: table-cell;
|
||||
float: none;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.link {
|
||||
background-image: none;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
font-weight: 700;
|
||||
line-height: 1.15;
|
||||
padding: 30px 15px;
|
||||
}
|
||||
|
||||
.mobileList {
|
||||
display: none;
|
||||
padding-top: 0px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user