feat(SW-184): added language switcher

app/[lang]/(live)/@header/[...paths]/layout.tsx

@@ -5,5 +5,6 @@ import type { LangParams, LayoutArgs } from "@/types/params"
 
 export default function HeaderLayout({ params }: LayoutArgs<LangParams>) {
   setLang(params.lang)
+
   return <Header />
 }

app/[lang]/(live)/@header/page.tsx

@@ -1,9 +1,4 @@
-import { baseUrls } from "@/constants/routes/baseUrls"
+import Header from "@/components/Header"
-import { serverClient } from "@/lib/trpc/server"
-
-import Header from "@/components/Current/Header"
-import LanguageSwitcher from "@/components/Current/Header/LanguageSwitcher"
-import MyPagesMobileDropdown from "@/components/Current/Header/MyPagesMobileDropdown"
 import { setLang } from "@/i18n/serverContext"
 
 import { LangParams, PageArgs } from "@/types/params"
@@ -11,11 +6,5 @@ import { LangParams, PageArgs } from "@/types/params"
 export default async function HeaderPage({ params }: PageArgs<LangParams>) {
   setLang(params.lang)
 
-  const navigation = await serverClient().contentstack.myPages.navigation.get()
+  return <Header />
-  return (
-    <Header
-      myPagesMobileDropdown={<MyPagesMobileDropdown navigation={navigation} />}
-      languageSwitcher={<LanguageSwitcher urls={baseUrls} />}
-    />
-  )
 }

components/Header/MainMenu/MyPagesMenu/index.tsx

@@ -27,8 +27,6 @@ export default function MyPagesMenu({
     return null
   }
 
-  console.log(navigation)
-
   return (
     <nav
       className={`${styles.myPagesMenu} ${isMyPagesMobileMenuOpen ? styles.isExpanded : ""}`}

components/Header/MainMenu/MyPagesMenu/myPagesMenu.module.css

@@ -2,15 +2,12 @@
   position: absolute;
   top: 46px;
   right: 0;
-  background-color: #fff;
+  background-color: var(--Base-Surface-Primary-light-Normal);
-  border-top: 1px solid #e3e0db;
-  display: none;
-  list-style: none;
-  overflow-y: visible;
-  margin: 0;
   padding: var(--Spacing-x2) var(--Spacing-x4);
   border-radius: var(--Corner-radius-Large);
   box-shadow: 0px 0px 14px 6px #0000001a;
+  z-index: 1;
+  display: none;
 }
 
 .myPagesMenu.isExpanded {

components/Header/TopMenu/LanguageSwitcher/index.tsx

@@ -1,30 +1,65 @@
 "use client"
 
+import Link from "next/link"
 import { useState } from "react"
 
-import { ChevronDownIcon, GlobeIcon } from "@/components/Icons"
+import { Lang, languages } from "@/constants/languages"
+
+import { CheckIcon, ChevronDownIcon, GlobeIcon } from "@/components/Icons"
+import useLang from "@/hooks/useLang"
 
 import Button from "../Button"
 
 import styles from "./languageSwitcher.module.css"
 
-export default function LanguageSwitcher() {
+import { LanguageSwitcherProps } from "@/types/components/current/languageSwitcher"
+
+export default function LanguageSwitcher({ urls }: LanguageSwitcherProps) {
+  const currentLanguage = useLang()
   const [isExpanded, setIsExpanded] = useState(false)
 
-  function handleButtonClick() {
+  function toggleExpand() {
     setIsExpanded((prev) => !prev)
   }
 
+  const urlKeys = Object.keys(urls) as Lang[]
+
   return (
-    <Button onClick={handleButtonClick}>
+    <div className={styles.languageSwitcher}>
-      <GlobeIcon width={20} height={20} color="burgundy" />
+      <Button onClick={toggleExpand}>
-      <span>English</span>
+        <GlobeIcon width={20} height={20} color="burgundy" />
-      <ChevronDownIcon
+        <span>{languages[currentLanguage]}</span>
-        className={`${styles.chevron} ${isExpanded ? styles.isExpanded : ""}`}
+        <ChevronDownIcon
-        width={20}
+          className={`${styles.chevron} ${isExpanded ? styles.isExpanded : ""}`}
-        height={20}
+          width={20}
-        color="burgundy"
+          height={20}
-      />
+          color="burgundy"
-    </Button>
+        />
+      </Button>
+      <div
+        className={`${styles.dropdown} ${isExpanded ? 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,3 +1,7 @@
+.languageSwitcher {
+  position: relative;
+}
+
 .button {
   background-color: transparent;
   color: var(--Base-Text-High-contrast);
@@ -15,3 +19,62 @@
 .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/LanguageSwitcher/languageSwitcher.ts

@@ -0,0 +1,5 @@
+import { LanguageSwitcherData } from "@/types/requests/languageSwitcher"
+
+export interface LanguageSwitcherProps {
+  urls: LanguageSwitcherData
+}

components/Header/TopMenu/index.tsx

@@ -1,3 +1,5 @@
+import { serverClient } from "@/lib/trpc/server"
+
 import { GiftIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
 
@@ -7,6 +9,12 @@ import Search from "./Search"
 import styles from "./topMenu.module.css"
 
 export default async function TopMenu() {
+  const languages = await serverClient().contentstack.languageSwitcher.get()
+
+  if (!languages) {
+    return null
+  }
+
   return (
     <div className={styles.topMenu}>
       <div className={styles.content}>
@@ -15,7 +23,7 @@ export default async function TopMenu() {
           Join Scandic Friends
         </Link>
         <div className={styles.right}>
-          <LanguageSwitcher />
+          <LanguageSwitcher urls={languages.urls} />
           <Search />
         </div>
       </div>

components/Header/TopMenu/topMenu.module.css

@@ -5,6 +5,7 @@
 }
 
 .content {
+  position: relative;
   max-width: 89.5rem;
   margin: 0 auto;
   display: flex;

components/Header/header.module.css

@@ -2,5 +2,5 @@
   position: relative;
   font-family: var(--typography-Body-Regular-fontFamily);
   color: var(--Base-Text-High-contrast);
-  z-index: 1;
+  z-index: 10;
 }

stores/main-menu.ts

@@ -21,7 +21,6 @@ const useDropdownStore = create<DropdownState>((set) => ({
   toggleMyPagesMobileMenu: () =>
     set((state) => {
       // Close the other dropdown if it's open
-      console.log({ state })
       if (!state.isMyPagesMobileMenuOpen && state.isHamburgerMenuOpen) {
         set({ isHamburgerMenuOpen: false })
       }