diff --git a/apps/scandic-web/components/Header/MainMenu/LogoLink/index.tsx b/apps/scandic-web/components/Header/MainMenu/LogoLink/index.tsx new file mode 100644 index 000000000..26132ee39 --- /dev/null +++ b/apps/scandic-web/components/Header/MainMenu/LogoLink/index.tsx @@ -0,0 +1,35 @@ +"use client" +import NextLink from "next/link" +import { useIntl } from "react-intl" + +import useDropdownStore from "@/stores/main-menu" + +import { ScandicLogoIcon } from "@/components/Icons" +import useLang from "@/hooks/useLang" + +import styles from "./logoLink.module.css" + +import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown" + +export function LogoLink() { + const lang = useLang() + const intl = useIntl() + const { toggleDropdown, isHamburgerMenuOpen } = useDropdownStore() + + function handleNavigate() { + if (isHamburgerMenuOpen) { + toggleDropdown(DropdownTypeEnum.HamburgerMenu) + } + } + + return ( + + + + ) +} diff --git a/apps/scandic-web/components/Header/MainMenu/LogoLink/logoLink.module.css b/apps/scandic-web/components/Header/MainMenu/LogoLink/logoLink.module.css new file mode 100644 index 000000000..3fc119de3 --- /dev/null +++ b/apps/scandic-web/components/Header/MainMenu/LogoLink/logoLink.module.css @@ -0,0 +1,4 @@ +.logoLink { + display: inline-flex; + width: auto; +} diff --git a/apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/index.tsx b/apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/index.tsx index 31b163e2b..a8e87c740 100644 --- a/apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/index.tsx +++ b/apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/index.tsx @@ -14,10 +14,12 @@ import MegaMenu from "../MegaMenu" import styles from "./navigationMenuItem.module.css" +import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown" import type { NavigationMenuItemProps } from "@/types/components/header/navigationMenuItem" export default function MenuItem({ item, isMobile }: NavigationMenuItemProps) { - const { openMegaMenu, toggleMegaMenu } = useDropdownStore() + const { openMegaMenu, toggleMegaMenu, toggleDropdown, isHamburgerMenuOpen } = + useDropdownStore() const megaMenuRef = useRef(null) const { submenu, title, link, seeAllLink, card } = item const megaMenuTitle = `${title}-${isMobile ? "mobile" : "desktop"}` @@ -33,6 +35,12 @@ export default function MenuItem({ item, isMobile }: NavigationMenuItemProps) { toggleMegaMenu(false) }) + function handleNavigate() { + if (isHamburgerMenuOpen) { + toggleDropdown(DropdownTypeEnum.HamburgerMenu) + } + } + return submenu.length ? ( <> {title} diff --git a/apps/scandic-web/components/Header/MainMenu/index.tsx b/apps/scandic-web/components/Header/MainMenu/index.tsx index 9119ecb5e..3db207138 100644 --- a/apps/scandic-web/components/Header/MainMenu/index.tsx +++ b/apps/scandic-web/components/Header/MainMenu/index.tsx @@ -1,11 +1,7 @@ -import NextLink from "next/link" import { Suspense } from "react" -import Image from "@/components/Image" -import { getIntl } from "@/i18n" -import { getLang } from "@/i18n/serverContext" - import { NavigationMenuListSkeleton } from "./NavigationMenu/NavigationMenuList" +import { LogoLink } from "./LogoLink" import { MobileMenuSkeleton } from "./MobileMenu" import MobileMenuWrapper from "./MobileMenuWrapper" import MyPagesMenuWrapper, { @@ -19,9 +15,7 @@ export default function MainMenu() { return (