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 ( - }> - - + }> @@ -39,26 +33,3 @@ export default function MainMenu() { ) } - -async function MainMenuLogo() { - const intl = await getIntl() - - return -} - -function Logo({ alt }: { alt: string }) { - const lang = getLang() - - return ( - - - - ) -} diff --git a/apps/scandic-web/components/Header/MainMenu/mainMenu.module.css b/apps/scandic-web/components/Header/MainMenu/mainMenu.module.css index 49d870531..2b4b4384f 100644 --- a/apps/scandic-web/components/Header/MainMenu/mainMenu.module.css +++ b/apps/scandic-web/components/Header/MainMenu/mainMenu.module.css @@ -23,15 +23,6 @@ gap: var(--Spacing-x2); } -.logoLink { - display: inline-flex; - width: auto; -} - -.logo { - height: 1.375rem; -} - @media screen and (min-width: 768px) { .mainMenu { padding: var(--Spacing-x2) 0; diff --git a/apps/scandic-web/stores/main-menu.ts b/apps/scandic-web/stores/main-menu.ts index 280da20e9..b882a5531 100644 --- a/apps/scandic-web/stores/main-menu.ts +++ b/apps/scandic-web/stores/main-menu.ts @@ -6,7 +6,7 @@ import { DropdownTypeEnum, } from "@/types/components/dropdown/dropdown" -const useDropdownStore = create((set, get) => ({ +const useDropdownStore = create((set) => ({ isHamburgerMenuOpen: false, isMyPagesMobileMenuOpen: false, isMyPagesMenuOpen: false,