From d1a2175804172b38b994369836dd0dde3a0a38f9 Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@weahead.se>
Date: Mon, 26 Aug 2024 08:52:32 +0200
Subject: [PATCH] chore: cleanup

---
 app/globals.css                               |  4 +-
 .../Header/HeaderLink/headerLink.module.css   |  2 +-
 components/Header/HeaderLink/index.tsx        |  4 +-
 components/Header/MainMenu/Avatar/index.tsx   |  2 +-
 .../Header/MainMenu/MainMenuButton/index.tsx  |  2 +-
 .../Header/MainMenu/MobileMenu/index.tsx      | 10 ++-
 .../MainMenu/MobileMenu/mobileMenu.module.css |  4 +-
 .../Header/MainMenu/MyPagesMenu/index.tsx     |  2 +-
 .../MyPagesMenu/myPagesMenu.module.css        |  8 +-
 .../MainMenu/MyPagesMenuContent/index.tsx     |  2 +-
 .../MainMenu/MyPagesMobileMenu/index.tsx      |  2 +-
 .../myPagesMobileMenu.module.css              |  3 +-
 .../NavigationMenuItem/index.tsx              |  2 +-
 .../navigationMenuItem.module.css             |  2 +-
 .../Header/MainMenu/NavigationMenu/index.tsx  |  2 +-
 components/Header/MainMenu/index.tsx          | 16 ++--
 .../Header/MainMenu/mainMenu.module.css       |  2 +-
 components/Header/TopMenu/Search/index.tsx    | 18 ----
 .../Header/TopMenu/Search/search.module.css   | 20 -----
 components/Header/TopMenu/index.tsx           |  4 +-
 components/Header/header.module.css           |  1 -
 .../LanguageSwitcherContent/index.tsx         | 10 +--
 ...css => languageSwitcherContent.module.css} | 84 ------------------
 .../LanguageSwitcherContent/variants.ts       | 17 ----
 components/LanguageSwitcher/index.tsx         |  6 +-
 .../languageSwitcher.module.css               | 88 +------------------
 components/LanguageSwitcher/variants.ts       | 17 ----
 hooks/useTrapFocus.ts                         |  1 -
 i18n/dictionaries/da.json                     |  2 +-
 i18n/dictionaries/de.json                     |  2 +-
 i18n/dictionaries/en.json                     |  2 +-
 i18n/dictionaries/fi.json                     |  4 +-
 i18n/dictionaries/no.json                     |  4 +-
 i18n/dictionaries/sv.json                     |  4 +-
 types/components/header/avatar.ts             |  2 +-
 types/components/header/headerLink.ts         |  2 +-
 types/components/header/languageSwitcher.ts   | 10 ---
 types/components/header/mainMenu.ts           |  2 +-
 types/components/header/mobileMenu.ts         |  2 +-
 types/components/header/myPagesMenu.ts        |  2 +-
 types/components/header/navigationMenu.ts     |  2 +-
 types/components/header/navigationMenuItem.ts |  2 +-
 types/components/header/topMenu.ts            |  2 +-
 .../languageSwitcher/languageSwitcher.ts      |  6 ++
 utils/tabbable.ts                             |  9 --
 45 files changed, 70 insertions(+), 324 deletions(-)
 delete mode 100644 components/Header/TopMenu/Search/index.tsx
 delete mode 100644 components/Header/TopMenu/Search/search.module.css
 rename components/LanguageSwitcher/LanguageSwitcherContent/{languageSwitcher.module.css => languageSwitcherContent.module.css} (51%)
 delete mode 100644 components/LanguageSwitcher/LanguageSwitcherContent/variants.ts
 delete mode 100644 components/LanguageSwitcher/variants.ts
 delete mode 100644 types/components/header/languageSwitcher.ts
 create mode 100644 types/components/languageSwitcher/languageSwitcher.ts

diff --git a/app/globals.css b/app/globals.css
index 531d007d5..71027f9e7 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -104,8 +104,10 @@
   --max-width-text-block: 49.5rem;
   --mobile-site-header-height: 70.047px;
   --max-width-navigation: 89.5rem;
+
   --main-menu-mobile-height: 75px;
