feat(WEB-102): language-switcher per page basis
This commit is contained in:
Simon Emanuelsson
@@ -44,7 +44,7 @@ export default async function CurrentContentPage({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Header lang={params.lang} />
|
<Header lang={params.lang} uid={pageData.system.uid} />
|
||||||
<ContentPage data={response.data} />
|
<ContentPage data={response.data} />
|
||||||
<Tracking pageData={trackingData} />
|
<Tracking pageData={trackingData} />
|
||||||
</>
|
</>
|
||||||
|
|||||||
@@ -1,8 +1,7 @@
|
|||||||
.wrapper {
|
.wrapper {
|
||||||
width: 100%;
|
|
||||||
position: relative;
|
|
||||||
z-index: 10;
|
|
||||||
padding-bottom: 50px;
|
|
||||||
background: #f3f2f1;
|
background: #f3f2f1;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
padding-bottom: 50px;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
@@ -1,198 +0,0 @@
|
|||||||
/* eslint-disable @next/next/no-img-element */
|
|
||||||
import {
|
|
||||||
currentAboutLinks,
|
|
||||||
currentSponsoringLinks,
|
|
||||||
currentWifiLinks,
|
|
||||||
} from "@/constants/current/links"
|
|
||||||
|
|
||||||
import Desktop from "./LanguageSwitcher/Desktop"
|
|
||||||
import Mobile from "./LanguageSwitcher/Mobile"
|
|
||||||
|
|
||||||
import type { LanguageSwitcherLink } from "@/types/components/current/languageSwitcher"
|
|
||||||
import type { HeaderProps } from "@/types/components/current/header"
|
|
||||||
|
|
||||||
const paths: Record<string, LanguageSwitcherLink[]> = {
|
|
||||||
"/kundeservice/sporgsmal-og-svar/om-scandics-website": currentAboutLinks,
|
|
||||||
"/oplev-scandic/wifi": currentWifiLinks,
|
|
||||||
"/sponsorering": currentSponsoringLinks,
|
|
||||||
}
|
|
||||||
|
|
||||||
const currentLanguage = "Dansk"
|
|
||||||
|
|
||||||
export default function DaHeader({ pathname }: HeaderProps) {
|
|
||||||
const links = paths?.[pathname] ?? null
|
|
||||||
return (
|
|
||||||
<header className="header" role="banner">
|
|
||||||
<div className="offline-banner hidden">
|
|
||||||
Du er offline. Noget indhold på siden kan være forældet.
|
|
||||||
<button type="button" className="reload">
|
|
||||||
Opdatér siden
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="l-section main-header navigation-bar"
|
|
||||||
data-js="main-nav-bar"
|
|
||||||
>
|
|
||||||
<div className="navigation-bar__top navigation-bar__top--ghostwhite-light">
|
|
||||||
<div className="l-section__inner">
|
|
||||||
<a
|
|
||||||
href="https://www.scandichotels.dk"
|
|
||||||
className="scandic-main-page-link"
|
|
||||||
>
|
|
||||||
Back to scandichotels.dk
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<ul className="nav-secondary navbar-login">
|
|
||||||
<li className="nav-secondary__item hidden-xxsmall hidden-xsmall hidden-small">
|
|
||||||
{links ? (
|
|
||||||
<Desktop currentLanguage={currentLanguage} links={links} />
|
|
||||||
) : null}
|
|
||||||
</li>
|
|
||||||
<li className=" hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
|
|
||||||
<a
|
|
||||||
className="nav-secondary__item__link"
|
|
||||||
href="https://www.scandichotels.dk/hotelreservation/hent-booking"
|
|
||||||
>
|
|
||||||
Vis/Afbestil booking
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className=" hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
|
|
||||||
<a
|
|
||||||
className="nav-secondary__item__link"
|
|
||||||
href="https://www.scandichotels.dk/job-hos-scandic/ledige-stillinger"
|
|
||||||
>
|
|
||||||
Arbejd med os
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className=" hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
|
|
||||||
<a
|
|
||||||
className="nav-secondary__item__link"
|
|
||||||
href="https://www.scandichotels.dk/forretningsrejse"
|
|
||||||
>
|
|
||||||
Forretningsrejse
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className=" hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
|
|
||||||
<a
|
|
||||||
className="nav-secondary__item__link"
|
|
||||||
href="https://www.scandichotels.dk/scandic-friends"
|
|
||||||
>
|
|
||||||
Om Scandic Friends
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="navigation-bar__main">
|
|
||||||
<div
|
|
||||||
className="l-section__inner l-section__inner--small-no-padding"
|
|
||||||
itemScope
|
|
||||||
itemType="http://schema.org/Organization"
|
|
||||||
>
|
|
||||||
<meta itemProp="name" content="Scandic" />
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="navigation-bar__main__expander"
|
|
||||||
data-js="main-nav-toggler"
|
|
||||||
data-target="#main-menu"
|
|
||||||
aria-pressed="false"
|
|
||||||
>
|
|
||||||
<span className="icon-bars"></span>
|
|
||||||
<span className="hidden--accessible">Menu</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<a
|
|
||||||
id="scandic-logo"
|
|
||||||
className="navigation-bar__main__logo hidden-medium "
|
|
||||||
href="https://www.scandichotels.dk"
|
|
||||||
itemProp="url"
|
|
||||||
>
|
|
||||||
<span className="hidden--accessible">
|
|
||||||
Back to scandichotels.dk
|
|
||||||
</span>
|
|
||||||
<img
|
|
||||||
src="/Static/img/scandic-logotype.svg"
|
|
||||||
data-js="scandiclogoimg"
|
|
||||||
alt="Scandic Hotels logo"
|
|
||||||
height="22"
|
|
||||||
data-nosvgsrc="/Static/img/scandic-logotype.png"
|
|
||||||
itemProp="logo"
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<nav>
|
|
||||||
<ul
|
|
||||||
id="main-menu"
|
|
||||||
className="nav-primary is-collapsed"
|
|
||||||
data-collapsable="main-menu"
|
|
||||||
>
|
|
||||||
<li
|
|
||||||
className="nav-primary__item nav-primary__item--primary hidden-large hidden-small hidden-xsmall hidden-xxsmall"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
className="navigation-bar__main__logo"
|
|
||||||
href="https://www.scandichotels.dk"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="/Static/img/scandic-logotype.svg"
|
|
||||||
data-js="scandiclogoimg"
|
|
||||||
alt="Scandic Hotels logo"
|
|
||||||
height="22"
|
|
||||||
data-nosvgsrc="/Static/img/scandic-logotype.png"
|
|
||||||
/>
|
|
||||||
<span className="hidden--accessible">
|
|
||||||
Back to scandichotels.dk
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="nav-primary__item nav-primary__item--primary ">
|
|
||||||
<a href="https://www.scandichotels.dk/hoteller">
|
|
||||||
Hoteller & destinationer
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="nav-primary__item nav-primary__item--primary ">
|
|
||||||
<a href="https://www.scandichotels.dk/rejseguide">
|
|
||||||
Rejseguide
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="nav-primary__item nav-primary__item--primary ">
|
|
||||||
<a href="https://www.scandichotels.dk/mode-konference-event">
|
|
||||||
Møde, konference & event
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="nav-primary__item nav-primary__item--primary ">
|
|
||||||
<a href="https://www.scandichotels.dk/oplev-scandic">
|
|
||||||
Oplev Scandic
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="nav-primary__item nav-primary__item--primary ">
|
|
||||||
<a href="https://www.scandichotels.dk/tilbud-og-hotelpakker">
|
|
||||||
Tilbud
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li className="nav-primary__item nav-primary__item--secondary hidden-medium hidden-large ">
|
|
||||||
<a href="https://www.scandichotels.dk/scandic-friends">
|
|
||||||
Om Scandic Friends
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="nav-primary__item nav-primary__item--secondary hidden-medium hidden-large ">
|
|
||||||
<a href="https://www.scandichotels.dk/forretningsrejse">
|
|
||||||
Forretningsrejse
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li className="nav-primary__item hidden-medium hidden-large">
|
|
||||||
{links ? (
|
|
||||||
<Mobile currentLanguage={currentLanguage} links={links} />
|
|
||||||
) : null}
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,209 +0,0 @@
|
|||||||
import {
|
|
||||||
currentAboutLinks,
|
|
||||||
currentSponsoringLinks,
|
|
||||||
currentWifiLinks,
|
|
||||||
} from "@/constants/current/links"
|
|
||||||
|
|
||||||
import Desktop from "./LanguageSwitcher/Desktop"
|
|
||||||
import Mobile from "./LanguageSwitcher/Mobile"
|
|
||||||
|
|
||||||
import type { HeaderProps } from "@/types/components/current/header"
|
|
||||||
import type { LanguageSwitcherLink } from "@/types/components/current/languageSwitcher"
|
|
||||||
|
|
||||||
const paths: Record<string, LanguageSwitcherLink[]> = {
|
|
||||||
"/kundenbetreuung/haufig-gestellte-fragen/nutzung-der-internetseite":
|
|
||||||
currentAboutLinks,
|
|
||||||
"/scandic-entdecken/wlan": currentWifiLinks,
|
|
||||||
"/sponsoring": currentSponsoringLinks,
|
|
||||||
}
|
|
||||||
|
|
||||||
const currentLanguage = "Deutsch"
|
|
||||||
|
|
||||||
export default function DeHeader({ pathname }: HeaderProps) {
|
|
||||||
const links = paths?.[pathname] ?? null
|
|
||||||
|
|
||||||
return (
|
|
||||||
<header className="header" role="banner">
|
|
||||||
<div className="offline-banner hidden">
|
|
||||||
Sie sind offline. Manche Inhalte könnten nicht aktuell sein.
|
|
||||||
<button type="button" className="reload">
|
|
||||||
Neu laden
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
className="l-section main-header navigation-bar"
|
|
||||||
data-js="main-nav-bar"
|
|
||||||
>
|
|
||||||
<div className="navigation-bar__top navigation-bar__top--ghostwhite-light">
|
|
||||||
<div className="l-section__inner">
|
|
||||||
<a
|
|
||||||
href="https://www.scandichotels.de"
|
|
||||||
className="scandic-main-page-link"
|
|
||||||
>
|
|
||||||
Back to scandichotels.de
|
|
||||||
</a>
|
|
||||||
<ul className="nav-secondary navbar-login">
|
|
||||||
<li className="nav-secondary__item hidden-xxsmall hidden-xsmall hidden-small">
|
|
||||||
{links ? (
|
|
||||||
<Desktop currentLanguage={currentLanguage} links={links} />
|
|
||||||
) : null}
|
|
||||||
</li>
|
|
||||||
<li className=" hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
|
|
||||||
<a
|
|
||||||
className="nav-secondary__item__link"
|
|
||||||
href="https://www.scandichotels.de/hotelreservation/get-booking"
|
|
||||||
>
|
|
||||||
Buchung ansehen/ändern
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className=" hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
|
|
||||||
<a
|
|
||||||
className="nav-secondary__item__link"
|
|
||||||
href="https://www.scandichotels.de/karriere-bei-scandic-hotels"
|
|
||||||
>
|
|
||||||
Karriere bei Scandic
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className=" hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
|
|
||||||
<a
|
|
||||||
className="nav-secondary__item__link"
|
|
||||||
href="https://www.scandichotels.de/geschaftsreisen"
|
|
||||||
>
|
|
||||||
Firmenkunden
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className=" hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
|
|
||||||
<a
|
|
||||||
className="nav-secondary__item__link"
|
|
||||||
href="https://www.scandichotels.de/scandic-friends"
|
|
||||||
>
|
|
||||||
Über Scandic Friends
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="navigation-bar__main">
|
|
||||||
<div
|
|
||||||
className="l-section__inner l-section__inner--small-no-padding"
|
|
||||||
itemScope={undefined}
|
|
||||||
itemType="http://schema.org/Organization"
|
|
||||||
>
|
|
||||||
<meta itemProp="name" content="Scandic" />
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="navigation-bar__main__expander"
|
|
||||||
data-js="main-nav-toggler"
|
|
||||||
data-target="#main-menu"
|
|
||||||
aria-pressed="false"
|
|
||||||
>
|
|
||||||
<span className="icon-bars"></span>
|
|
||||||
<span className="hidden--accessible">Menu</span>
|
|
||||||
</button>
|
|
||||||
<a
|
|
||||||
id="scandic-logo"
|
|
||||||
className="navigation-bar__main__logo hidden-medium "
|
|
||||||
href="https://www.scandichotels.de"
|
|
||||||
itemProp="url"
|
|
||||||
>
|
|
||||||
<span className="hidden--accessible">
|
|
||||||
Back to scandichotels.de
|
|
||||||
</span>
|
|
||||||
<img
|
|
||||||
src="/Static/img/scandic-logotype.svg"
|
|
||||||
data-js="scandiclogoimg"
|
|
||||||
alt="Scandic Hotels logo"
|
|
||||||
height="22"
|
|
||||||
data-nosvgsrc="/Static/img/scandic-logotype.png"
|
|
||||||
itemProp="logo"
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
<ul
|
|
||||||
id="navbar-header-design"
|
|
||||||
className="hidden hidden-medium hidden-large nav-primary__header"
|
|
||||||
>
|
|
||||||
<li className="nav-primary__scandicfriendslogo">
|
|
||||||
<img
|
|
||||||
src="/Static/img/icons/scandic-friends/icon-scandic-friends.svg"
|
|
||||||
width="35"
|
|
||||||
height="35"
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<nav>
|
|
||||||
<ul
|
|
||||||
id="main-menu"
|
|
||||||
className="nav-primary is-collapsed"
|
|
||||||
data-collapsable="main-menu"
|
|
||||||
>
|
|
||||||
<li
|
|
||||||
className="nav-primary__item nav-primary__item--primary hidden-large hidden-small hidden-xsmall hidden-xxsmall"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
className="navigation-bar__main__logo"
|
|
||||||
href="https://www.scandichotels.de"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="/Static/img/scandic-logotype.svg"
|
|
||||||
data-js="scandiclogoimg"
|
|
||||||
alt="Scandic Hotels logo"
|
|
||||||
height="22"
|
|
||||||
data-nosvgsrc="/Static/img/scandic-logotype.png"
|
|
||||||
/>
|
|
||||||
<span className="hidden--accessible">
|
|
||||||
Back to scandichotels.de
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="nav-primary__item nav-primary__item--primary ">
|
|
||||||
<a href="https://www.scandichotels.de/hotelsuche">
|
|
||||||
Hotels & Reiseziele
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="nav-primary__item nav-primary__item--primary ">
|
|
||||||
<a href="https://www.scandichotels.de/reisemagazin">
|
|
||||||
Reisemagazin
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="nav-primary__item nav-primary__item--primary ">
|
|
||||||
<a href="https://www.scandichotels.de/tagungen-und-events">
|
|
||||||
Tagungen & Events
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="nav-primary__item nav-primary__item--primary ">
|
|
||||||
<a href="https://www.scandichotels.de/scandic-entdecken">
|
|
||||||
Scandic entdecken
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="nav-primary__item nav-primary__item--primary ">
|
|
||||||
<a href="https://www.scandichotels.de/angebote-arrangements">
|
|
||||||
Angebote
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="nav-primary__item nav-primary__item--secondary hidden-medium hidden-large ">
|
|
||||||
<a href="https://www.scandichotels.de/scandic-friends">
|
|
||||||
Über Scandic Friends
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="nav-primary__item nav-primary__item--secondary hidden-medium hidden-large ">
|
|
||||||
<a href="https://www.scandichotels.de/geschaftsreisen">
|
|
||||||
Geschäftsreisen
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="nav-primary__item hidden-medium hidden-large">
|
|
||||||
{links ? (
|
|
||||||
<Mobile currentLanguage={currentLanguage} links={links} />
|
|
||||||
) : null}
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,196 +0,0 @@
|
|||||||
/* eslint-disable @next/next/no-img-element */
|
|
||||||
import {
|
|
||||||
currentAboutLinks,
|
|
||||||
currentSponsoringLinks,
|
|
||||||
currentWifiLinks,
|
|
||||||
} from "@/constants/current/links"
|
|
||||||
|
|
||||||
import Desktop from "./LanguageSwitcher/Desktop"
|
|
||||||
import Mobile from "./LanguageSwitcher/Mobile"
|
|
||||||
|
|
||||||
import type { LanguageSwitcherLink } from "@/types/components/current/languageSwitcher"
|
|
||||||
import type { HeaderProps } from "@/types/components/current/header"
|
|
||||||
|
|
||||||
const paths: Record<string, LanguageSwitcherLink[]> = {
|
|
||||||
"/customer-service/frequently-asked-questions/using-the-website":
|
|
||||||
currentAboutLinks,
|
|
||||||
"/explore-scandic/wifi": currentWifiLinks,
|
|
||||||
"/sponsoring": currentSponsoringLinks,
|
|
||||||
}
|
|
||||||
|
|
||||||
const currentLanguage = "English"
|
|
||||||
|
|
||||||
export default function EnHeader({ pathname }: HeaderProps) {
|
|
||||||
const links = paths?.[pathname] ?? null
|
|
||||||
return (
|
|
||||||
<header className="header" role="banner">
|
|
||||||
<div className="offline-banner hidden">
|
|
||||||
You are offline, some content may be out of date.
|
|
||||||
<button type="button" className="reload">
|
|
||||||
Reload
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="l-section main-header navigation-bar"
|
|
||||||
data-js="main-nav-bar"
|
|
||||||
>
|
|
||||||
<div className="navigation-bar__top navigation-bar__top--ghostwhite-light">
|
|
||||||
<div className="l-section__inner">
|
|
||||||
<a
|
|
||||||
href="https://www.scandichotels.com"
|
|
||||||
className="scandic-main-page-link"
|
|
||||||
>
|
|
||||||
Back to scandichotels.com
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<ul className="nav-secondary navbar-login">
|
|
||||||
<li className="nav-secondary__item hidden-xxsmall hidden-xsmall hidden-small">
|
|
||||||
{links ? (
|
|
||||||
<Desktop currentLanguage={currentLanguage} links={links} />
|
|
||||||
) : null}
|
|
||||||
</li>
|
|
||||||
<li className=" hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
|
|
||||||
<a
|
|
||||||
className="nav-secondary__item__link"
|
|
||||||
href="/hotelreservation/get-booking"
|
|
||||||
>
|
|
||||||
View/Cancel booking
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className=" hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
|
|
||||||
<a className="nav-secondary__item__link" href="/work-with-us">
|
|
||||||
Work with us
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className=" hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
|
|
||||||
<a
|
|
||||||
className="nav-secondary__item__link"
|
|
||||||
href="/corporate-travel"
|
|
||||||
>
|
|
||||||
Corporate Travel
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className=" hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
|
|
||||||
<a
|
|
||||||
className="nav-secondary__item__link"
|
|
||||||
href="/scandic-friends"
|
|
||||||
>
|
|
||||||
About Scandic Friends
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="navigation-bar__main">
|
|
||||||
<div
|
|
||||||
className="l-section__inner l-section__inner--small-no-padding"
|
|
||||||
itemScope
|
|
||||||
itemType="http://schema.org/Organization"
|
|
||||||
>
|
|
||||||
<meta itemProp="name" content="Scandic" />
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="navigation-bar__main__expander"
|
|
||||||
data-js="main-nav-toggler"
|
|
||||||
data-target="#main-menu"
|
|
||||||
aria-pressed="false"
|
|
||||||
>
|
|
||||||
<span className="icon-bars"></span>
|
|
||||||
<span className="hidden--accessible">Menu</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<a
|
|
||||||
id="scandic-logo"
|
|
||||||
className="navigation-bar__main__logo hidden-medium "
|
|
||||||
href="https://www.scandichotels.com"
|
|
||||||
itemProp="url"
|
|
||||||
>
|
|
||||||
<span className="hidden--accessible">
|
|
||||||
Back to scandichotels.com
|
|
||||||
</span>
|
|
||||||
<img
|
|
||||||
src="/Static/img/scandic-logotype.svg"
|
|
||||||
data-js="scandiclogoimg"
|
|
||||||
alt="Scandic Hotels logo"
|
|
||||||
height="22"
|
|
||||||
data-nosvgsrc="/Static/img/scandic-logotype.png"
|
|
||||||
itemProp="logo"
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<nav>
|
|
||||||
<ul
|
|
||||||
id="main-menu"
|
|
||||||
className="nav-primary is-collapsed"
|
|
||||||
data-collapsable="main-menu"
|
|
||||||
>
|
|
||||||
<li
|
|
||||||
className="nav-primary__item nav-primary__item--primary hidden-large hidden-small hidden-xsmall hidden-xxsmall"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
className="navigation-bar__main__logo"
|
|
||||||
href="https://www.scandichotels.com"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="/Static/img/scandic-logotype.svg"
|
|
||||||
data-js="scandiclogoimg"
|
|
||||||
alt="Scandic Hotels logo"
|
|
||||||
height="22"
|
|
||||||
data-nosvgsrc="/Static/img/scandic-logotype.png"
|
|
||||||
/>
|
|
||||||
<span className="hidden--accessible">
|
|
||||||
Back to scandichotels.com
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="nav-primary__item nav-primary__item--primary ">
|
|
||||||
<a href="https://www.scandichotels.com/hotels">
|
|
||||||
Hotels & Destinations
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="nav-primary__item nav-primary__item--primary ">
|
|
||||||
<a href="https://www.scandichotels.com/travel-guides">
|
|
||||||
Travel guides
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="nav-primary__item nav-primary__item--primary ">
|
|
||||||
<a href="https://www.scandichotels.com/conferences-meetings">
|
|
||||||
Conferences & Meetings
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="nav-primary__item nav-primary__item--primary ">
|
|
||||||
<a href="https://www.scandichotels.com/explore-scandic">
|
|
||||||
Explore Scandic
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="nav-primary__item nav-primary__item--primary ">
|
|
||||||
<a href="https://www.scandichotels.com/weekend-packages-and-offers">
|
|
||||||
Offers
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li className="nav-primary__item nav-primary__item--secondary hidden-medium hidden-large ">
|
|
||||||
<a href="https://www.scandichotels.com/scandic-friends">
|
|
||||||
About Scandic Friends
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="nav-primary__item nav-primary__item--secondary hidden-medium hidden-large ">
|
|
||||||
<a href="https://www.scandichotels.com/corporate-travel">
|
|
||||||
Corporate Travel
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li className="nav-primary__item hidden-medium hidden-large">
|
|
||||||
{links ? (
|
|
||||||
<Mobile currentLanguage={currentLanguage} links={links} />
|
|
||||||
) : null}
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,198 +0,0 @@
|
|||||||
/* eslint-disable @next/next/no-img-element */
|
|
||||||
import {
|
|
||||||
currentAboutLinks,
|
|
||||||
currentSponsoringLinks,
|
|
||||||
currentWifiLinks,
|
|
||||||
} from "@/constants/current/links"
|
|
||||||
|
|
||||||
import Desktop from "./LanguageSwitcher/Desktop"
|
|
||||||
import Mobile from "./LanguageSwitcher/Mobile"
|
|
||||||
|
|
||||||
import type { LanguageSwitcherLink } from "@/types/components/current/languageSwitcher"
|
|
||||||
import type { HeaderProps } from "@/types/components/current/header"
|
|
||||||
|
|
||||||
const paths: Record<string, LanguageSwitcherLink[]> = {
|
|
||||||
"/asiakaspalvelu/usein-kysytyt-kysymykset/tietoja-internetsivuista":
|
|
||||||
currentAboutLinks,
|
|
||||||
"/koe-scandic/maksuton-internetyhteys": currentSponsoringLinks,
|
|
||||||
"/scandic-entdecken/wlan": currentWifiLinks,
|
|
||||||
}
|
|
||||||
|
|
||||||
const currentLanguage = "Suomi"
|
|
||||||
|
|
||||||
export default function FiHeader({ pathname }: HeaderProps) {
|
|
||||||
const links = paths?.[pathname] ?? null
|
|
||||||
return (
|
|
||||||
<header className="header" role="banner">
|
|
||||||
<div className="offline-banner hidden">
|
|
||||||
Ei yhteyttä verkkoon. Osa sisällöstä saattaa olla vanhentunut.
|
|
||||||
<button type="button" className="reload">
|
|
||||||
Lataa uudelleen
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="l-section main-header navigation-bar"
|
|
||||||
data-js="main-nav-bar"
|
|
||||||
>
|
|
||||||
<div className="navigation-bar__top navigation-bar__top--ghostwhite-light">
|
|
||||||
<div className="l-section__inner">
|
|
||||||
<a
|
|
||||||
href="https://www.scandichotels.fi"
|
|
||||||
className="scandic-main-page-link"
|
|
||||||
>
|
|
||||||
Back to scandichotels.fi
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<ul className="nav-secondary navbar-login">
|
|
||||||
<li className="nav-secondary__item hidden-xxsmall hidden-xsmall hidden-small">
|
|
||||||
{links ? (
|
|
||||||
<Desktop currentLanguage={currentLanguage} links={links} />
|
|
||||||
) : null}
|
|
||||||
</li>
|
|
||||||
<li className=" hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
|
|
||||||
<a
|
|
||||||
className="nav-secondary__item__link"
|
|
||||||
href="https://www.scandichotels.fi/varaa-hotelli/hae-varaus"
|
|
||||||
>
|
|
||||||
Varaukseni
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className=" hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
|
|
||||||
<a
|
|
||||||
className="nav-secondary__item__link"
|
|
||||||
href="https://www.scandichotels.fi/tyo/avoimet-tyopaikat"
|
|
||||||
>
|
|
||||||
Työpaikat
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className=" hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
|
|
||||||
<a
|
|
||||||
className="nav-secondary__item__link"
|
|
||||||
href="https://www.scandichotels.fi/yrityksille"
|
|
||||||
>
|
|
||||||
Yrityksille
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className=" hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
|
|
||||||
<a
|
|
||||||
className="nav-secondary__item__link"
|
|
||||||
href="https://www.scandichotels.fi/scandic-friends"
|
|
||||||
>
|
|
||||||
Scandic Friends
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="navigation-bar__main">
|
|
||||||
<div
|
|
||||||
className="l-section__inner l-section__inner--small-no-padding"
|
|
||||||
itemScope
|
|
||||||
itemType="http://schema.org/Organization"
|
|
||||||
>
|
|
||||||
<meta itemProp="name" content="Scandic" />
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="navigation-bar__main__expander"
|
|
||||||
data-js="main-nav-toggler"
|
|
||||||
data-target="#main-menu"
|
|
||||||
aria-pressed="false"
|
|
||||||
>
|
|
||||||
<span className="icon-bars"></span>
|
|
||||||
<span className="hidden--accessible">Menu</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<a
|
|
||||||
id="scandic-logo"
|
|
||||||
className="navigation-bar__main__logo hidden-medium "
|
|
||||||
href="https://www.scandichotels.fi"
|
|
||||||
itemProp="url"
|
|
||||||
>
|
|
||||||
<span className="hidden--accessible">
|
|
||||||
Back to scandichotels.fi
|
|
||||||
</span>
|
|
||||||
<img
|
|
||||||
src="/Static/img/scandic-logotype.svg"
|
|
||||||
data-js="scandiclogoimg"
|
|
||||||
alt="Scandic Hotels logo"
|
|
||||||
height="22"
|
|
||||||
data-nosvgsrc="/Static/img/scandic-logotype.png"
|
|
||||||
itemProp="logo"
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
<nav>
|
|
||||||
<ul
|
|
||||||
id="main-menu"
|
|
||||||
className="nav-primary is-collapsed"
|
|
||||||
data-collapsable="main-menu"
|
|
||||||
>
|
|
||||||
<li
|
|
||||||
className="nav-primary__item nav-primary__item--primary hidden-large hidden-small hidden-xsmall hidden-xxsmall"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
className="navigation-bar__main__logo"
|
|
||||||
href="https://www.scandichotels.fi"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="/Static/img/scandic-logotype.svg"
|
|
||||||
data-js="scandiclogoimg"
|
|
||||||
alt="Scandic Hotels logo"
|
|
||||||
height="22"
|
|
||||||
data-nosvgsrc="/Static/img/scandic-logotype.png"
|
|
||||||
/>
|
|
||||||
<span className="hidden--accessible">
|
|
||||||
Back to scandichotels.fi
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="nav-primary__item nav-primary__item--primary ">
|
|
||||||
<a href="https://www.scandichotels.fi/hotellit">
|
|
||||||
Hotellit ja kohteet
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="nav-primary__item nav-primary__item--primary ">
|
|
||||||
<a href="https://www.scandichotels.fi/matkavinkit">
|
|
||||||
Matkavinkit
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="nav-primary__item nav-primary__item--primary ">
|
|
||||||
<a href="https://www.scandichotels.fi/kokoukset-ja-juhlatilat">
|
|
||||||
Kokoukset ja juhlatilat
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="nav-primary__item nav-primary__item--primary ">
|
|
||||||
<a href="https://www.scandichotels.fi/koe-scandic">
|
|
||||||
Koe Scandic
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="nav-primary__item nav-primary__item--primary ">
|
|
||||||
<a href="https://www.scandichotels.fi/tarjoukset">
|
|
||||||
Tarjoukset
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li className="nav-primary__item nav-primary__item--secondary hidden-medium hidden-large ">
|
|
||||||
<a href="https://www.scandichotels.fi/scandic-friends">
|
|
||||||
Scandic Friends
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="nav-primary__item nav-primary__item--secondary hidden-medium hidden-large ">
|
|
||||||
<a href="https://www.scandichotels.fi/yrityksille">
|
|
||||||
Yrityksille
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li className="nav-primary__item hidden-medium hidden-large">
|
|
||||||
{links ? (
|
|
||||||
<Mobile currentLanguage={currentLanguage} links={links} />
|
|
||||||
) : null}
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,37 +0,0 @@
|
|||||||
import type { LanguageSwitcherProps } from "@/types/components/current/languageSwitcher"
|
|
||||||
|
|
||||||
export default function Desktop({
|
|
||||||
currentLanguage,
|
|
||||||
links,
|
|
||||||
}: LanguageSwitcherProps) {
|
|
||||||
return (
|
|
||||||
<div className="dropdown-container navbar-language-selector ">
|
|
||||||
<button
|
|
||||||
className="navbar-language-selector__toggler"
|
|
||||||
data-js="dropdown-toggler"
|
|
||||||
aria-pressed="false"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
focusable="false"
|
|
||||||
className="icon icon--xs icon--white"
|
|
||||||
viewBox="0 0 32 32"
|
|
||||||
>
|
|
||||||
<use xlinkHref="/Static/img/icons/sprites.svg#icon-globe"></use>
|
|
||||||
</svg>
|
|
||||||
{currentLanguage}
|
|
||||||
<span className="hidden--accessible">Choose language</span>
|
|
||||||
<span className="caret"></span>
|
|
||||||
</button>
|
|
||||||
<ul className="dropdown-menu">
|
|
||||||
{links.map((link) => (
|
|
||||||
<li
|
|
||||||
className={currentLanguage === link.title ? "active" : undefined}
|
|
||||||
key={link.href}
|
|
||||||
>
|
|
||||||
<a href={link.href}>{link.title}</a>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,45 @@
|
|||||||
|
.dropdown {
|
||||||
|
background-clip: padding-box;
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1px solid rgba(0, 0, 0, .15);
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
|
||||||
|
display: none;
|
||||||
|
float: left;
|
||||||
|
font-size: 1rem;
|
||||||
|
left: 0;
|
||||||
|
list-style: none;
|
||||||
|
margin: 2px 0 0;
|
||||||
|
min-width: 160px;
|
||||||
|
padding: 5px 0;
|
||||||
|
position: absolute;
|
||||||
|
text-align: left;
|
||||||
|
top: 100%;
|
||||||
|
z-index: 11;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown.isOpen {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link {
|
||||||
|
clear: both;
|
||||||
|
color: grey;
|
||||||
|
display: block;
|
||||||
|
font-weight: 400;
|
||||||
|
padding: 3px 20px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link:hover {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
color: #737373;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active>.link {
|
||||||
|
background-color: #00838e;
|
||||||
|
color: #fff;
|
||||||
|
outline: 0;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
82
components/Current/Header/LanguageSwitcher/Desktop/index.tsx
Normal file
82
components/Current/Header/LanguageSwitcher/Desktop/index.tsx
Normal file
@@ -0,0 +1,82 @@
|
|||||||
|
"use client"
|
||||||
|
import { useEffect, useRef, useState } from "react"
|
||||||
|
|
||||||
|
import { languages } from "@/constants/languages"
|
||||||
|
|
||||||
|
import styles from "./desktop.module.css"
|
||||||
|
|
||||||
|
import type { LanguageSwitcherProps } from "@/types/components/current/languageSwitcher"
|
||||||
|
|
||||||
|
export default function Desktop({
|
||||||
|
currentLanguage,
|
||||||
|
urls,
|
||||||
|
}: LanguageSwitcherProps) {
|
||||||
|
const [isOpen, setIsOpen] = useState(false)
|
||||||
|
const divRef = useRef<HTMLDivElement>(null)
|
||||||
|
|
||||||
|
function toggleOpen() {
|
||||||
|
setIsOpen(prevIsOpen => !prevIsOpen)
|
||||||
|
}
|
||||||
|
|
||||||
|
function close() {
|
||||||
|
setIsOpen(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
function handleClickOutside(evt: Event) {
|
||||||
|
const target = evt.target as HTMLElement
|
||||||
|
if (divRef.current && target && !divRef.current.contains(target)) {
|
||||||
|
close()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (divRef.current) {
|
||||||
|
document.addEventListener('click', handleClickOutside, false)
|
||||||
|
}
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener('click', handleClickOutside, false)
|
||||||
|
}
|
||||||
|
}, [close])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="dropdown-container navbar-language-selector " ref={divRef}>
|
||||||
|
<button
|
||||||
|
aria-pressed="false"
|
||||||
|
className="navbar-language-selector__toggler"
|
||||||
|
data-js="dropdown-toggler"
|
||||||
|
onClick={toggleOpen}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
focusable="false"
|
||||||
|
className="icon icon--xs icon--white"
|
||||||
|
viewBox="0 0 32 32"
|
||||||
|
>
|
||||||
|
<use xlinkHref="/Static/img/icons/sprites.svg#icon-globe"></use>
|
||||||
|
</svg>
|
||||||
|
{currentLanguage}
|
||||||
|
<span className="hidden--accessible">Choose language</span>
|
||||||
|
<span className="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul className={`${styles.dropdown} ${isOpen ? styles.isOpen : ""}`}>
|
||||||
|
<li className={currentLanguage === languages.en ? styles.active : undefined}>
|
||||||
|
<a className={styles.link} href={urls.en?.url}>{languages.en}</a>
|
||||||
|
</li>
|
||||||
|
<li className={currentLanguage === languages.sv ? styles.active : undefined}>
|
||||||
|
<a className={styles.link} href={urls.sv?.url}>{languages.sv}</a>
|
||||||
|
</li>
|
||||||
|
<li className={currentLanguage === languages.no ? styles.active : undefined}>
|
||||||
|
<a className={styles.link} href={urls.no?.url}>{languages.no}</a>
|
||||||
|
</li>
|
||||||
|
<li className={currentLanguage === languages.da ? styles.active : undefined}>
|
||||||
|
<a className={styles.link} href="https://www.scandichotels.dk/">{languages.da}</a>
|
||||||
|
</li>
|
||||||
|
<li className={currentLanguage === languages.fi ? styles.active : undefined}>
|
||||||
|
<a className={styles.link} href={urls.fi?.url}>{languages.fi}</a>
|
||||||
|
</li>
|
||||||
|
<li className={currentLanguage === languages.de ? styles.active : undefined}>
|
||||||
|
<a className={styles.link} href={urls.de?.url}>{languages.de}</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -1,31 +0,0 @@
|
|||||||
import type { LanguageSwitcherProps } from "@/types/components/current/languageSwitcher"
|
|
||||||
|
|
||||||
export default function Mobile({
|
|
||||||
currentLanguage,
|
|
||||||
links,
|
|
||||||
}: LanguageSwitcherProps) {
|
|
||||||
return (
|
|
||||||
<div className="navbar-language-selector">
|
|
||||||
<button
|
|
||||||
className="navbar-language-selector__toggler "
|
|
||||||
data-js="collapsible-toggler"
|
|
||||||
data-target="language-menu"
|
|
||||||
aria-pressed="false"
|
|
||||||
>
|
|
||||||
{currentLanguage}{" "}
|
|
||||||
<span className="navbar-language-selector__toggler__arrow"></span>
|
|
||||||
<span className="hidden--accessible">Choose language</span>
|
|
||||||
</button>
|
|
||||||
<ul className="is-collapsed" data-collapsable="language-menu">
|
|
||||||
{links.map((link) => (
|
|
||||||
<li
|
|
||||||
className={`navbar-language-selector__item ${currentLanguage === link.title ? "is-active" : ""}`}
|
|
||||||
key={link.href}
|
|
||||||
>
|
|
||||||
<a href={link.href}>{link.title}</a>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
55
components/Current/Header/LanguageSwitcher/Mobile/index.tsx
Normal file
55
components/Current/Header/LanguageSwitcher/Mobile/index.tsx
Normal file
@@ -0,0 +1,55 @@
|
|||||||
|
"use client"
|
||||||
|
import { useState } from "react"
|
||||||
|
|
||||||
|
import { languages } from "@/constants/languages"
|
||||||
|
|
||||||
|
import styles from "./mobile.module.css"
|
||||||
|
|
||||||
|
import type { LanguageSwitcherProps } from "@/types/components/current/languageSwitcher"
|
||||||
|
|
||||||
|
export default function Mobile({
|
||||||
|
currentLanguage,
|
||||||
|
urls,
|
||||||
|
}: LanguageSwitcherProps) {
|
||||||
|
const [isOpen, setIsOpen] = useState(false)
|
||||||
|
|
||||||
|
function toggleOpen() {
|
||||||
|
setIsOpen(prevIsOpen => !prevIsOpen)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="navbar-language-selector">
|
||||||
|
<button
|
||||||
|
aria-pressed="false"
|
||||||
|
className="navbar-language-selector__toggler "
|
||||||
|
data-js="collapsible-toggler"
|
||||||
|
data-target="language-menu"
|
||||||
|
onClick={toggleOpen}
|
||||||
|
>
|
||||||
|
{currentLanguage}{" "}
|
||||||
|
<span className={`${styles.arrow} ${isOpen ? styles.open : ""}`}></span>
|
||||||
|
<span className="hidden--accessible">Choose language</span>
|
||||||
|
</button>
|
||||||
|
<ul className={`${styles.dropdown} ${isOpen ? styles.isOpen : ""}`} data-collapsable="language-menu">
|
||||||
|
<li className={`navbar-language-selector__item ${currentLanguage === languages.en ? "is-active" : ""}`}>
|
||||||
|
<a href={urls.en?.url}>{languages.en}</a>
|
||||||
|
</li>
|
||||||
|
<li className={`navbar-language-selector__item ${currentLanguage === languages.sv ? "is-active" : ""}`}>
|
||||||
|
<a href={urls.sv?.url}>{languages.sv}</a>
|
||||||
|
</li>
|
||||||
|
<li className={`navbar-language-selector__item ${currentLanguage === languages.no ? "is-active" : ""}`}>
|
||||||
|
<a href={urls.no?.url}>{languages.no}</a>
|
||||||
|
</li>
|
||||||
|
<li className={`navbar-language-selector__item ${currentLanguage === languages.da ? "is-active" : ""}`}>
|
||||||
|
<a href="https://www.scandichotels.dk/">{languages.da}</a>
|
||||||
|
</li>
|
||||||
|
<li className={`navbar-language-selector__item ${currentLanguage === languages.fi ? "is-active" : ""}`}>
|
||||||
|
<a href={urls.fi?.url}>{languages.fi}</a>
|
||||||
|
</li>
|
||||||
|
<li className={`navbar-language-selector__item ${currentLanguage === languages.de ? "is-active" : ""}`}>
|
||||||
|
<a href={urls.de?.url}>{languages.de}</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
.dropdown {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown.isOpen {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
background-image: url("/Static/img/icons/arrows/arrow-down-grey.png");
|
||||||
|
background-position: 50%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 5px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow.open {
|
||||||
|
background-image: url("/Static/img/icons/arrows/arrow-up-grey.png");
|
||||||
|
}
|
||||||
|
|
||||||
|
.link {
|
||||||
|
color: grey;
|
||||||
|
display: block;
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link:hover {
|
||||||
|
color: #7f7369;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
@@ -2,17 +2,21 @@
|
|||||||
import { useState } from "react"
|
import { useState } from "react"
|
||||||
|
|
||||||
import Image from "@/components/Image"
|
import Image from "@/components/Image"
|
||||||
// import Mobile from "../LanguageSwitcher/Mobile"
|
import Mobile from "../LanguageSwitcher/Mobile"
|
||||||
|
|
||||||
import styles from "./mainMenu.module.css"
|
import styles from "./mainMenu.module.css"
|
||||||
|
|
||||||
import type { MainMenuProps } from "@/types/components/current/header/mainMenu"
|
import type { MainMenuProps } from "@/types/components/current/header/mainMenu"
|
||||||
|
|
||||||
/**
|
export default function MainMenu({
|
||||||
* Mobile is commented out as it relates to
|
currentLanguage,
|
||||||
* LanguageSwitcher and will be handled in another task
|
frontpageLinkText,
|
||||||
*/
|
homeHref,
|
||||||
export default function MainMenu({ frontpageLinkText, homeHref, links, logo, topMenuMobileLinks }: MainMenuProps) {
|
links,
|
||||||
|
logo,
|
||||||
|
topMenuMobileLinks,
|
||||||
|
urls,
|
||||||
|
}: MainMenuProps) {
|
||||||
const [isOpen, setIsOpen] = useState(false)
|
const [isOpen, setIsOpen] = useState(false)
|
||||||
|
|
||||||
function toogleIsOpen() {
|
function toogleIsOpen() {
|
||||||
@@ -90,9 +94,11 @@ export default function MainMenu({ frontpageLinkText, homeHref, links, logo, top
|
|||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
{/* <li className="nav-primary__item hidden-medium hidden-large">
|
{urls ? (
|
||||||
{links ? <Mobile currentLanguage={currentLanguage} links={links} /> : null}
|
<li className="nav-primary__item hidden-medium hidden-large">
|
||||||
</li> */}
|
<Mobile currentLanguage={currentLanguage} urls={urls} />
|
||||||
|
</li>
|
||||||
|
) : null}
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -167,6 +167,7 @@
|
|||||||
.mainMenu {
|
.mainMenu {
|
||||||
background-color: hsla(0, 0%, 100%, .95);
|
background-color: hsla(0, 0%, 100%, .95);
|
||||||
position: relative;
|
position: relative;
|
||||||
|
z-index: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
|
|||||||
@@ -1,203 +0,0 @@
|
|||||||
import {
|
|
||||||
currentAboutLinks,
|
|
||||||
currentSponsoringLinks,
|
|
||||||
currentWifiLinks,
|
|
||||||
} from "@/constants/current/links"
|
|
||||||
|
|
||||||
import Desktop from "./LanguageSwitcher/Desktop"
|
|
||||||
import Mobile from "./LanguageSwitcher/Mobile"
|
|
||||||
|
|
||||||
import type { LanguageSwitcherLink } from "@/types/components/current/languageSwitcher"
|
|
||||||
import type { HeaderProps } from "@/types/components/current/header"
|
|
||||||
|
|
||||||
const paths: Record<string, LanguageSwitcherLink[]> = {
|
|
||||||
"/kundeservice/sporsmal-og-svar/bruk-av-nettsiden": currentAboutLinks,
|
|
||||||
"/utforsk-scandic/wifi": currentWifiLinks,
|
|
||||||
"/vi-sponser": currentSponsoringLinks,
|
|
||||||
}
|
|
||||||
|
|
||||||
const currentLanguage = "Norsk"
|
|
||||||
|
|
||||||
export default function NoHeader({ pathname }: HeaderProps) {
|
|
||||||
const links = paths?.[pathname] ?? null
|
|
||||||
|
|
||||||
return (
|
|
||||||
<header className="header" role="banner">
|
|
||||||
<div className="offline-banner hidden">
|
|
||||||
Du er offline. Noe innhold kan være utdatert.
|
|
||||||
<button type="button" className="reload">
|
|
||||||
Last inn på nytt
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="l-section main-header navigation-bar"
|
|
||||||
data-js="main-nav-bar"
|
|
||||||
>
|
|
||||||
<div className="navigation-bar__top navigation-bar__top--ghostwhite-light">
|
|
||||||
<div className="l-section__inner">
|
|
||||||
<a
|
|
||||||
href="https://www.scandichotels.no"
|
|
||||||
className="scandic-main-page-link"
|
|
||||||
>
|
|
||||||
Tilbake til scandichotels.no
|
|
||||||
</a>
|
|
||||||
<ul className="nav-secondary navbar-login">
|
|
||||||
<li className="nav-secondary__item hidden-xxsmall hidden-xsmall hidden-small">
|
|
||||||
{links ? (
|
|
||||||
<Desktop currentLanguage={currentLanguage} links={links} />
|
|
||||||
) : null}
|
|
||||||
</li>
|
|
||||||
<li className=" hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
|
|
||||||
<a
|
|
||||||
className="nav-secondary__item__link"
|
|
||||||
href="https://www.scandichotels.no/hotelreservation/get-booking"
|
|
||||||
>
|
|
||||||
Vis/Avbestill din booking
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className=" hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
|
|
||||||
<a
|
|
||||||
className="nav-secondary__item__link"
|
|
||||||
href="https://www.scandichotels.no/jobb-hos-oss/ledige-stillinger"
|
|
||||||
>
|
|
||||||
Jobb hos oss
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className=" hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
|
|
||||||
<a
|
|
||||||
className="nav-secondary__item__link"
|
|
||||||
href="https://www.scandichotels.no/for-bedrifter"
|
|
||||||
>
|
|
||||||
For bedrifter
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className=" hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
|
|
||||||
<a
|
|
||||||
className="nav-secondary__item__link"
|
|
||||||
href="https://www.scandichotels.no/scandic-friends"
|
|
||||||
>
|
|
||||||
Om Scandic Friends
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="navigation-bar__main">
|
|
||||||
<div
|
|
||||||
className="l-section__inner l-section__inner--small-no-padding"
|
|
||||||
itemScope={undefined}
|
|
||||||
itemType="http://schema.org/Organization"
|
|
||||||
>
|
|
||||||
<meta itemProp="name" content="Scandic" />
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="navigation-bar__main__expander"
|
|
||||||
data-js="main-nav-toggler"
|
|
||||||
data-target="#main-menu"
|
|
||||||
aria-pressed="false"
|
|
||||||
>
|
|
||||||
<span className="icon-bars"></span>
|
|
||||||
<span className="hidden--accessible">Menu</span>
|
|
||||||
</button>
|
|
||||||
<a
|
|
||||||
id="scandic-logo"
|
|
||||||
className="navigation-bar__main__logo hidden-medium "
|
|
||||||
href="https://www.scandichotels.no"
|
|
||||||
itemProp="url"
|
|
||||||
>
|
|
||||||
<span className="hidden--accessible">
|
|
||||||
Tilbake til scandichotels.no
|
|
||||||
</span>
|
|
||||||
<img
|
|
||||||
src="/Static/img/scandic-logotype.svg"
|
|
||||||
data-js="scandiclogoimg"
|
|
||||||
alt="Scandic Hotels logo"
|
|
||||||
height="22"
|
|
||||||
data-nosvgsrc="/Static/img/scandic-logotype.png"
|
|
||||||
itemProp="logo"
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
<ul
|
|
||||||
id="navbar-header-design"
|
|
||||||
className="hidden hidden-medium hidden-large nav-primary__header"
|
|
||||||
>
|
|
||||||
<li className="nav-primary__scandicfriendslogo">
|
|
||||||
<img
|
|
||||||
src="/Static/img/icons/scandic-friends/icon-scandic-friends.svg"
|
|
||||||
width="35"
|
|
||||||
height="35"
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<nav>
|
|
||||||
<ul
|
|
||||||
id="main-menu"
|
|
||||||
className="nav-primary is-collapsed"
|
|
||||||
data-collapsable="main-menu"
|
|
||||||
>
|
|
||||||
<li
|
|
||||||
className="nav-primary__item nav-primary__item--primary hidden-large hidden-small hidden-xsmall hidden-xxsmall"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
className="navigation-bar__main__logo"
|
|
||||||
href="https://www.scandichotels.no"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="/Static/img/scandic-logotype.svg"
|
|
||||||
data-js="scandiclogoimg"
|
|
||||||
alt="Scandic Hotels logo"
|
|
||||||
height="22"
|
|
||||||
data-nosvgsrc="/Static/img/scandic-logotype.png"
|
|
||||||
/>
|
|
||||||
<span className="hidden--accessible">
|
|
||||||
Tilbake til scandichotels.no
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="nav-primary__item nav-primary__item--primary ">
|
|
||||||
<a href="https://www.scandichotels.no/hotell">
|
|
||||||
Hoteller og destinasjoner
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="nav-primary__item nav-primary__item--primary ">
|
|
||||||
<a href="https://www.scandichotels.no/reiseguider">
|
|
||||||
Reiseguider
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="nav-primary__item nav-primary__item--primary ">
|
|
||||||
<a href="https://www.scandichotels.no/moter-og-konferanser">
|
|
||||||
Møter og konferanser
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="nav-primary__item nav-primary__item--primary ">
|
|
||||||
<a href="https://www.scandichotels.no/utforsk-scandic">
|
|
||||||
Utforsk Scandic
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="nav-primary__item nav-primary__item--primary ">
|
|
||||||
<a href="https://www.scandichotels.no/hotelltilbud">Tilbud</a>
|
|
||||||
</li>
|
|
||||||
<li className="nav-primary__item nav-primary__item--secondary hidden-medium hidden-large ">
|
|
||||||
<a href="https://www.scandichotels.no/scandic-friends">
|
|
||||||
Om Scandic Friends
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="nav-primary__item nav-primary__item--secondary hidden-medium hidden-large ">
|
|
||||||
<a href="https://www.scandichotels.no/for-bedrifter">
|
|
||||||
For bedrifter
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="nav-primary__item hidden-medium hidden-large">
|
|
||||||
{links ? (
|
|
||||||
<Mobile currentLanguage={currentLanguage} links={links} />
|
|
||||||
) : null}
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,198 +0,0 @@
|
|||||||
/* eslint-disable @next/next/no-img-element */
|
|
||||||
import {
|
|
||||||
currentAboutLinks,
|
|
||||||
currentSponsoringLinks,
|
|
||||||
currentWifiLinks,
|
|
||||||
} from "@/constants/current/links"
|
|
||||||
|
|
||||||
import Desktop from "./LanguageSwitcher/Desktop"
|
|
||||||
import Mobile from "./LanguageSwitcher/Mobile"
|
|
||||||
|
|
||||||
import type { LanguageSwitcherLink } from "@/types/components/current/languageSwitcher"
|
|
||||||
import type { HeaderProps } from "@/types/components/current/header"
|
|
||||||
|
|
||||||
const paths: Record<string, LanguageSwitcherLink[]> = {
|
|
||||||
"/kundservice/fragor-och-svar/om-scandics-webbplats": currentAboutLinks,
|
|
||||||
"/utforska-scandic/wi-fi": currentWifiLinks,
|
|
||||||
"/vi-sponsrar": currentSponsoringLinks,
|
|
||||||
}
|
|
||||||
|
|
||||||
const currentLanguage = "Svenska"
|
|
||||||
|
|
||||||
export default function SvHeader({ pathname }: HeaderProps) {
|
|
||||||
const links = paths?.[pathname] ?? null
|
|
||||||
return (
|
|
||||||
<header className="header" role="banner">
|
|
||||||
<div className="offline-banner hidden">
|
|
||||||
Du är offline. Sidan kan visa gammalt innehåll.
|
|
||||||
<button type="button" className="reload">
|
|
||||||
Ladda om
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="l-section main-header navigation-bar"
|
|
||||||
data-js="main-nav-bar"
|
|
||||||
>
|
|
||||||
<div className="navigation-bar__top navigation-bar__top--ghostwhite-light">
|
|
||||||
<div className="l-section__inner">
|
|
||||||
<a
|
|
||||||
href="https://www.scandichotels.se"
|
|
||||||
className="scandic-main-page-link"
|
|
||||||
>
|
|
||||||
Tillbaka till scandichotels.se
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<ul className="nav-secondary navbar-login">
|
|
||||||
<li className="nav-secondary__item hidden-xxsmall hidden-xsmall hidden-small">
|
|
||||||
{links ? (
|
|
||||||
<Desktop currentLanguage={currentLanguage} links={links} />
|
|
||||||
) : null}
|
|
||||||
</li>
|
|
||||||
<li className="hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
|
|
||||||
<a
|
|
||||||
className="nav-secondary__item__link"
|
|
||||||
href="https://www.scandichotels.se/hotelreservation/hitta-bokning"
|
|
||||||
>
|
|
||||||
Visa bokning / Avboka
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
|
|
||||||
<a
|
|
||||||
className="nav-secondary__item__link"
|
|
||||||
href="https://www.scandichotels.se/jobba-hos-oss/lediga-tjanster"
|
|
||||||
>
|
|
||||||
Jobba hos oss
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
|
|
||||||
<a
|
|
||||||
className="nav-secondary__item__link"
|
|
||||||
href="https://www.scandichotels.se/for-foretag"
|
|
||||||
>
|
|
||||||
Företag
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
|
|
||||||
<a
|
|
||||||
className="nav-secondary__item__link"
|
|
||||||
href="https://www.scandichotels.se/scandic-friends"
|
|
||||||
>
|
|
||||||
Om Scandic Friends
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="navigation-bar__main">
|
|
||||||
<div
|
|
||||||
className="l-section__inner l-section__inner--small-no-padding"
|
|
||||||
itemScope
|
|
||||||
itemType="http://schema.org/Organization"
|
|
||||||
>
|
|
||||||
<meta itemProp="name" content="Scandic" />
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="navigation-bar__main__expander"
|
|
||||||
data-js="main-nav-toggler"
|
|
||||||
data-target="#main-menu"
|
|
||||||
aria-pressed="false"
|
|
||||||
>
|
|
||||||
<span className="icon-bars"></span>
|
|
||||||
<span className="hidden--accessible">Menu</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<a
|
|
||||||
id="scandic-logo"
|
|
||||||
className="navigation-bar__main__logo hidden-medium "
|
|
||||||
href="https://www.scandichotels.se"
|
|
||||||
itemProp="url"
|
|
||||||
>
|
|
||||||
<span className="hidden--accessible">
|
|
||||||
Tillbaka till scandichotels.se
|
|
||||||
</span>
|
|
||||||
<img
|
|
||||||
src="/Static/img/scandic-logotype.svg"
|
|
||||||
data-js="scandiclogoimg"
|
|
||||||
alt="Scandic Hotels logo"
|
|
||||||
height="22"
|
|
||||||
data-nosvgsrc="/Static/img/scandic-logotype.png"
|
|
||||||
itemProp="logo"
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<nav>
|
|
||||||
<ul
|
|
||||||
id="main-menu"
|
|
||||||
className="nav-primary is-collapsed"
|
|
||||||
data-collapsable="main-menu"
|
|
||||||
>
|
|
||||||
<li
|
|
||||||
className="nav-primary__item nav-primary__item--primary hidden-large hidden-small hidden-xsmall hidden-xxsmall"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
className="navigation-bar__main__logo"
|
|
||||||
href="https://www.scandichotels.se"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="/Static/img/scandic-logotype.svg"
|
|
||||||
data-js="scandiclogoimg"
|
|
||||||
alt="Scandic Hotels logo"
|
|
||||||
height="22"
|
|
||||||
data-nosvgsrc="/Static/img/scandic-logotype.png"
|
|
||||||
/>
|
|
||||||
<span className="hidden--accessible">
|
|
||||||
Tillbaka till scandichotels.se
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="nav-primary__item nav-primary__item--primary ">
|
|
||||||
<a href="https://www.scandichotels.se/hotell">
|
|
||||||
Hotell & destinationer
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="nav-primary__item nav-primary__item--primary ">
|
|
||||||
<a href="https://www.scandichotels.se/reseguide">
|
|
||||||
Reseguider
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="nav-primary__item nav-primary__item--primary ">
|
|
||||||
<a href="https://www.scandichotels.se/konferens-mote">
|
|
||||||
Konferens & möten
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="nav-primary__item nav-primary__item--primary ">
|
|
||||||
<a href="https://www.scandichotels.se/utforska-scandic">
|
|
||||||
Utforska Scandic
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="nav-primary__item nav-primary__item--primary ">
|
|
||||||
<a href="https://www.scandichotels.se/erbjudanden-och-weekendpaket">
|
|
||||||
Erbjudanden
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li className="nav-primary__item nav-primary__item--secondary hidden-medium hidden-large ">
|
|
||||||
<a href="https://www.scandichotels.se/scandic-friends">
|
|
||||||
Om Scandic Friends
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="nav-primary__item nav-primary__item--secondary hidden-medium hidden-large ">
|
|
||||||
<a href="https://www.scandichotels.se/for-foretag">
|
|
||||||
För företag
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li className="nav-primary__item hidden-medium hidden-large">
|
|
||||||
{links ? (
|
|
||||||
<Mobile currentLanguage={currentLanguage} links={links} />
|
|
||||||
) : null}
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,14 +1,10 @@
|
|||||||
// import Desktop from "../LanguageSwitcher/Desktop"
|
import Desktop from "../LanguageSwitcher/Desktop"
|
||||||
|
|
||||||
import styles from "./topMenu.module.css"
|
import styles from "./topMenu.module.css"
|
||||||
|
|
||||||
import type { TopMenuProps } from "@/types/components/current/header/topMenu"
|
import type { TopMenuProps } from "@/types/components/current/header/topMenu"
|
||||||
|
|
||||||
/**
|
export default function TopMenu({ currentLanguage, frontpageLinkText, homeHref, links, urls }: TopMenuProps) {
|
||||||
* Desktop is commented out as it relates to
|
|
||||||
* LanguageSwitcher and will be handled in another task
|
|
||||||
*/
|
|
||||||
export default function TopMenu({ frontpageLinkText, homeHref, links }: TopMenuProps) {
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.topMenu}>
|
<div className={styles.topMenu}>
|
||||||
<div className={styles.container}>
|
<div className={styles.container}>
|
||||||
@@ -20,9 +16,12 @@ export default function TopMenu({ frontpageLinkText, homeHref, links }: TopMenuP
|
|||||||
</a>
|
</a>
|
||||||
|
|
||||||
<ul className={styles.list}>
|
<ul className={styles.list}>
|
||||||
{/* <li className="nav-secondary__item hidden-xxsmall hidden-xsmall hidden-small">
|
{urls ? (
|
||||||
{links ? <Desktop currentLanguage={currentLanguage} links={links} /> : null}
|
<li className="nav-secondary__item hidden-xxsmall hidden-xsmall hidden-small">
|
||||||
</li> */}
|
<Desktop currentLanguage={currentLanguage} urls={urls} />
|
||||||
|
</li>
|
||||||
|
) : null}
|
||||||
|
|
||||||
{links.map(({ link }) => (
|
{links.map(({ link }) => (
|
||||||
<li key={link.href}>
|
<li key={link.href}>
|
||||||
<a
|
<a
|
||||||
|
|||||||
@@ -1,3 +1,9 @@
|
|||||||
.header {
|
.header {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 950px) {
|
||||||
|
.header {
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@@ -1,5 +1,8 @@
|
|||||||
|
import { languages } from "@/constants/languages"
|
||||||
|
import { batchRequest } from "@/lib/batchRequest"
|
||||||
import { request } from "@/lib/request"
|
import { request } from "@/lib/request"
|
||||||
import { GetHeader } from "@/lib/graphql/Query/Header.graphql"
|
import { GetHeader } from "@/lib/graphql/Query/Header.graphql"
|
||||||
|
import { GetDaDeEnUrls, GetFiNoSvUrls } from "@/lib/graphql/Query/LanguageSwitcher.graphql"
|
||||||
|
|
||||||
import MainMenu from "./MainMenu"
|
import MainMenu from "./MainMenu"
|
||||||
import OfflineBanner from "./OfflineBanner"
|
import OfflineBanner from "./OfflineBanner"
|
||||||
@@ -9,14 +12,35 @@ import styles from "./header.module.css"
|
|||||||
|
|
||||||
import { LangParams } from "@/types/params"
|
import { LangParams } from "@/types/params"
|
||||||
import type { HeaderQueryData } from "@/types/requests/header"
|
import type { HeaderQueryData } from "@/types/requests/header"
|
||||||
|
import type { HeaderProps } from "@/types/components/current/header"
|
||||||
|
import type { LanguageSwitcherQueryData } from "@/types/requests/languageSwitcher"
|
||||||
|
|
||||||
export default async function Header({ lang }: LangParams) {
|
|
||||||
|
|
||||||
|
export default async function Header({ lang, uid }: LangParams & HeaderProps) {
|
||||||
try {
|
try {
|
||||||
|
const variables = {
|
||||||
|
locale: lang,
|
||||||
|
uid,
|
||||||
|
}
|
||||||
|
|
||||||
const { data } = await request<HeaderQueryData>(GetHeader, { locale: lang })
|
const { data } = await request<HeaderQueryData>(GetHeader, { locale: lang })
|
||||||
|
const { data: urls } = await batchRequest<LanguageSwitcherQueryData>([
|
||||||
|
{
|
||||||
|
document: GetDaDeEnUrls,
|
||||||
|
variables,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
document: GetFiNoSvUrls,
|
||||||
|
variables,
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
if (!data.all_header.items.length) {
|
if (!data.all_header.items.length) {
|
||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const currentLanguage = languages[lang]
|
||||||
const homeHref = `https://www.scandichotels.com/${lang}`
|
const homeHref = `https://www.scandichotels.com/${lang}`
|
||||||
const { frontpage_link_text, logoConnection, menu, top_menu } = data.all_header.items[0]
|
const { frontpage_link_text, logoConnection, menu, top_menu } = data.all_header.items[0]
|
||||||
const logo = logoConnection.edges?.[0]?.node
|
const logo = logoConnection.edges?.[0]?.node
|
||||||
@@ -27,16 +51,20 @@ export default async function Header({ lang }: LangParams) {
|
|||||||
<header className={styles.header} role="banner">
|
<header className={styles.header} role="banner">
|
||||||
<OfflineBanner />
|
<OfflineBanner />
|
||||||
<TopMenu
|
<TopMenu
|
||||||
|
currentLanguage={currentLanguage}
|
||||||
frontpageLinkText={frontpage_link_text}
|
frontpageLinkText={frontpage_link_text}
|
||||||
homeHref={homeHref}
|
homeHref={homeHref}
|
||||||
links={top_menu.links}
|
links={top_menu.links}
|
||||||
|
urls={urls}
|
||||||
/>
|
/>
|
||||||
<MainMenu
|
<MainMenu
|
||||||
|
currentLanguage={currentLanguage}
|
||||||
frontpageLinkText={frontpage_link_text}
|
frontpageLinkText={frontpage_link_text}
|
||||||
homeHref={homeHref}
|
homeHref={homeHref}
|
||||||
links={menu.links}
|
links={menu.links}
|
||||||
logo={logo}
|
logo={logo}
|
||||||
topMenuMobileLinks={topMenuMobileLinks}
|
topMenuMobileLinks={topMenuMobileLinks}
|
||||||
|
urls={urls}
|
||||||
/>
|
/>
|
||||||
</header>
|
</header>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -1,80 +0,0 @@
|
|||||||
export const currentAboutLinks = [
|
|
||||||
{
|
|
||||||
href: "https://www.scandichotels.com/customer-service/frequently-asked-questions/using-the-website",
|
|
||||||
title: "English",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
href: "https://www.scandichotels.se/kundservice/fragor-och-svar/om-scandics-webbplats",
|
|
||||||
title: "Svenska",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
href: "https://www.scandichotels.no/kundeservice/sporsmal-og-svar/bruk-av-nettsiden",
|
|
||||||
title: "Norsk",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
href: "https://www.scandichotels.dk/kundeservice/sporgsmal-og-svar/om-scandics-website",
|
|
||||||
title: "Dansk",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
href: "https://www.scandichotels.fi/asiakaspalvelu/usein-kysytyt-kysymykset/tietoja-internetsivuista",
|
|
||||||
title: "Suomi",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
href: "https://www.scandichotels.de/kundenbetreuung/haufig-gestellte-fragen/nutzung-der-internetseite",
|
|
||||||
title: "Deutsch",
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
export const currentSponsoringLinks = [
|
|
||||||
{
|
|
||||||
href: "https://www.scandichotels.com/sponsoring",
|
|
||||||
title: "English",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
href: "https://www.scandichotels.se/vi-sponsrar",
|
|
||||||
title: "Svenska",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
href: "https://www.scandichotels.no/vi-sponser",
|
|
||||||
title: "Norsk",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
href: "https://www.scandichotels.dk/sponsorering",
|
|
||||||
title: "Dansk",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
href: "https://www.scandichotels.fi/sponsorointi",
|
|
||||||
title: "Suomi",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
href: "https://www.scandichotels.de/sponsoring",
|
|
||||||
title: "Deutsch",
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
export const currentWifiLinks = [
|
|
||||||
{
|
|
||||||
href: "https://www.scandichotels.com/explore-scandic/wifi",
|
|
||||||
title: "English",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
href: "https://www.scandichotels.se/utforska-scandic/wi-fi",
|
|
||||||
title: "Svenska",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
href: "https://www.scandichotels.no/utforsk-scandic/wifi",
|
|
||||||
title: "Norsk",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
href: "https://www.scandichotels.dk/oplev-scandic/wifi",
|
|
||||||
title: "Dansk",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
href: "https://www.scandichotels.fi/koe-scandic/maksuton-internetyhteys",
|
|
||||||
title: "Suomi",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
href: "https://www.scandichotels.de/scandic-entdecken/wlan",
|
|
||||||
title: "Deutsch",
|
|
||||||
},
|
|
||||||
]
|
|
||||||
8
constants/languages.ts
Normal file
8
constants/languages.ts
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
export const languages = {
|
||||||
|
da: "Dansk",
|
||||||
|
de: "Deutsch",
|
||||||
|
en: "English",
|
||||||
|
fi: "Suomi",
|
||||||
|
no: "Norsk",
|
||||||
|
sv: "Svenska",
|
||||||
|
}
|
||||||
28
lib/batchRequest.ts
Normal file
28
lib/batchRequest.ts
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
import "server-only"
|
||||||
|
import { request } from "./request"
|
||||||
|
|
||||||
|
import type { Data } from "@/types/request"
|
||||||
|
import type { BatchRequestDocument } from "graphql-request"
|
||||||
|
|
||||||
|
export async function batchRequest<T>(queries: BatchRequestDocument[]): Promise<Data<T>> {
|
||||||
|
try {
|
||||||
|
const response = await Promise.allSettled(
|
||||||
|
queries.map(query => request<T>(query.document, query.variables))
|
||||||
|
)
|
||||||
|
|
||||||
|
let data = {} as T
|
||||||
|
const reasons = []
|
||||||
|
response.forEach(res => {
|
||||||
|
if (res.status === "fulfilled") {
|
||||||
|
data = Object.assign({}, data, res.value.data)
|
||||||
|
} else {
|
||||||
|
reasons.push(res.reason)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return { data }
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error)
|
||||||
|
throw new Error("Something went wrong")
|
||||||
|
}
|
||||||
|
}
|
||||||
21
lib/graphql/Query/LanguageSwitcher.graphql
Normal file
21
lib/graphql/Query/LanguageSwitcher.graphql
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
query GetDaDeEnUrls($uid: String!) {
|
||||||
|
de: current_blocks_page(uid: $uid, locale: "de") {
|
||||||
|
url: original_url
|
||||||
|
}
|
||||||
|
en: current_blocks_page(uid: $uid, locale: "en") {
|
||||||
|
url: original_url
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
query GetFiNoSvUrls($uid: String!) {
|
||||||
|
fi: current_blocks_page(uid: $uid, locale: "fi") {
|
||||||
|
url: original_url
|
||||||
|
}
|
||||||
|
no: current_blocks_page(uid: $uid, locale: "no") {
|
||||||
|
url: original_url
|
||||||
|
}
|
||||||
|
sv: current_blocks_page(uid: $uid, locale: "sv") {
|
||||||
|
url: original_url
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@@ -1,3 +1,3 @@
|
|||||||
export type HeaderProps = {
|
export type HeaderProps = {
|
||||||
pathname: string
|
uid: string
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,10 +1,13 @@
|
|||||||
import type { HeaderLink, TopMenuHeaderLink } from "@/types/requests/header"
|
import type { HeaderLink, TopMenuHeaderLink } from "@/types/requests/header"
|
||||||
import type { Image } from "@/types/image"
|
import type { Image } from "@/types/image"
|
||||||
|
import type { LanguageSwitcherQueryData } from "@/types/requests/languageSwitcher"
|
||||||
|
|
||||||
export type MainMenuProps = {
|
export type MainMenuProps = {
|
||||||
|
currentLanguage: string
|
||||||
frontpageLinkText: string
|
frontpageLinkText: string
|
||||||
homeHref: string
|
homeHref: string
|
||||||
links: HeaderLink[]
|
links: HeaderLink[]
|
||||||
logo: Image
|
logo: Image
|
||||||
topMenuMobileLinks: TopMenuHeaderLink[]
|
topMenuMobileLinks: TopMenuHeaderLink[]
|
||||||
|
urls: LanguageSwitcherQueryData
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,10 @@
|
|||||||
|
import type { LanguageSwitcherQueryData } from "@/types/requests/languageSwitcher"
|
||||||
import type { TopMenuHeaderLink } from "@/types/requests/header"
|
import type { TopMenuHeaderLink } from "@/types/requests/header"
|
||||||
|
|
||||||
export type TopMenuProps = {
|
export type TopMenuProps = {
|
||||||
|
currentLanguage: string
|
||||||
frontpageLinkText: string
|
frontpageLinkText: string
|
||||||
homeHref: string
|
homeHref: string
|
||||||
links: TopMenuHeaderLink[]
|
links: TopMenuHeaderLink[]
|
||||||
|
urls: LanguageSwitcherQueryData
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,3 +1,5 @@
|
|||||||
|
import type { LanguageSwitcherQueryData } from "@/types/requests/languageSwitcher"
|
||||||
|
|
||||||
export type LanguageSwitcherLink = {
|
export type LanguageSwitcherLink = {
|
||||||
href: string
|
href: string
|
||||||
title: string
|
title: string
|
||||||
@@ -5,5 +7,5 @@ export type LanguageSwitcherLink = {
|
|||||||
|
|
||||||
export type LanguageSwitcherProps = {
|
export type LanguageSwitcherProps = {
|
||||||
currentLanguage: string
|
currentLanguage: string
|
||||||
links: LanguageSwitcherLink[]
|
urls: LanguageSwitcherQueryData
|
||||||
}
|
}
|
||||||
|
|||||||
11
types/requests/languageSwitcher.ts
Normal file
11
types/requests/languageSwitcher.ts
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
type LanguageResult = {
|
||||||
|
url: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export type LanguageSwitcherQueryData = {
|
||||||
|
de: LanguageResult | undefined
|
||||||
|
en: LanguageResult | undefined
|
||||||
|
fi: LanguageResult | undefined
|
||||||
|
no: LanguageResult | undefined
|
||||||
|
sv: LanguageResult | undefined
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user