chore: cleanup

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]

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 = "",

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>

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] {

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()

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 */

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,

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,

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] {

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

components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css

@@ -6,7 +6,7 @@
 }
 
 .chevron {
-  transition: transform 0.2s;
+  transition: transform 0.3s;
 }
 
 .chevron.isExpanded {

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,

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

components/Header/MainMenu/mainMenu.module.css

@@ -26,7 +26,7 @@
 }
 
 .logo {
-  width: 6.4375rem;
+  height: 1.375rem;
 }
 
 .loginLink {