fix: add login/logout buttons

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 (
-    <a className={styles.button} href="/">
+    <a className={styles.button} href={href}>
       Book
     </a>
   )

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({
           <ul
             className={`${styles.listWrapper} ${isOpen ? styles.isOpen : ""}`}
           >
+            <ul className={styles.linkRow}>
+              {isLoggedIn ? (
+                <>
+                  <li>
+                    <div className={styles.loggedInLogo} />
+                  </li>
+                  <li className={styles.mobileLinkRow}>
+                    <Link
+                      className={styles.mobileLinkButton}
+                      href={myPages[lang]}
+                    >
+                      {_("My pages")}
+                    </Link>
+                  </li>
+                </>
+              ) : (
+                <>
+                  <li>
+                    <Image
+                      src="/_static/img/icon-scandic-friends.svg"
+                      alt="Scanidc Friends Logo"
+                      height={35}
+                      width={35}
+                      className={styles.scandicFriendsLogo}
+                    />
+                  </li>
+                  <li className={styles.mobileLinkRow}>
+                    <Link
+                      className={styles.mobileLinkButton}
+                      href={login[lang]}
+                    >
+                      {_("Log in")}
+                    </Link>
+                  </li>
+                </>
+              )}
+
+              <li className={styles.mobileLinkRow}>
+                <span className={styles.mobileSeparator} />
+              </li>
+              <li className={styles.mobileLinkRow}>
+                <a className={styles.mobileLinkButton} href="">
+                  {_("Find booking")}
+                </a>
+              </li>
+            </ul>
             <ul className={styles.mainLinks}>
               {links.map((link, i) => (
                 <li className={styles.li} key={link.href + i}>
@@ -84,7 +141,7 @@ export function MainMenu({
             ) : null}
           </ul>
           <div className={styles.buttonContainer}>
-            <BookingButton />
+            <BookingButton href={bookingHref} />
           </div>
         </nav>
       </div>

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 {

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({
           ))}
           <li className={styles.loginContainer}>
             {session ? (
-              <a href={`${lang}/logout`} className={styles.loginLink}>
+              <a href={logout[lang]} className={styles.loginLink}>
                 Log out
               </a>
             ) : (
-              <a href={`${lang}/login`} className={styles.loginLink}>
+              <a href={login[lang]} className={styles.loginLink}>
                 Log in
               </a>
             )}

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;
   }
 }

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}
       />
     </header>
   )

public/_static/img/icon-scandic-friends.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="86px" height="85px" viewBox="0 0 86 85" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>Page 1</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g fill="#020203">
+            <polygon id="Fill-1" points="35.8989 74.2547 41.3609 74.9957 41.1749 76.3727 37.3479 75.8537 36.9619 78.6917 40.5599 79.1807 40.3729 80.5567 36.7739 80.0677 36.1449 84.7137 34.5099 84.4907"></polygon>
+            <g id="Group-32" transform="translate(0.000000, 0.212600)">
+                <path d="M50.4209,78.4689 C51.4549,78.2469 51.8999,77.4989 51.6809,76.4809 C51.4479,75.4059 50.8599,74.9409 49.7999,75.1689 L48.4269,75.4659 L49.1349,78.7469 L50.4209,78.4689 Z M46.5529,74.5969 L50.1169,73.8279 C51.5299,73.5229 52.8289,73.9829 53.2369,75.8779 C53.5189,77.1799 53.1559,78.3089 52.0879,78.7169 L52.0939,78.7449 C53.1199,78.6269 53.7629,79.0669 54.1249,80.4679 C54.2789,81.1159 54.4639,81.9049 54.6239,82.5069 C54.7589,82.9949 55.0509,83.1849 55.2939,83.2799 L53.4689,83.6739 C53.2749,83.5239 53.1369,83.2279 53.0079,82.8399 C52.8199,82.2449 52.7119,81.6759 52.5249,80.9469 C52.2599,79.8499 51.8159,79.4419 50.7129,79.6799 L49.3979,79.9629 L50.3429,84.3489 L48.7309,84.6969 L46.5529,74.5969 Z" id="Fill-2"></path>
+                <polygon id="Fill-4" points="57.6152 71.0411 59.0562 70.2391 64.0772 79.2611 62.6362 80.0631"></polygon>
+                <polygon id="Fill-6" points="63.5429 67.1603 67.5029 63.2213 68.4829 64.2063 65.6919 66.9813 67.7119 69.0133 70.3389 66.4013 71.3179 67.3863 68.6909 69.9983 71.0189 72.3373 73.8919 69.4803 74.8709 70.4653 70.8279 74.4853"></polygon>
+                <polygon id="Fill-8" points="70.6416 58.6983 71.5006 56.8813 79.7366 57.4683 79.7476 57.4413 72.7936 54.1493 73.4626 52.7373 82.7956 57.1553 81.9356 58.9723 73.5166 58.3003 73.5046 58.3263 80.6426 61.7043 79.9736 63.1163"></polygon>
+                <path d="M83.8027,46.3058 L83.8777,44.9488 C83.9527,43.5908 83.0887,42.9788 80.0717,42.8118 C77.1677,42.6528 76.1297,43.0878 76.0517,44.5178 L75.9767,45.8748 L83.8027,46.3058 Z M74.6437,47.4518 L74.8057,44.5218 C74.9837,41.2858 77.1147,40.9978 80.1597,41.1658 C83.2067,41.3338 85.2927,41.8548 85.1147,45.0888 L84.9537,48.0198 L74.6437,47.4518 Z" id="Fill-10"></path>
+                <path d="M80.7158,32.4347 L80.9648,32.3567 C82.1658,31.9817 82.6108,31.2677 82.2698,30.1767 C81.9598,29.1827 81.1008,28.9047 80.3678,29.1327 C79.3328,29.4557 79.0398,30.1217 79.0538,31.0887 L79.0168,32.2827 C78.9118,33.8917 78.3598,34.7457 76.9508,35.1847 C75.1548,35.7437 73.7818,34.8387 73.2038,32.9877 C72.4168,30.4597 73.9078,29.7067 74.9318,29.3877 L75.1528,29.3187 L75.6438,30.8937 L75.4358,30.9577 C74.5378,31.2387 74.1378,31.8027 74.4448,32.7837 C74.6538,33.4597 75.2308,33.9927 76.2788,33.6657 C77.1238,33.4027 77.4168,32.8407 77.4908,31.6657 L77.5458,30.4817 C77.6088,28.9327 78.1798,28.0877 79.5328,27.6657 C81.6318,27.0107 82.8988,28.0107 83.5188,29.9987 C84.2808,32.4447 82.8218,33.5047 81.4428,33.9357 L81.2068,34.0097 L80.7158,32.4347 Z" id="Fill-12"></path>
+                <path d="M9.393,54.3595 L9.642,54.2845 C10.846,53.9155 11.294,53.2045 10.959,52.1115 C10.655,51.1155 9.797,50.8335 9.064,51.0565 C8.026,51.3745 7.731,52.0385 7.738,53.0055 L7.695,54.1985 C7.581,55.8055 7.023,56.6575 5.612,57.0885 C3.814,57.6375 2.446,56.7245 1.879,54.8715 C1.105,52.3385 2.602,51.5945 3.626,51.2825 L3.847,51.2135 L4.329,52.7915 L4.122,52.8545 C3.222,53.1295 2.82,53.6915 3.121,54.6735 C3.327,55.3515 3.899,55.8875 4.951,55.5665 C5.795,55.3075 6.093,54.7485 6.173,53.5745 L6.234,52.3895 C6.306,50.8395 6.881,49.9995 8.236,49.5855 C10.339,48.9425 11.6,49.9495 12.209,51.9405 C12.957,54.3895 11.494,55.4415 10.11,55.8655 L9.874,55.9375 L9.393,54.3595 Z" id="Fill-14"></path>
+                <path d="M7.0551,37.4132 L7.2731,37.4232 C9.1371,37.5062 10.9251,38.3382 10.8181,40.7672 C10.7021,43.3682 8.9901,44.1022 5.3031,43.9392 C1.6181,43.7762 -0.0239,42.8922 0.0921,40.2762 C0.2221,37.3422 2.3991,37.2642 3.4681,37.3112 L3.6561,37.3202 L3.5831,38.9682 L3.4101,38.9602 C2.4561,38.9182 1.3441,39.1582 1.3341,40.3462 C1.2811,41.5592 2.0091,42.1422 5.3331,42.2902 C8.6581,42.4372 9.5211,41.9252 9.5741,40.7112 C9.6351,39.3382 8.1101,39.1102 7.1571,39.0682 L6.9831,39.0602 L7.0551,37.4132 Z" id="Fill-16"></path>
+                <path d="M9.9301,27.5294 L4.7731,26.6764 L4.7611,26.7034 L8.9951,29.7864 L9.9301,27.5294 Z M3.1021,27.0804 L3.9101,25.1304 L14.4921,26.5684 L13.8331,28.1584 L11.2501,27.7784 L10.0951,30.5714 L12.1781,32.1544 L11.5201,33.7444 L3.1021,27.0804 Z" id="Fill-18"></path>
+                <polygon id="Fill-20" points="9.6425 15.6002 11.0265 14.1412 18.6755 17.2642 18.6955 17.2422 13.1075 11.9452 14.1825 10.8122 21.6815 17.9202 20.2975 19.3802 12.5015 16.1182 12.4825 16.1392 18.2165 21.5752 17.1415 22.7092"></polygon>
+                <path d="M26.75,13.086 L27.974,12.493 C29.197,11.9 29.314,10.846 27.994,8.126 C26.727,5.508 25.841,4.813 24.553,5.437 L23.33,6.03 L26.75,13.086 Z M21.302,5.63 L23.944,4.35 C26.862,2.935 28.147,4.659 29.479,7.406 C30.811,10.153 31.368,12.231 28.452,13.644 L25.808,14.925 L21.302,5.63 Z" id="Fill-22"></path>
+                <polygon id="Fill-24" points="34.7387 0.7355 36.3637 0.4585 38.0997 10.6415 36.4727 10.9185"></polygon>
+                <path d="M50.4892,7.2931 L50.4632,7.5081 C50.2372,9.3621 49.2702,11.0811 46.8572,10.7891 C44.2712,10.4751 43.6692,8.7101 44.1142,5.0481 C44.5582,1.3841 45.5662,-0.1849 48.1662,0.1311 C51.0832,0.4851 50.9932,2.6611 50.8632,3.7241 L50.8422,3.9111 L49.2032,3.7111 L49.2242,3.5401 C49.3392,2.5911 49.1842,1.4651 48.0012,1.3651 C46.7942,1.2181 46.1572,1.8991 45.7572,5.2031 C45.3562,8.5071 45.8012,9.4071 47.0082,9.5531 C48.3722,9.7191 48.7152,8.2151 48.8302,7.2671 L48.8502,7.0951 L50.4892,7.2931 Z" id="Fill-26"></path>
+                <polygon id="Fill-28" points="21.3622 75.4327 20.0582 74.3387 74.5042 9.4527 75.8072 10.5467"></polygon>
+                <polygon id="Fill-30" points="10.9316 75.5675 9.6276 74.4735 64.0736 9.5885 65.3776 10.6815"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>

types/components/current/header/mainMenu.ts

@@ -11,4 +11,6 @@ export type MainMenuProps = {
   logo: Image
   topMenuMobileLinks: TopMenuHeaderLink[]
   languageSwitcher: React.ReactNode
+  bookingHref: string
+  isLoggedIn: boolean
 }

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
 }