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 (
|
||||
<>
|
||||
<Header lang={params.lang} />
|
||||
<Header lang={params.lang} uid={pageData.system.uid} />
|
||||
<ContentPage data={response.data} />
|
||||
<Tracking pageData={trackingData} />
|
||||
</>
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
padding-bottom: 50px;
|
||||
background: #f3f2f1;
|
||||
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 Image from "@/components/Image"
|
||||
// import Mobile from "../LanguageSwitcher/Mobile"
|
||||
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) {
|
||||
export default function MainMenu({
|
||||
currentLanguage,
|
||||
frontpageLinkText,
|
||||
homeHref,
|
||||
links,
|
||||
logo,
|
||||
topMenuMobileLinks,
|
||||
urls,
|
||||
}: MainMenuProps) {
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
|
||||
function toogleIsOpen() {
|
||||
@@ -90,9 +94,11 @@ export default function MainMenu({ frontpageLinkText, homeHref, links, logo, top
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{/* <li className="nav-primary__item hidden-medium hidden-large">
|
||||
{links ? <Mobile currentLanguage={currentLanguage} links={links} /> : null}
|
||||
</li> */}
|
||||
{urls ? (
|
||||
<li className="nav-primary__item hidden-medium hidden-large">
|
||||
<Mobile currentLanguage={currentLanguage} urls={urls} />
|
||||
</li>
|
||||
) : null}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
@@ -167,6 +167,7 @@
|
||||
.mainMenu {
|
||||
background-color: hsla(0, 0%, 100%, .95);
|
||||
position: relative;
|
||||
z-index: unset;
|
||||
}
|
||||
|
||||
.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 type { TopMenuProps } from "@/types/components/current/header/topMenu"
|
||||
|
||||
/**
|
||||
* Desktop is commented out as it relates to
|
||||
* LanguageSwitcher and will be handled in another task
|
||||
*/
|
||||
export default function TopMenu({ frontpageLinkText, homeHref, links }: TopMenuProps) {
|
||||
export default function TopMenu({ currentLanguage, frontpageLinkText, homeHref, links, urls }: TopMenuProps) {
|
||||
return (
|
||||
<div className={styles.topMenu}>
|
||||
<div className={styles.container}>
|
||||
@@ -20,9 +16,12 @@ export default function TopMenu({ frontpageLinkText, homeHref, links }: TopMenuP
|
||||
</a>
|
||||
|
||||
<ul className={styles.list}>
|
||||
{/* <li className="nav-secondary__item hidden-xxsmall hidden-xsmall hidden-small">
|
||||
{links ? <Desktop currentLanguage={currentLanguage} links={links} /> : null}
|
||||
</li> */}
|
||||
{urls ? (
|
||||
<li className="nav-secondary__item hidden-xxsmall hidden-xsmall hidden-small">
|
||||
<Desktop currentLanguage={currentLanguage} urls={urls} />
|
||||
</li>
|
||||
) : null}
|
||||
|
||||
{links.map(({ link }) => (
|
||||
<li key={link.href}>
|
||||
<a
|
||||
|
||||
@@ -1,3 +1,9 @@
|
||||
.header {
|
||||
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 { GetHeader } from "@/lib/graphql/Query/Header.graphql"
|
||||
import { GetDaDeEnUrls, GetFiNoSvUrls } from "@/lib/graphql/Query/LanguageSwitcher.graphql"
|
||||
|
||||
import MainMenu from "./MainMenu"
|
||||
import OfflineBanner from "./OfflineBanner"
|
||||
@@ -9,14 +12,35 @@ import styles from "./header.module.css"
|
||||
|
||||
import { LangParams } from "@/types/params"
|
||||
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 {
|
||||
const variables = {
|
||||
locale: lang,
|
||||
uid,
|
||||
}
|
||||
|
||||
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) {
|
||||
return null
|
||||
}
|
||||
|
||||
const currentLanguage = languages[lang]
|
||||
const homeHref = `https://www.scandichotels.com/${lang}`
|
||||
const { frontpage_link_text, logoConnection, menu, top_menu } = data.all_header.items[0]
|
||||
const logo = logoConnection.edges?.[0]?.node
|
||||
@@ -27,16 +51,20 @@ export default async function Header({ lang }: LangParams) {
|
||||
<header className={styles.header} role="banner">
|
||||
<OfflineBanner />
|
||||
<TopMenu
|
||||
currentLanguage={currentLanguage}
|
||||
frontpageLinkText={frontpage_link_text}
|
||||
homeHref={homeHref}
|
||||
links={top_menu.links}
|
||||
urls={urls}
|
||||
/>
|
||||
<MainMenu
|
||||
currentLanguage={currentLanguage}
|
||||
frontpageLinkText={frontpage_link_text}
|
||||
homeHref={homeHref}
|
||||
links={menu.links}
|
||||
logo={logo}
|
||||
topMenuMobileLinks={topMenuMobileLinks}
|
||||
urls={urls}
|
||||
/>
|
||||
</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 = {
|
||||
pathname: string
|
||||
uid: string
|
||||
}
|
||||
|
||||
@@ -1,10 +1,13 @@
|
||||
import type { HeaderLink, TopMenuHeaderLink } from "@/types/requests/header"
|
||||
import type { Image } from "@/types/image"
|
||||
import type { LanguageSwitcherQueryData } from "@/types/requests/languageSwitcher"
|
||||
|
||||
export type MainMenuProps = {
|
||||
currentLanguage: string
|
||||
frontpageLinkText: string
|
||||
homeHref: string
|
||||
links: HeaderLink[]
|
||||
logo: Image
|
||||
topMenuMobileLinks: TopMenuHeaderLink[]
|
||||
urls: LanguageSwitcherQueryData
|
||||
}
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
import type { LanguageSwitcherQueryData } from "@/types/requests/languageSwitcher"
|
||||
import type { TopMenuHeaderLink } from "@/types/requests/header"
|
||||
|
||||
export type TopMenuProps = {
|
||||
currentLanguage: string
|
||||
frontpageLinkText: string
|
||||
homeHref: string
|
||||
links: TopMenuHeaderLink[]
|
||||
urls: LanguageSwitcherQueryData
|
||||
}
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import type { LanguageSwitcherQueryData } from "@/types/requests/languageSwitcher"
|
||||
|
||||
export type LanguageSwitcherLink = {
|
||||
href: string
|
||||
title: string
|
||||
@@ -5,5 +7,5 @@ export type LanguageSwitcherLink = {
|
||||
|
||||
export type LanguageSwitcherProps = {
|
||||
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