diff --git a/app/globals.css b/app/globals.css
index 3a6b68d69..7dd0c44fb 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -106,7 +106,7 @@
--max-width-navigation: 89.5rem;
--main-menu-mobile-height: 75px;
- --main-menu-desktop-height: 129px;
+ --main-menu-desktop-height: 125px;
--booking-widget-mobile-height: 75px;
--booking-widget-desktop-height: 77px;
--hotel-page-map-desktop-width: 23.75rem;
diff --git a/components/Header/HeaderLink/headerLink.module.css b/components/Header/HeaderLink/headerLink.module.css
index 198e0c61b..bf642527f 100644
--- a/components/Header/HeaderLink/headerLink.module.css
+++ b/components/Header/HeaderLink/headerLink.module.css
@@ -2,5 +2,16 @@
display: flex;
align-items: center;
gap: var(--Spacing-x1);
- font-size: var(--typography-Caption-Regular-fontSize);
+}
+
+.headerLink:hover {
+ color: var(--Base-Text-High-contrast);
+}
+
+.headerLink .icon * {
+ fill: var(--Base-Text-Medium-contrast);
+}
+
+.headerLink:hover .icon * {
+ fill: var(--Base-Text-High-contrast);
}
diff --git a/components/Header/HeaderLink/index.tsx b/components/Header/HeaderLink/index.tsx
index 1bfa286ac..78c700733 100644
--- a/components/Header/HeaderLink/index.tsx
+++ b/components/Header/HeaderLink/index.tsx
@@ -1,4 +1,7 @@
-import Link from "@/components/TempDesignSystem/Link"
+import Link from "next/link"
+
+import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
import styles from "./headerLink.module.css"
@@ -6,16 +9,19 @@ import type { HeaderLinkProps } from "@/types/components/header/headerLink"
export default function HeaderLink({
children,
- className,
- ...props
+ href,
+ iconName,
+ iconSize = 20,
}: HeaderLinkProps) {
+ const Icon = getIconByIconName(iconName)
return (
-
- {children}
-
+
+
+ {Icon ? (
+
+ ) : null}
+ {children}
+
+
)
}
diff --git a/components/Header/MainMenu/MobileMenu/index.tsx b/components/Header/MainMenu/MobileMenu/index.tsx
index 272c4b231..621529b0f 100644
--- a/components/Header/MainMenu/MobileMenu/index.tsx
+++ b/components/Header/MainMenu/MobileMenu/index.tsx
@@ -7,21 +7,23 @@ import { useMediaQuery } from "usehooks-ts"
import useDropdownStore from "@/stores/main-menu"
-import { GiftIcon, SearchIcon, ServiceIcon } from "@/components/Icons"
import LanguageSwitcher from "@/components/LanguageSwitcher"
import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
import HeaderLink from "../../HeaderLink"
+import TopLink from "../../TopLink"
import styles from "./mobileMenu.module.css"
import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
import type { MobileMenuProps } from "@/types/components/header/mobileMenu"
+import { IconName } from "@/types/components/icon"
export default function MobileMenu({
children,
languageUrls,
topLink,
+ isLoggedIn,
}: React.PropsWithChildren) {
const intl = useIntl()
const {
@@ -77,18 +79,11 @@ export default function MobileMenu({
>
{children}