feat(SW-184): implementing mobile design

components/Header/TopMenu/LanguageSwitcher/index.tsx

@@ -1,61 +0,0 @@
-"use client"
-
-import Link from "next/link"
-
-import { Lang, languages } from "@/constants/languages"
-import useDropdownStore from "@/stores/main-menu"
-
-import { CheckIcon, ChevronDownIcon, GlobeIcon } from "@/components/Icons"
-import useLang from "@/hooks/useLang"
-
-import TopMenuButton from "../TopMenuButton"
-
-import styles from "./languageSwitcher.module.css"
-
-import { LanguageSwitcherProps } from "@/types/components/current/languageSwitcher"
-
-export default function LanguageSwitcher({ urls }: LanguageSwitcherProps) {
-  const currentLanguage = useLang()
-  const { toggleLanguageSwitcher, isLanguageSwitcherOpen } = useDropdownStore()
-
-  const urlKeys = Object.keys(urls) as Lang[]
-
-  return (
-    <div className={styles.languageSwitcher}>
-      <TopMenuButton onClick={toggleLanguageSwitcher}>
-        <GlobeIcon width={20} height={20} color="burgundy" />
-        <span>{languages[currentLanguage]}</span>
-        <ChevronDownIcon
-          className={`${styles.chevron} ${isLanguageSwitcherOpen ? styles.isExpanded : ""}`}
-          width={20}
-          height={20}
-          color="burgundy"
-        />
-      </TopMenuButton>
-      <div
-        className={`${styles.dropdown} ${isLanguageSwitcherOpen ? styles.isExpanded : ""}`}
-      >
-        <ul className={styles.list}>
-          {urlKeys.map((key) => {
-            const url = urls[key]?.url
-            const isActive = currentLanguage === key
-            if (url) {
-              return (
-                <li key={key}>
-                  <Link
-                    className={`${styles.link} ${isActive ? styles.active : ""}`}
-                    color="burgundy"
-                    href={url}
-                  >
-                    {languages[key]}
-                    {isActive ? <CheckIcon color="burgundy" /> : null}
-                  </Link>
-                </li>
-              )
-            }
-          })}
-        </ul>
-      </div>
-    </div>
-  )
-}

components/Header/TopMenu/LanguageSwitcher/languageSwitcher.module.css

@@ -1,80 +0,0 @@
-.languageSwitcher {
-  position: relative;
-}
-
-.button {
-  background-color: transparent;
-  color: var(--Base-Text-High-contrast);
-  border-width: 0;
-  cursor: pointer;
-  display: flex;
-  gap: var(--Spacing-x1);
-  align-items: center;
-}
-
-.chevron {
-  transition: transform 0.2s;
-}
-
-.chevron.isExpanded {
-  transform: rotate(180deg);
-}
-
-.dropdown {
-  position: absolute;
-  top: 2.25rem;
-  right: 0;
-  background-color: var(--Base-Surface-Primary-light-Normal);
-  padding: var(--Spacing-x2) var(--Spacing-x3);
-  border-radius: var(--Corner-radius-Large);
-  box-shadow: 0px 0px 14px 6px #0000001a;
-  display: none;
-  min-width: 12.5rem;
-  z-index: 1;
-}
-
-/* Triangle above dropdown */
-.dropdown::before {
-  content: "";
-  position: absolute;
-  top: -1.25rem;
-  right: 2.4rem;
-  transform: rotate(180deg);
-  border-width: 0.75rem;
-  border-style: solid;
-  border-color: var(--Base-Surface-Primary-light-Normal) transparent transparent
-    transparent;
-}
-
-.dropdown.isExpanded {
-  display: block;
-}
-
-.list {
-  list-style: none;
-}
-
-.link {
-  color: var(--Scandic-Brand-Burgundy);
-  font-family: var(--typography-Body-Regular-fontFamily);
-  font-size: var(--typography-Body-Regular-fontSize);
-  line-height: var(--typography-Body-Regular-lineHeight);
-  letter-spacing: var(--typography-Body-Regular-letterSpacing);
-  padding: var(--Spacing-x1);
-  border-radius: var(--Corner-radius-Medium);
-  display: flex;
-  gap: var(--Spacing-x1);
-  justify-content: space-between;
-  align-items: center;
-  text-decoration: none;
-}
-
-.link:hover {
-  background-color: var(--Base-Surface-Primary-light-Hover-alt);
-  border-radius: var(--Corner-radius-Medium);
-}
-
-.link.active,
-.link:hover {
-  font-weight: 600;
-}

