Merged in fix/SW-1742-navigation-on-mobile (pull request #1436)

fix(SW-1742): fixed issue where mobile menu is not closed when clicking on a link

* fix(SW-1742): fixed issue where mobile menu is not closed when clicking on a link


Approved-by: Fredrik Thorsson
Approved-by: Matilda Landström

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 (
+    <NextLink
+      className={styles.logoLink}
+      href={`/${lang}`}
+      onClick={handleNavigate}
+      aria-label={intl.formatMessage({ id: "Back to scandichotels.com" })}
+    >
+      <ScandicLogoIcon width="103px" height="22px" color="red" />
+    </NextLink>
+  )
+}

apps/scandic-web/components/Header/MainMenu/LogoLink/logoLink.module.css

@@ -0,0 +1,4 @@
+.logoLink {
+  display: inline-flex;
+  width: auto;
+}

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<HTMLDivElement>(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 ? (
     <>
       <MainMenuButton
@@ -74,6 +82,7 @@ export default function MenuItem({ item, isMobile }: NavigationMenuItemProps) {
       className={`${styles.navigationMenuItem} ${isMobile ? styles.mobile : styles.desktop}`}
       variant="navigation"
       weight="bold"
+      onClick={handleNavigate}
       href={link!.url}
     >
       {title}

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 (
     <div className={styles.mainMenu}>
       <nav className={styles.nav}>
-        <Suspense fallback={<Logo alt="..." />}>
-          <MainMenuLogo />
-        </Suspense>
+        <LogoLink />
         <div className={styles.menus}>
           <Suspense fallback={<NavigationMenuListSkeleton />}>
             <NavigationMenu isMobile={false} />
@@ -39,26 +33,3 @@ export default function MainMenu() {
     </div>
   )
 }
-
-async function MainMenuLogo() {
-  const intl = await getIntl()
-
-  return <Logo alt={intl.formatMessage({ id: "Back to scandichotels.com" })} />
-}
-
-function Logo({ alt }: { alt: string }) {
-  const lang = getLang()
-
-  return (
-    <NextLink className={styles.logoLink} href={`/${lang}`}>
-      <Image
-        alt={alt}
-        className={styles.logo}
-        height={22}
-        src="/_static/img/scandic-logotype.svg"
-        priority
-        width={103}
-      />
-    </NextLink>
-  )
-}

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;

apps/scandic-web/stores/main-menu.ts

@@ -6,7 +6,7 @@ import {
   DropdownTypeEnum,
 } from "@/types/components/dropdown/dropdown"
 
-const useDropdownStore = create<DropdownState>((set, get) => ({
+const useDropdownStore = create<DropdownState>((set) => ({
   isHamburgerMenuOpen: false,
   isMyPagesMobileMenuOpen: false,
   isMyPagesMenuOpen: false,