feat(SW-184): implementing mobile design

components/LanguageSwitcher/index.tsx

@@ -0,0 +1,64 @@
+"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 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}>
+      <button
+        type="button"
+        className={styles.button}
+        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"
+        />
+      </button>
+
+      <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/LanguageSwitcher/languageSwitcher.module.css

@@ -0,0 +1,94 @@
+.languageSwitcher {
+  position: relative;
+}
+
+.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: grid;
+  grid-template-columns: repeat(2, max-content) 1fr;
+  gap: var(--Spacing-x1);
+  align-items: center;
+  width: 100%;
+}
+
+.chevron {
+  justify-self: end;
+  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;
+}
+
+@media screen and (min-width: 768px) {
+  .button {
+    grid-template-columns: repeat(3, max-content);
+    font-size: var(--typography-Body-Bold-fontSize);
+    font-family: var(--typography-Body-Bold-fontFamily);
+  }
+}