-  --mobile-menu-overlay-z-index: 10;
+
+  --menu-overlay-z-index: 10;
 }
 
 * {
diff --git a/components/Header/HeaderLink/headerLink.module.css b/components/Header/HeaderLink/headerLink.module.css
index 7049d4857..198e0c61b 100644
--- a/components/Header/HeaderLink/headerLink.module.css
+++ b/components/Header/HeaderLink/headerLink.module.css
@@ -1,4 +1,4 @@
-.topLink {
+.headerLink {
   display: flex;
   align-items: center;
   gap: var(--Spacing-x1);
diff --git a/components/Header/HeaderLink/index.tsx b/components/Header/HeaderLink/index.tsx
index 9b2195ebb..2f05dbec2 100644
--- a/components/Header/HeaderLink/index.tsx
+++ b/components/Header/HeaderLink/index.tsx
@@ -2,11 +2,11 @@ import Link from "@/components/TempDesignSystem/Link"
 
 import styles from "./headerLink.module.css"
 
-import { HeaderLinkProps } from "@/types/components/header/headerLink"
+import type { HeaderLinkProps } from "@/types/components/header/headerLink"
 
 export default function HeaderLink({ children, ...props }: HeaderLinkProps) {
   return (
-    <Link color="burgundy" className={styles.topLink} {...props}>
+    <Link color="burgundy" className={styles.headerLink} {...props}>
       {children}
     </Link>
   )
diff --git a/components/Header/MainMenu/Avatar/index.tsx b/components/Header/MainMenu/Avatar/index.tsx
index 7a0bc34c1..4ab15108d 100644
--- a/components/Header/MainMenu/Avatar/index.tsx
+++ b/components/Header/MainMenu/Avatar/index.tsx
@@ -3,7 +3,7 @@ import Image from "@/components/Image"
 
 import styles from "./avatar.module.css"
 
-import { AvatarProps } from "@/types/components/header/avatar"
+import type { AvatarProps } from "@/types/components/header/avatar"
 
 export default function Avatar({ image, initials }: AvatarProps) {
   let classNames = [styles.avatar]
diff --git a/components/Header/MainMenu/MainMenuButton/index.tsx b/components/Header/MainMenu/MainMenuButton/index.tsx
index c45cc569f..b5b3ae55a 100644
--- a/components/Header/MainMenu/MainMenuButton/index.tsx
+++ b/components/Header/MainMenu/MainMenuButton/index.tsx
@@ -1,6 +1,6 @@
 import styles from "./menuButton.module.css"
 
-import { MainMenuButtonProps } from "@/types/components/header/mainMenuButton"
+import type { MainMenuButtonProps } from "@/types/components/header/mainMenuButton"
 
 export default function MainMenuButton({
   className = "",
diff --git a/components/Header/MainMenu/MobileMenu/index.tsx b/components/Header/MainMenu/MobileMenu/index.tsx
index 99498bd6f..c59fdc7c1 100644
--- a/components/Header/MainMenu/MobileMenu/index.tsx
+++ b/components/Header/MainMenu/MobileMenu/index.tsx
@@ -14,7 +14,7 @@ import NavigationMenu from "../NavigationMenu"
 
 import styles from "./mobileMenu.module.css"
 
-import { MobileMenuProps } from "@/types/components/header/mobileMenu"
+import type { MobileMenuProps } from "@/types/components/header/mobileMenu"
 
 export default function MobileMenu({
   mainNavigation,
@@ -24,8 +24,10 @@ export default function MobileMenu({
   const {
     isHamburgerMenuOpen,
     isMyPagesMobileMenuOpen,
+    isLanguageSwitcherOpen,
     toggleHamburgerMenu,
     toggleMyPagesMobileMenu,
+    toggleLanguageSwitcher,
   } = useDropdownStore()
 
   useHandleKeyUp((event: KeyboardEvent) => {
@@ -38,6 +40,10 @@ export default function MobileMenu({
     if (isMyPagesMobileMenuOpen) {
       toggleMyPagesMobileMenu()
     } else {
+      if (isLanguageSwitcherOpen) {
+        toggleLanguageSwitcher()
+      }
+
       toggleHamburgerMenu()
     }
   }
@@ -73,7 +79,7 @@ export default function MobileMenu({
               <ServiceIcon width={20} height={20} color="burgundy" />
               {intl.formatMessage({ id: "Customer service" })}
             </HeaderLink>
-            <LanguageSwitcher variant="mobileHeader" urls={languageUrls} />
+            <LanguageSwitcher type="mobileHeader" urls={languageUrls} />
           </footer>
         </Dialog>
       </Modal>
diff --git a/components/Header/MainMenu/MobileMenu/mobileMenu.module.css b/components/Header/MainMenu/MobileMenu/mobileMenu.module.css
index c1fd26990..797b3b427 100644
--- a/components/Header/MainMenu/MobileMenu/mobileMenu.module.css
+++ b/components/Header/MainMenu/MobileMenu/mobileMenu.module.css
@@ -25,7 +25,7 @@
   display: inline-block;
   height: 3px;
   position: relative;
-  transition: all 0.2s;
+  transition: all 0.3s;
   width: 32px;
 }
 
@@ -72,7 +72,7 @@
   width: 100%;
   background-color: var(--Base-Surface-Primary-light-Normal);
   transition: right 0.3s;
-  z-index: var(--mobile-menu-overlay-z-index);
+  z-index: var(--menu-overlay-z-index);
 }
 
 .modal[data-entering] {
diff --git a/components/Header/MainMenu/MyPagesMenu/index.tsx b/components/Header/MainMenu/MyPagesMenu/index.tsx
index 78a8987db..5d408cd32 100644
--- a/components/Header/MainMenu/MyPagesMenu/index.tsx
+++ b/components/Header/MainMenu/MyPagesMenu/index.tsx
@@ -16,7 +16,7 @@ import MyPagesMenuContent from "../MyPagesMenuContent"
 
 import styles from "./myPagesMenu.module.css"
 
-import { MyPagesMenuProps } from "@/types/components/header/myPagesMenu"
+import type { MyPagesMenuProps } from "@/types/components/header/myPagesMenu"
 
 export default function MyPagesMenu({ navigation, user }: MyPagesMenuProps) {
   const intl = useIntl()
diff --git a/components/Header/MainMenu/MyPagesMenu/myPagesMenu.module.css b/components/Header/MainMenu/MyPagesMenu/myPagesMenu.module.css
index 6f5a1805b..39002b177 100644
--- a/components/Header/MainMenu/MyPagesMenu/myPagesMenu.module.css
+++ b/components/Header/MainMenu/MyPagesMenu/myPagesMenu.module.css
@@ -9,7 +9,7 @@
   }
 
   .chevron {
-    transition: transform 0.2s;
+    transition: transform 0.3s;
   }
 
   .chevron.isExpanded {
@@ -18,13 +18,13 @@
 
   .dropdown {
     position: absolute;
-    top: 46px;
+    top: 2.875rem; /* 2.875rem is the height of the main menu + bottom padding */
     right: 0;
     background-color: var(--Base-Surface-Primary-light-Normal);
     border-radius: var(--Corner-radius-Large);
-    box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0 0.875rem 0.375rem rgba(0, 0, 0, 0.1);
     min-width: 20rem;
-    z-index: 1;
+    z-index: var(--menu-overlay-z-index);
   }
 
   /* Triangle above dropdown */
diff --git a/components/Header/MainMenu/MyPagesMenuContent/index.tsx b/components/Header/MainMenu/MyPagesMenuContent/index.tsx
index e87c25a94..dc70f3b68 100644
--- a/components/Header/MainMenu/MyPagesMenuContent/index.tsx
+++ b/components/Header/MainMenu/MyPagesMenuContent/index.tsx
@@ -14,7 +14,7 @@ import { useTrapFocus } from "@/hooks/useTrapFocus"
 
 import styles from "./myPagesMenuContent.module.css"
 
-import { MyPagesMenuContentProps } from "@/types/components/header/myPagesMenu"
+import type { MyPagesMenuContentProps } from "@/types/components/header/myPagesMenu"
 
 export default function MyPagesMenuContent({
   navigation,
diff --git a/components/Header/MainMenu/MyPagesMobileMenu/index.tsx b/components/Header/MainMenu/MyPagesMobileMenu/index.tsx
index b976c37eb..51700f72c 100644
--- a/components/Header/MainMenu/MyPagesMobileMenu/index.tsx
+++ b/components/Header/MainMenu/MyPagesMobileMenu/index.tsx
@@ -14,7 +14,7 @@ import MyPagesMenuContent from "../MyPagesMenuContent"
 
 import styles from "./myPagesMobileMenu.module.css"
 
-import { MyPagesMenuProps } from "@/types/components/header/myPagesMenu"
+import type { MyPagesMenuProps } from "@/types/components/header/myPagesMenu"
 
 export default function MyPagesMobileMenu({
   navigation,
diff --git a/components/Header/MainMenu/MyPagesMobileMenu/myPagesMobileMenu.module.css b/components/Header/MainMenu/MyPagesMobileMenu/myPagesMobileMenu.module.css
index 6b251ea49..eee75f79e 100644
--- a/components/Header/MainMenu/MyPagesMobileMenu/myPagesMobileMenu.module.css
+++ b/components/Header/MainMenu/MyPagesMobileMenu/myPagesMobileMenu.module.css
@@ -15,8 +15,7 @@
   bottom: 0;
   width: 100%;
   background-color: var(--Base-Surface-Primary-light-Normal);
-  transition: right 0.3s;
-  z-index: var(--mobile-menu-overlay-z-index);
+  z-index: var(--menu-overlay-z-index);
 }
 
 .modal[data-entering] {
diff --git a/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/index.tsx b/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/index.tsx
index 4efc44086..c7893afc8 100644
--- a/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/index.tsx
+++ b/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/index.tsx
@@ -10,7 +10,7 @@ import { navigationMenuItemVariants } from "./variants"
 
 import styles from "./navigationMenuItem.module.css"
 
-import { NavigationMenuItemProps } from "@/types/components/header/navigationMenuItem"
+import type { NavigationMenuItemProps } from "@/types/components/header/navigationMenuItem"
 
 export default function MenuItem({ item, variant }: NavigationMenuItemProps) {
   const { children, title, href, seeAllLinkText, infoCard } = item
diff --git a/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css b/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css
index b509f4e73..2c6c79180 100644
--- a/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css
+++ b/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css
@@ -6,7 +6,7 @@
 }
 
 .chevron {
-  transition: transform 0.2s;
+  transition: transform 0.3s;
 }
 
 .chevron.isExpanded {
diff --git a/components/Header/MainMenu/NavigationMenu/index.tsx b/components/Header/MainMenu/NavigationMenu/index.tsx
index 08534f56e..3a4f36d00 100644
--- a/components/Header/MainMenu/NavigationMenu/index.tsx
+++ b/components/Header/MainMenu/NavigationMenu/index.tsx
@@ -3,7 +3,7 @@ import { navigationMenuVariants } from "./variants"
 
 import styles from "./navigationMenu.module.css"
 
-import { NavigationMenuProps } from "@/types/components/header/navigationMenu"
+import type { NavigationMenuProps } from "@/types/components/header/navigationMenu"
 
 export default function NavigationMenu({
   items,
diff --git a/components/Header/MainMenu/index.tsx b/components/Header/MainMenu/index.tsx
index 608c4c505..8b943aa05 100644
--- a/components/Header/MainMenu/index.tsx
+++ b/components/Header/MainMenu/index.tsx
@@ -17,7 +17,7 @@ import NavigationMenu from "./NavigationMenu"
 
 import styles from "./mainMenu.module.css"
 
-import { MainMenuProps } from "@/types/components/header/mainMenu"
+import type { MainMenuProps } from "@/types/components/header/mainMenu"
 
 export default async function MainMenu({ languageUrls }: MainMenuProps) {
   const intl = await getIntl()
@@ -30,7 +30,7 @@ export default async function MainMenu({ languageUrls }: MainMenuProps) {
   return (
     <div className={styles.mainMenu}>
       <nav className={styles.nav}>
-        <NextLink className={styles.logoLink} href="/">
+        <NextLink className={styles.logoLink} href={`/${lang}`}>
           <Image
             alt={intl.formatMessage({ id: "Back to scandichotels.com" })}
             className={styles.logo}
@@ -44,16 +44,10 @@ export default async function MainMenu({ languageUrls }: MainMenuProps) {
         </NextLink>
         <div className={styles.menus}>
           <NavigationMenu items={navigationMenuItems} />
-          {true ? (
+          {user ? (
             <>
-              <MyPagesMenu
-                navigation={myPagesNavigation}
-                user={{ firstName: "Hubba", lastName: "Bubba" }}
-              />
-              <MyPagesMobileMenu
-                navigation={myPagesNavigation}
-                user={{ firstName: "Hubba", lastName: "Bubba" }}
-              />
+              <MyPagesMenu navigation={myPagesNavigation} user={user} />
+              <MyPagesMobileMenu navigation={myPagesNavigation} user={user} />
             </>
           ) : (
             <Link
diff --git a/components/Header/MainMenu/mainMenu.module.css b/components/Header/MainMenu/mainMenu.module.css
index 5cb52d561..953966289 100644
--- a/components/Header/MainMenu/mainMenu.module.css
+++ b/components/Header/MainMenu/mainMenu.module.css
@@ -26,7 +26,7 @@
 }
 
 .logo {
-  width: 6.4375rem;
+  height: 1.375rem;
 }
 
 .loginLink {
diff --git a/components/Header/TopMenu/Search/index.tsx b/components/Header/TopMenu/Search/index.tsx
deleted file mode 100644
index abd840bc0..000000000
--- a/components/Header/TopMenu/Search/index.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-"use client"
-
-import { useIntl } from "react-intl"
-
-import { SearchIcon } from "@/components/Icons"
-
-import styles from "./search.module.css"
-
-export default function Search() {
-  const intl = useIntl()
-
-  return (
-    <button type="button" className={styles.button}>
-      <SearchIcon width={20} height={20} color="burgundy" />
-      {intl.formatMessage({ id: "Find booking" })}
-    </button>
-  )
-}
diff --git a/components/Header/TopMenu/Search/search.module.css b/components/Header/TopMenu/Search/search.module.css
deleted file mode 100644
index 45d5bb1b1..000000000
--- a/components/Header/TopMenu/Search/search.module.css
+++ /dev/null
@@ -1,20 +0,0 @@
-.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);
-  }
-}
diff --git a/components/Header/TopMenu/index.tsx b/components/Header/TopMenu/index.tsx
index cf2fd38ac..898da8d17 100644
--- a/components/Header/TopMenu/index.tsx
+++ b/components/Header/TopMenu/index.tsx
@@ -6,7 +6,7 @@ import HeaderLink from "../HeaderLink"
 
 import styles from "./topMenu.module.css"
 
-import { TopMenuProps } from "@/types/components/header/topMenu"
+import type { TopMenuProps } from "@/types/components/header/topMenu"
 
 export default async function TopMenu({ languageUrls }: TopMenuProps) {
   const intl = await getIntl()
@@ -19,7 +19,7 @@ export default async function TopMenu({ languageUrls }: TopMenuProps) {
           {intl.formatMessage({ id: "Join Scandic Friends" })}
         </HeaderLink>
         <div className={styles.right}>
-          <LanguageSwitcher variant="desktopHeader" urls={languageUrls} />
+          <LanguageSwitcher type="desktopHeader" urls={languageUrls} />
           <HeaderLink href="#">
             <SearchIcon width={20} height={20} color="burgundy" />
             {intl.formatMessage({ id: "Find booking" })}
diff --git a/components/Header/header.module.css b/components/Header/header.module.css
index 1c3360388..a3d728549 100644
--- a/components/Header/header.module.css
+++ b/components/Header/header.module.css
@@ -1,5 +1,4 @@
 .header {
   font-family: var(--typography-Body-Regular-fontFamily);
   color: var(--Base-Text-High-contrast);
-  z-index: 10;
 }
diff --git a/components/LanguageSwitcher/LanguageSwitcherContent/index.tsx b/components/LanguageSwitcher/LanguageSwitcherContent/index.tsx
index 09a99926b..6a1a69a96 100644
--- a/components/LanguageSwitcher/LanguageSwitcherContent/index.tsx
+++ b/components/LanguageSwitcher/LanguageSwitcherContent/index.tsx
@@ -11,13 +11,13 @@ import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
 import { useTrapFocus } from "@/hooks/useTrapFocus"
 
-import styles from "./languageSwitcher.module.css"
+import styles from "./languageSwitcherContent.module.css"
 
-import { LanguageSwitcherProps } from "@/types/components/header/languageSwitcher"
+import type { LanguageSwitcherProps } from "@/types/components/languageSwitcher/languageSwitcher"
 
 export default function LanguageSwitcherContent({
   urls,
-  variant,
+  type,
 }: LanguageSwitcherProps) {
   const intl = useIntl()
   const currentLanguage = useLang()
@@ -26,8 +26,8 @@ export default function LanguageSwitcherContent({
   const urlKeys = Object.keys(urls) as Lang[]
 
   return (
-    <div className={styles.content} ref={languageSwitcherRef}>
-      {variant === "mobileHeader" ? (
+    <div className={styles.languageSwitcherContent} ref={languageSwitcherRef}>
+      {type === "mobileHeader" ? (
         <div className={styles.backWrapper}>
           <button
             type="button"
diff --git a/components/LanguageSwitcher/LanguageSwitcherContent/languageSwitcher.module.css b/components/LanguageSwitcher/LanguageSwitcherContent/languageSwitcherContent.module.css
similarity index 51%
rename from components/LanguageSwitcher/LanguageSwitcherContent/languageSwitcher.module.css
rename to components/LanguageSwitcher/LanguageSwitcherContent/languageSwitcherContent.module.css
index 4f253bd4b..dfbcd6c00 100644
--- a/components/LanguageSwitcher/LanguageSwitcherContent/languageSwitcher.module.css
+++ b/components/LanguageSwitcher/LanguageSwitcherContent/languageSwitcherContent.module.css
@@ -1,52 +1,3 @@
-@keyframes slide-in {
-  from {
-    right: -100vw;
-  }
-
-  to {
-    right: 0;
-  }
-}
-
-.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: fixed;
-  top: var(--main-menu-mobile-height);
-  right: -100vw;
-  bottom: 0;
-  width: 100%;
-  background-color: var(--Base-Surface-Primary-light-Normal);
-  transition: right 0.3s;
-}
-
-.dropdown.isExpanded {
-  display: block;
-  right: 0;
-}
-
 .backWrapper {
   background-color: var(--Base-Surface-Secondary-light-Normal);
   padding: var(--Spacing-x2);
@@ -106,10 +57,6 @@
 }
 
 @media screen and (min-width: 768px) {
-  .languageSwitcher {
-    position: relative;
-  }
-
   .backWrapper,
   .backButton {
     display: none;
@@ -123,37 +70,6 @@
     display: none;
   }
 
-  .dropdown {
-    position: absolute;
-    top: 2.25rem;
-    background-color: var(--Base-Surface-Primary-light-Normal);
-    border-radius: var(--Corner-radius-Large);
-    box-shadow: 0px 0px 14px 6px #0000001a;
-    display: none;
-    min-width: 12.5rem;
-    z-index: 1;
-    bottom: auto;
-  }
-
-  /* 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;
-  }
-
-  .button {
-    grid-template-columns: repeat(3, max-content);
-    font-size: var(--typography-Body-Bold-fontSize);
-    font-family: var(--typography-Body-Bold-fontFamily);
-  }
-
   .link.active:not(:hover) {
     background-color: transparent;
   }
diff --git a/components/LanguageSwitcher/LanguageSwitcherContent/variants.ts b/components/LanguageSwitcher/LanguageSwitcherContent/variants.ts
deleted file mode 100644
index b0c919382..000000000
--- a/components/LanguageSwitcher/LanguageSwitcherContent/variants.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { cva } from "class-variance-authority"
-
-import styles from "./languageSwitcher.module.css"
-
-export const languageSwitcherContentVariants = cva(styles.languageSwitcher, {
-  variants: {
-    variant: {
-      mobileHeader: styles.mobileHeader,
-      mobileFooter: styles.mobileFooter,
-      desktopHeader: styles.desktopHeader,
-      desktopFooter: styles.desktopFooter,
-    },
-  },
-  defaultVariants: {
-    variant: "desktopHeader",
-  },
-})
diff --git a/components/LanguageSwitcher/index.tsx b/components/LanguageSwitcher/index.tsx
index ed59a6511..be8a2bebb 100644
--- a/components/LanguageSwitcher/index.tsx
+++ b/components/LanguageSwitcher/index.tsx
@@ -13,11 +13,11 @@ import LanguageSwitcherContent from "./LanguageSwitcherContent"
 
 import styles from "./languageSwitcher.module.css"
 
-import { LanguageSwitcherProps } from "@/types/components/header/languageSwitcher"
+import type { LanguageSwitcherProps } from "@/types/components/languageSwitcher/languageSwitcher"
 
 export default function LanguageSwitcher({
   urls,
-  variant,
+  type,
 }: LanguageSwitcherProps) {
   const intl = useIntl()
   const currentLanguage = useLang()
@@ -55,7 +55,7 @@ export default function LanguageSwitcher({
         className={`${styles.dropdown} ${isLanguageSwitcherOpen ? styles.isExpanded : ""}`}
       >
         {isLanguageSwitcherOpen ? (
-          <LanguageSwitcherContent urls={urls} variant={variant} />
+          <LanguageSwitcherContent urls={urls} type={type} />
         ) : null}
       </div>
     </div>
diff --git a/components/LanguageSwitcher/languageSwitcher.module.css b/components/LanguageSwitcher/languageSwitcher.module.css
index 4f253bd4b..89ce55b56 100644
--- a/components/LanguageSwitcher/languageSwitcher.module.css
+++ b/components/LanguageSwitcher/languageSwitcher.module.css
@@ -1,13 +1,3 @@
-@keyframes slide-in {
-  from {
-    right: -100vw;
-  }
-
-  to {
-    right: 0;
-  }
-}
-
 .button {
   background-color: transparent;
   color: var(--Base-Text-High-contrast);
@@ -25,7 +15,7 @@
 
 .chevron {
   justify-self: end;
-  transition: transform 0.2s;
+  transition: transform 0.3s;
 }
 
 .chevron.isExpanded {
@@ -40,6 +30,7 @@
   width: 100%;
   background-color: var(--Base-Surface-Primary-light-Normal);
   transition: right 0.3s;
+  z-index: var(--menu-overlay-z-index);
 }
 
 .dropdown.isExpanded {
@@ -47,82 +38,11 @@
   right: 0;
 }
 
-.backWrapper {
-  background-color: var(--Base-Surface-Secondary-light-Normal);
-  padding: var(--Spacing-x2);
-}
-
-.backButton {
-  background-color: transparent;
-  border: none;
-  color: var(--Base-Text-High-contrast);
-  font-family: var(--typography-Subtitle-1-fontFamily);
-  font-weight: var(--typography-Subtitle-1-fontWeight);
-  font-size: var(--typography-Subtitle-1-Mobile-fontSize);
-  padding: 0;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: var(--Spacing-x1);
-}
-
-.languageWrapper {
-  display: grid;
-  gap: var(--Spacing-x3);
-  padding: var(--Spacing-x3) var(--Spacing-x2);
-}
-
-.subtitle {
-  font-family: var(--typography-Subtitle-2-fontFamily);
-  font-size: var(--typography-Subtitle-2-Mobile-fontSize);
-  font-weight: var(--typography-Subtitle-2-fontWeight);
-  color: var(--Base-Text-High-contrast, #4d001b);
-}
-
-.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;
-  border-radius: var(--Corner-radius-Medium);
-}
-
-.link.active,
-.link:hover {
-  background-color: var(--Base-Surface-Primary-light-Hover-alt);
-  font-weight: 600;
-}
-
 @media screen and (min-width: 768px) {
   .languageSwitcher {
     position: relative;
   }
 
-  .backWrapper,
-  .backButton {
-    display: none;
-  }
-
-  .languageWrapper {
-    padding: var(--Spacing-x2) var(--Spacing-x3);
-  }
-
-  .subtitle {
-    display: none;
-  }
-
   .dropdown {
     position: absolute;
     top: 2.25rem;
@@ -153,8 +73,4 @@
     font-size: var(--typography-Body-Bold-fontSize);
     font-family: var(--typography-Body-Bold-fontFamily);
   }
-
-  .link.active:not(:hover) {
-    background-color: transparent;
-  }
 }
diff --git a/components/LanguageSwitcher/variants.ts b/components/LanguageSwitcher/variants.ts
deleted file mode 100644
index 9338ea6d0..000000000
--- a/components/LanguageSwitcher/variants.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { cva } from "class-variance-authority"
-
-import styles from "./languageSwitcher.module.css"
-
-export const languageSwitcherVariants = cva(styles.languageSwitcher, {
-  variants: {
-    variant: {
-      mobileHeader: styles.mobileHeader,
-      mobileFooter: styles.mobileFooter,
-      desktopHeader: styles.desktopHeader,
-      desktopFooter: styles.desktopFooter,
-    },
-  },
-  defaultVariants: {
-    variant: "desktopHeader",
-  },
-})
diff --git a/hooks/useTrapFocus.ts b/hooks/useTrapFocus.ts
index 767143105..b7d1311c8 100644
--- a/hooks/useTrapFocus.ts
+++ b/hooks/useTrapFocus.ts
@@ -45,7 +45,6 @@ export function useTrapFocus(opts?: OptionsType) {
       const first = tabbableElements[0]
       const last = tabbableElements[tabbableElements.length - 1]
 
-      console.log(tabbableElements)
       const currentActiveElement = document.activeElement
       // Scope current tabs to current root element
       if (isWithinCurrentElementScope([...tabbableElements, ref.current])) {
diff --git a/i18n/dictionaries/da.json b/i18n/dictionaries/da.json
index 9f70d0bf6..926556906 100644
--- a/i18n/dictionaries/da.json
+++ b/i18n/dictionaries/da.json
@@ -87,8 +87,8 @@
   "Level 7": "Niveau 7",
   "Level up to unlock": "Stig i niveau for at låse op",
   "Log in": "Log på",
-  "Log in/Join": "Log på/Tilmeld dig",
   "Log in here": "Log ind her",
+  "Log in/Join": "Log på/Tilmeld dig",
   "Log out": "Log ud",
   "Manage preferences": "Administrer præferencer",
   "Meetings & Conferences": "Møder & Konferencer",
diff --git a/i18n/dictionaries/de.json b/i18n/dictionaries/de.json
index 6c033883e..d365e7945 100644
--- a/i18n/dictionaries/de.json
+++ b/i18n/dictionaries/de.json
@@ -86,8 +86,8 @@
   "Level 7": "Level 7",
   "Level up to unlock": "Zum Freischalten aufsteigen",
   "Log in": "Anmeldung",
-  "Log in/Join": "Log in/Anmelden",
   "Log in here": "Hier einloggen",
+  "Log in/Join": "Log in/Anmelden",
   "Log out": "Ausloggen",
   "Manage preferences": "Verwalten von Voreinstellungen",
   "Membership ID copied to clipboard": "Mitglieds-ID in die Zwischenablage kopiert",
diff --git a/i18n/dictionaries/en.json b/i18n/dictionaries/en.json
index cb68d3974..a35660b45 100644
--- a/i18n/dictionaries/en.json
+++ b/i18n/dictionaries/en.json
@@ -92,8 +92,8 @@
   "Level 7": "Level 7",
   "Level up to unlock": "Level up to unlock",
   "Log in": "Log in",
-  "Log in/Join": "Log in/Join",
   "Log in here": "Log in here",
+  "Log in/Join": "Log in/Join",
   "Log out": "Log out",
   "Manage preferences": "Manage preferences",
   "Meetings & Conferences": "Meetings & Conferences",
diff --git a/i18n/dictionaries/fi.json b/i18n/dictionaries/fi.json
index 01f5677a1..b54da3963 100644
--- a/i18n/dictionaries/fi.json
+++ b/i18n/dictionaries/fi.json
@@ -86,8 +86,8 @@
   "Level 6": "Taso 6",
   "Level 7": "Taso 7",
   "Log in": "Kirjaudu sisään",
-  "Log in/Join": "Kirjaudu sisään/Liittyä",
   "Log in here": "Kirjaudu sisään",
+  "Log in/Join": "Kirjaudu sisään/Liittyä",
   "Log out": "Kirjaudu ulos",
   "Manage preferences": "Asetusten hallinta",
   "Meetings & Conferences": "Kokoukset & Konferenssit",
@@ -97,7 +97,7 @@
   "Members": "Jäsenet",
   "Membership cards": "Jäsenkortit",
   "Membership ID": "Jäsentunnus",
-  "Menu": "Menu",
+  "Menu": "Valikko",
   "Modify": "Muokkaa",
   "Month": "Kuukausi",
   "My communication preferences": "Viestintämieltymykseni",
diff --git a/i18n/dictionaries/no.json b/i18n/dictionaries/no.json
index 000517b33..abc05fc5c 100644
--- a/i18n/dictionaries/no.json
+++ b/i18n/dictionaries/no.json
@@ -45,9 +45,9 @@
   "Could not find requested resource": "Kunne ikke finne den forespurte ressursen",
   "Country": "Land",
   "Country code": "Landskode",
-  "Customer service": "Kundeservice",
   "Credit card deleted successfully": "Kredittkort slettet",
   "Current password": "Nåværende passord",
+  "Customer service": "Kundeservice",
   "Date of Birth": "Fødselsdato",
   "Day": "Dag",
   "Description": "Beskrivelse",
@@ -87,8 +87,8 @@
   "Level 7": "Nivå 7",
   "Level up to unlock": "Nivå opp for å låse opp",
   "Log in": "Logg Inn",
-  "Log in/Join": "Logg på/Bli med",
   "Log in here": "Logg inn her",
+  "Log in/Join": "Logg på/Bli med",
   "Log out": "Logg ut",
   "Manage preferences": "Administrer preferanser",
   "Meetings & Conferences": "Møter & Konferanser",
diff --git a/i18n/dictionaries/sv.json b/i18n/dictionaries/sv.json
index 490d65278..9634b8b2d 100644
--- a/i18n/dictionaries/sv.json
+++ b/i18n/dictionaries/sv.json
@@ -89,8 +89,8 @@
   "Level 7": "Nivå 7",
   "Level up to unlock": "Levla upp för att låsa upp",
   "Log in": "Logga in",
-  "Log in/Join": "Logga in/Gå med",
   "Log in here": "Logga in här",
+  "Log in/Join": "Logga in/Gå med",
   "Log out": "Logga ut",
   "Manage preferences": "Hantera inställningar",
   "Meetings & Conferences": "Möten & Konferenser",
@@ -106,8 +106,8 @@
   "My communication preferences": "Mina kommunikationspreferenser",
   "My membership cards": "Mina medlemskort",
   "My pages": "Mina sidor",
-  "My payment cards": "Mina betalningskort",
   "My pages menu": "Mina sidor meny",
+  "My payment cards": "Mina betalningskort",
   "My wishes": "Mina önskningar",
   "New password": "Nytt lösenord",
   "Next": "Nästa",
diff --git a/types/components/header/avatar.ts b/types/components/header/avatar.ts
index 1cb269879..a06a4d2f8 100644
--- a/types/components/header/avatar.ts
+++ b/types/components/header/avatar.ts
@@ -1,4 +1,4 @@
-import { ImageProps } from "next/image"
+import type { ImageProps } from "next/image"
 
 export interface AvatarProps {
   image?: ImageProps
diff --git a/types/components/header/headerLink.ts b/types/components/header/headerLink.ts
index 671ab6d0e..deb1c71ab 100644
--- a/types/components/header/headerLink.ts
+++ b/types/components/header/headerLink.ts
@@ -1,3 +1,3 @@
-import { LinkProps } from "@/components/TempDesignSystem/Link/link"
+import type { LinkProps } from "@/components/TempDesignSystem/Link/link"
 
 export interface HeaderLinkProps extends React.PropsWithChildren<LinkProps> {}
diff --git a/types/components/header/languageSwitcher.ts b/types/components/header/languageSwitcher.ts
deleted file mode 100644
index 694e12b48..000000000
--- a/types/components/header/languageSwitcher.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { VariantProps } from "class-variance-authority"
-
-import { languageSwitcherVariants } from "@/components/LanguageSwitcher/variants"
-
-import { LanguageSwitcherData } from "@/types/requests/languageSwitcher"
-
-export interface LanguageSwitcherProps
-  extends VariantProps<typeof languageSwitcherVariants> {
-  urls: LanguageSwitcherData
-}
diff --git a/types/components/header/mainMenu.ts b/types/components/header/mainMenu.ts
index a867be31b..34906bbd5 100644
--- a/types/components/header/mainMenu.ts
+++ b/types/components/header/mainMenu.ts
@@ -1,4 +1,4 @@
-import { LanguageSwitcherData } from "@/types/requests/languageSwitcher"
+import type { LanguageSwitcherData } from "@/types/requests/languageSwitcher"
 
 export interface MainMenuProps {
   languageUrls: LanguageSwitcherData
diff --git a/types/components/header/mobileMenu.ts b/types/components/header/mobileMenu.ts
index 79f11a563..aa43f1ab0 100644
--- a/types/components/header/mobileMenu.ts
+++ b/types/components/header/mobileMenu.ts
@@ -1,6 +1,6 @@
 import { MainNavigationItem } from "./mainNavigationItem"
 
-import { LanguageSwitcherData } from "@/types/requests/languageSwitcher"
+import type { LanguageSwitcherData } from "@/types/requests/languageSwitcher"
 
 export interface MobileMenuProps {
   languageUrls: LanguageSwitcherData
diff --git a/types/components/header/myPagesMenu.ts b/types/components/header/myPagesMenu.ts
index 8397a9b08..34f925afd 100644
--- a/types/components/header/myPagesMenu.ts
+++ b/types/components/header/myPagesMenu.ts
@@ -1,6 +1,6 @@
 import { navigationQueryRouter } from "@/server/routers/contentstack/myPages/navigation/query"
 
-import { User } from "@/types/user"
+import type { User } from "@/types/user"
 
 type MyPagesNavigation = Awaited<
   ReturnType<(typeof navigationQueryRouter)["get"]>
diff --git a/types/components/header/navigationMenu.ts b/types/components/header/navigationMenu.ts
index 11642b11f..c82b3a7ef 100644
--- a/types/components/header/navigationMenu.ts
+++ b/types/components/header/navigationMenu.ts
@@ -2,7 +2,7 @@ import { VariantProps } from "class-variance-authority"
 
 import { navigationMenuVariants } from "@/components/Header/MainMenu/NavigationMenu/variants"
 
-import { MainNavigationItem } from "@/types/components/header/mainNavigationItem"
+import type { MainNavigationItem } from "@/types/components/header/mainNavigationItem"
 
 export interface NavigationMenuProps
   extends VariantProps<typeof navigationMenuVariants> {
diff --git a/types/components/header/navigationMenuItem.ts b/types/components/header/navigationMenuItem.ts
index 942b706c8..3794d1432 100644
--- a/types/components/header/navigationMenuItem.ts
+++ b/types/components/header/navigationMenuItem.ts
@@ -2,7 +2,7 @@ import { VariantProps } from "class-variance-authority"
 
 import { navigationMenuItemVariants } from "@/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/variants"
 
-import { MainNavigationItem } from "@/types/components/header/mainNavigationItem"
+import type { MainNavigationItem } from "@/types/components/header/mainNavigationItem"
 
 export interface NavigationMenuItemProps
   extends VariantProps<typeof navigationMenuItemVariants> {
diff --git a/types/components/header/topMenu.ts b/types/components/header/topMenu.ts
index 4e20a6e7f..b30cf64a0 100644
--- a/types/components/header/topMenu.ts
+++ b/types/components/header/topMenu.ts
@@ -1,4 +1,4 @@
-import { LanguageSwitcherData } from "@/types/requests/languageSwitcher"
+import type { LanguageSwitcherData } from "@/types/requests/languageSwitcher"
 
 export interface TopMenuProps {
   languageUrls: LanguageSwitcherData
diff --git a/types/components/languageSwitcher/languageSwitcher.ts b/types/components/languageSwitcher/languageSwitcher.ts
new file mode 100644
index 000000000..fbadfab5d
--- /dev/null
+++ b/types/components/languageSwitcher/languageSwitcher.ts
@@ -0,0 +1,6 @@
+import { LanguageSwitcherData } from "@/types/requests/languageSwitcher"
+
+export interface LanguageSwitcherProps {
+  type: "mobileHeader" | "mobileFooter" | "desktopHeader" | "desktopFooter"
+  urls: LanguageSwitcherData
+}
diff --git a/utils/tabbable.ts b/utils/tabbable.ts
index 30ebfbd9f..37dafb131 100644
--- a/utils/tabbable.ts
+++ b/utils/tabbable.ts
@@ -20,15 +20,6 @@ function hidesContents(element: HTMLElement) {
 
   // Otherwise we need to check some styles
   const style = window.getComputedStyle(element)
-  console.log({
-    element,
-    zeroSize,
-    display: style.display,
-    overflow: style.overflow,
-    returns:
-      style.getPropertyValue("display") === "none" ||
-      (zeroSize && style.getPropertyValue("overflow") !== "visible"),
-  })
   return (
     style.getPropertyValue("display") === "none" ||
     (zeroSize && style.getPropertyValue("overflow") !== "visible")