feat(WEB-38, WEB-9, WEB-19): add static page for sponsoring, add Header and add Footer
This commit is contained in:
Christel Westerberg
@@ -0,0 +1,190 @@
|
||||
/* 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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,187 @@
|
||||
/* 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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,189 @@
|
||||
/* 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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
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="https://www.scandichotels.com/sponsoring">{link.title}</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,190 @@
|
||||
/* 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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import { langEnum } from "@/types/lang";
|
||||
|
||||
import Da from "./Da";
|
||||
import De from "./De";
|
||||
import En from "./En";
|
||||
import Fi from "./Fi";
|
||||
import No from "./No";
|
||||
import Sv from "./Sv";
|
||||
|
||||
import type { HeaderProps } from "@/types/components/current/header";
|
||||
import type { LangProps } from "@/types/lang";
|
||||
|
||||
export default function Header({ lang, pathname }: LangProps<HeaderProps>) {
|
||||
switch (lang) {
|
||||
case langEnum.sv:
|
||||
return <Sv pathname={pathname} />;
|
||||
case langEnum.fi:
|
||||
return <Fi pathname={pathname} />;
|
||||
case langEnum.en:
|
||||
return <En pathname={pathname} />;
|
||||
case langEnum.da:
|
||||
return <Da pathname={pathname} />;
|
||||
case langEnum.de:
|
||||
return <De pathname={pathname} />;
|
||||
case langEnum.no:
|
||||
return <No pathname={pathname} />;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user