diff --git a/components/Current/Header/BookingButton/index.tsx b/components/Current/Header/BookingButton/index.tsx
index 431c9b5cc..095120ae4 100644
--- a/components/Current/Header/BookingButton/index.tsx
+++ b/components/Current/Header/BookingButton/index.tsx
@@ -2,9 +2,9 @@ import "@scandic-hotels/design-system/current/style.css"
import styles from "./bookingButton.module.css"
-export default function BookingButton() {
+export default function BookingButton({ href }: { href: string }) {
return (
-
+
Book
)
diff --git a/components/Current/Header/MainMenu/index.tsx b/components/Current/Header/MainMenu/index.tsx
index f63b43093..af241f7f7 100644
--- a/components/Current/Header/MainMenu/index.tsx
+++ b/components/Current/Header/MainMenu/index.tsx
@@ -1,7 +1,14 @@
"use client"
+import { useParams } from "next/navigation"
import { useState } from "react"
+import { Lang } from "@/constants/languages"
+import { login } from "@/constants/routes/handleAuth"
+import { myPages } from "@/constants/routes/myPages"
+import { _ } from "@/lib/translation"
+
import Image from "@/components/Image"
+import Link from "@/components/TempDesignSystem/Link"
import BookingButton from "../BookingButton"
@@ -16,9 +23,13 @@ export function MainMenu({
logo,
topMenuMobileLinks,
languageSwitcher,
+ bookingHref,
+ isLoggedIn,
}: MainMenuProps) {
const [isOpen, setIsOpen] = useState(false)
+ const lang = useParams().lang as Lang
+
function toogleIsOpen() {
setIsOpen((prevIsOpen) => !prevIsOpen)
}
@@ -59,6 +70,52 @@ export function MainMenu({
+
+ {isLoggedIn ? (
+ <>
+ -
+
+
+ -
+
+ {_("My pages")}
+
+
+
+ ) : (
+ <>
+ -
+
+
+ -
+
+ {_("Log in")}
+
+
+
+ )}
+
+ -
+
+
+ -
+
+ {_("Find booking")}
+
+
+
{links.map((link, i) => (
-
@@ -84,7 +141,7 @@ export function MainMenu({
) : null}
-
+
diff --git a/components/Current/Header/MainMenu/mainMenu.module.css b/components/Current/Header/MainMenu/mainMenu.module.css
index 257bf0e8e..45671e428 100644
--- a/components/Current/Header/MainMenu/mainMenu.module.css
+++ b/components/Current/Header/MainMenu/mainMenu.module.css
@@ -8,6 +8,7 @@
top: 0;
width: 100%;
z-index: 99999;
+ height: 52.39px;
}
.container {
@@ -25,7 +26,8 @@
.navBar {
display: grid;
grid-template-columns: 1fr 80px 1fr;
- height: 52.39px;
+ grid-template-rows: 100%;
+ height: 100%;
}
.expanderBtn {
@@ -154,6 +156,57 @@
text-decoration: none;
}
+.linkRow {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-bottom: 1px solid #e3e0db;
+ background-color: #f3f2f1 !important;
+ list-style: none;
+}
+
+.scandicFriendsLogo {
+ margin-right: 4px;
+ margin-left: -4px;
+}
+
+.mobileLinkRow {
+ margin: 6px 0;
+ padding: 15px 15px 15px 5px;
+}
+
+.loggedInLogo {
+ height: 35px;
+ width: 35px;
+ border-radius: 50px;
+ background-color: #000;
+ margin-right: 4px;
+ margin-left: -4px;
+}
+
+.mobileLinkButton {
+ font-size: 14px;
+ font-family:
+ Helvetica Neue,
+ Helvetica,
+ Arial,
+ sans-serif;
+ font-weight: 700;
+ background-color: transparent !important;
+ text-decoration: none;
+ color: #000;
+ outline-color: transparent;
+}
+
+.mobileSeparator {
+ border-left: 1px solid #e3e0db;
+ height: 35px;
+ margin-bottom: -12px;
+ margin-left: -1px;
+ margin-top: -12px;
+ display: block;
+}
+
.mobileList {
padding-top: 6px;
}
@@ -187,6 +240,7 @@
background-color: hsla(0, 0%, 100%, 0.95);
position: relative;
z-index: unset;
+ height: 85.09px;
}
.container {
@@ -201,7 +255,9 @@
.navBar {
grid-template-columns: 132.18px 1fr auto;
align-content: center;
- height: 85.09px;
+ padding-bottom: 2px;
+
+ overflow: hidden;
}
.expanderBtn {
@@ -217,9 +273,8 @@
}
.logo {
- width: 102.18px;
- object-fit: cover;
- height: auto;
+ width: 102.17px;
+ height: 100%;
}
.listWrapper {
@@ -250,6 +305,10 @@
padding: 30px 15px;
}
+ .linkRow {
+ display: none;
+ }
+
.mobileList {
display: none;
padding-top: 0px;
@@ -258,12 +317,18 @@
.mobileLi {
display: none;
}
+
+ .buttonContainer {
+ margin-right: 0;
+ }
}
@media (min-width: 1200px) {
+ .mainMenu {
+ height: 82.4px;
+ }
.navBar {
grid-template-columns: 140px auto 1fr;
- height: 82.4px;
}
.logoLink {
diff --git a/components/Current/Header/TopMenu/index.tsx b/components/Current/Header/TopMenu/index.tsx
index 0589f410e..aee37d4ff 100644
--- a/components/Current/Header/TopMenu/index.tsx
+++ b/components/Current/Header/TopMenu/index.tsx
@@ -1,3 +1,5 @@
+import { login, logout } from "@/constants/routes/handleAuth"
+
import { auth } from "@/auth"
import styles from "./topMenu.module.css"
@@ -32,11 +34,11 @@ export default async function TopMenu({
))}
-
{session ? (
-
+
Log out
) : (
-
+
Log in
)}
diff --git a/components/Current/Header/TopMenu/topMenu.module.css b/components/Current/Header/TopMenu/topMenu.module.css
index e9adcd825..adf863751 100644
--- a/components/Current/Header/TopMenu/topMenu.module.css
+++ b/components/Current/Header/TopMenu/topMenu.module.css
@@ -24,6 +24,7 @@
.list {
display: flex;
list-style: none;
+ line-height: 22.4px;
}
.link {
@@ -71,11 +72,27 @@
.loginContainer {
margin-left: 10px;
background-color: #f3f2f1;
+ height: 100%;
+ display: flex;
+ align-items: center;
}
.loginLink {
padding-left: 30px;
padding-right: 30px;
color: #000;
+ font-family:
+ Helvetica Neue,
+ Helvetica,
+ Arial,
+ sans-serif;
+ font-size: 13px;
+ font-weight: 400;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ text-rendering: optimizeLegibility;
+ cursor: pointer;
+ text-align: center;
+ text-decoration: none;
}
}
diff --git a/components/Current/Header/index.tsx b/components/Current/Header/index.tsx
index a6248ee0a..47a33efd4 100644
--- a/components/Current/Header/index.tsx
+++ b/components/Current/Header/index.tsx
@@ -2,6 +2,8 @@ import { homeHrefs } from "@/constants/homeHrefs"
import { env } from "@/env/server"
import { serverClient } from "@/lib/trpc/server"
+import { auth } from "@/auth"
+
import { MainMenu } from "./MainMenu"
import OfflineBanner from "./OfflineBanner"
import TopMenu from "./TopMenu"
@@ -15,6 +17,7 @@ export default async function Header({
languageSwitcher,
}: LangParams & { languageSwitcher: React.ReactNode }) {
const data = await serverClient().contentstack.config.header({ lang })
+ const session = await auth()
const homeHref = homeHrefs[env.NODE_ENV][lang]
const { frontpage_link_text, logo, menu, top_menu } = data
@@ -40,6 +43,8 @@ export default async function Header({
logo={logo}
topMenuMobileLinks={topMenuMobileLinks}
languageSwitcher={languageSwitcher}
+ bookingHref={homeHref}
+ isLoggedIn={!!session}
/>
)
diff --git a/public/_static/img/icon-scandic-friends.svg b/public/_static/img/icon-scandic-friends.svg
new file mode 100644
index 000000000..991a4cff6
--- /dev/null
+++ b/public/_static/img/icon-scandic-friends.svg
@@ -0,0 +1,29 @@
+
+
\ No newline at end of file
diff --git a/types/components/current/header/mainMenu.ts b/types/components/current/header/mainMenu.ts
index 4b8ad0e95..6873a3ed9 100644
--- a/types/components/current/header/mainMenu.ts
+++ b/types/components/current/header/mainMenu.ts
@@ -11,4 +11,6 @@ export type MainMenuProps = {
logo: Image
topMenuMobileLinks: TopMenuHeaderLink[]
languageSwitcher: React.ReactNode
+ bookingHref: string
+ isLoggedIn: boolean
}
diff --git a/types/components/current/header/topMenu.ts b/types/components/current/header/topMenu.ts
index 3545ef8d8..257751e7a 100644
--- a/types/components/current/header/topMenu.ts
+++ b/types/components/current/header/topMenu.ts
@@ -1,3 +1,5 @@
+import { Lang } from "@/constants/languages"
+
import type { TopMenuHeaderLink } from "@/types/requests/currentHeader"
export type TopMenuProps = {
@@ -5,5 +7,5 @@ export type TopMenuProps = {
homeHref: string
links: TopMenuHeaderLink[]
languageSwitcher: React.ReactNode
- lang: string
+ lang: Lang
}