components/Header/TopMenu/Search/index.tsx

@@ -4,15 +4,15 @@ import { useIntl } from "react-intl"
 
 import { SearchIcon } from "@/components/Icons"
 
-import TopMenuButton from "../TopMenuButton"
+import styles from "./search.module.css"
 
 export default function Search() {
   const intl = useIntl()
 
   return (
-    <TopMenuButton>
+    <button type="button" className={styles.button}>
       <SearchIcon width={20} height={20} color="burgundy" />
       {intl.formatMessage({ id: "Find booking" })}
-    </TopMenuButton>
+    </button>
   )
 }

components/Header/TopMenu/Search/search.module.css

@@ -1,9 +1,20 @@
 .button {
   background-color: transparent;
   color: var(--Base-Text-High-contrast);
+  font-family: var(--typography-Caption-Regular-fontFamily);
+  font-size: var(--typography-Caption-Regular-fontSize);
   border-width: 0;
+  padding: 0;
   cursor: pointer;
   display: flex;
   gap: var(--Spacing-x1);
   align-items: center;
+  width: 100%;
+}
+
+@media screen and (min-width: 768px) {
+  .button {
+    font-size: var(--typography-Body-Bold-fontSize);
+    font-family: var(--typography-Body-Bold-fontFamily);
+  }
 }

components/Header/TopMenu/TopMenuButton/index.tsx

@@ -1,14 +0,0 @@
-import styles from "./topMenuButton.module.css"
-
-import { TopMenuButtonProps } from "@/types/components/header/topMenuButton"
-
-export default function TopMenuButton({
-  children,
-  ...props
-}: TopMenuButtonProps) {
-  return (
-    <button type="button" className={styles.button} {...props}>
-      {children}
-    </button>
-  )
-}

components/Header/TopMenu/TopMenuButton/topMenuButton.module.css

@@ -1,9 +0,0 @@
-.button {
-  background-color: transparent;
-  color: var(--Base-Text-High-contrast);
-  border-width: 0;
-  cursor: pointer;
-  display: flex;
-  gap: var(--Spacing-x1);
-  align-items: center;
-}

components/Header/TopMenu/index.tsx

@@ -1,32 +1,29 @@
-import { serverClient } from "@/lib/trpc/server"
-
-import { GiftIcon } from "@/components/Icons"
-import Link from "@/components/TempDesignSystem/Link"
+import { GiftIcon, SearchIcon } from "@/components/Icons"
+import LanguageSwitcher from "@/components/LanguageSwitcher"
 import { getIntl } from "@/i18n"
 
-import LanguageSwitcher from "./LanguageSwitcher"
-import Search from "./Search"
+import HeaderLink from "../HeaderLink"
 
 import styles from "./topMenu.module.css"
 
-export default async function TopMenu() {
-  const intl = await getIntl()
-  const languages = await serverClient().contentstack.languageSwitcher.get()
+import { TopMenuProps } from "@/types/components/header/topMenu"
 
-  if (!languages) {
-    return null
-  }
+export default async function TopMenu({ languageUrls }: TopMenuProps) {
+  const intl = await getIntl()
 
   return (
     <div className={styles.topMenu}>
       <div className={styles.content}>
-        <Link variant="icon" color="burgundy" href="#" size="small">
+        <HeaderLink href="#">
           <GiftIcon width={20} height={20} color="burgundy" />
           {intl.formatMessage({ id: "Join Scandic Friends" })}
-        </Link>
+        </HeaderLink>
         <div className={styles.right}>
-          <LanguageSwitcher urls={languages.urls} />
-          <Search />
+          <LanguageSwitcher urls={languageUrls} />
+          <HeaderLink href="#">
+            <SearchIcon width={20} height={20} color="burgundy" />
+            {intl.formatMessage({ id: "Find booking" })}
+          </HeaderLink>
         </div>
       </div>
     </div>

components/Header/TopMenu/topMenu.module.css

@@ -1,4 +1,5 @@
 .topMenu {
+  display: none;
   background-color: var(--Base-Surface-Subtle-Normal);
   padding: var(--Spacing-x2) var(--Spacing-x-one-and-half);
   border-bottom: 1px solid var(--Base-Border-Subtle);
@@ -17,3 +18,9 @@
   gap: var(--Spacing-x2);
   align-items: center;
 }
+
+@media screen and (min-width: 768px) {
+  .topMenu {
+    display: block;
+  }
+}