fix: active les items dans le menu et le megamenu selon la route (#379)

* fix: active les items dans le menu et le megamenu selon la route

* fix: checks sonar & tests

* fix: tests

* refactor: suppression de trim() (isStringAreEquals)

---------

Co-authored-by: PassCulture <passculture@macstudelaurent.home>

public_website/__tests__/fixtures.ts

@@ -34,6 +34,7 @@ export const headerDataFixtures: HeaderProps = {
           URL: '#',
         },
       },
+      id: 0,
     },
   ],
   aboutItems: [
@@ -66,6 +67,7 @@ export const headerDataFixtures: HeaderProps = {
           URL: '#',
         },
       },
+      id: 0,
     },
   ],
   login: {

public_website/src/ui/components/header/Header.tsx

@@ -12,6 +12,7 @@ import { MegaMenu } from './MegaMenu'
 import { MobileMenu } from './mobile/MobileMenu'
 import { CTA } from '@/types/CTA'
 import { Link } from '@/ui/components/Link'
+import { isStringAreEquals } from '@/utils/stringAreEquals'
 
 export type HeaderProps = {
   targetItems: HeaderNavigationItemProps[]
@@ -27,6 +28,7 @@ export type HeaderProps = {
 }
 
 type HeaderNavigationItemProps = {
+  id: number
   label: string
   megaMenu: {
     title: string
@@ -43,6 +45,42 @@ type HeaderNavigationItemProps = {
     cardSecondEmoji: string
   }
 }
+/**
+ *
+ *
+ * @param {CTA[]} items
+ * @param {string} path
+ * @return {*}  {boolean}
+ */
+const findInMenu = (items: CTA[], str: string): boolean => {
+  for (const item of items) {
+    if (isStringAreEquals(item.URL, str)) return true
+  }
+  return false
+}
+/**
+ *
+ *
+ * @param {string} path
+ * @param {HeaderNavigationItemProps[]} collections
+ * @return {*}  {(number | null)}
+ */
+const findCollectionIdByPath = (
+  path: string,
+  collections: HeaderNavigationItemProps[]
+): number | null => {
+  for (const collection of collections) {
+    const { megaMenu } = collection
+    if (megaMenu.primaryListItems) {
+      if (findInMenu(megaMenu.primaryListItems, path)) return collection.id
+    }
+    if (megaMenu.secondaryListItems) {
+      if (findInMenu(megaMenu.secondaryListItems, path)) return collection.id
+    }
+  }
+
+  return null
+}
 
 export function Header({
   targetItems,
@@ -51,10 +89,15 @@ export function Header({
   signup,
 }: HeaderProps) {
   const [activeMegaMenuId, setActiveMegaMenuId] = useState<number | null>(null)
-
+  const router = usePathname()
   const megaMenuButtonRefs = useRef<(HTMLButtonElement | null)[]>([])
 
   const navItems = [...targetItems, ...aboutItems]
+  const activeId = findCollectionIdByPath(router, navItems)
+
+  // Set active menu on hover and if asPath is including in navItems
+  const isActive = (i: number): string =>
+    i === activeMegaMenuId || activeId === i + 1 ? 'mega-menu-active' : ''
 
   // Toggle mega menu panel
   function toggleMegaMenu(id: number) {
@@ -193,9 +236,7 @@ export function Header({
                         id={`mega-menu-button-${i}`}
                         aria-controls={`mega-menu-${i}`}
                         aria-expanded={i === activeMegaMenuId}
-                        className={
-                          i === activeMegaMenuId ? 'mega-menu-active' : ''
-                        }
+                        className={isActive(i)}
                         onClick={() => toggleMegaMenu(i)}
                         onKeyDown={(e) => onMegaMenuKeyDown(e, i)}
                         onMouseEnter={() => toggleMegaMenu(i)}>

public_website/src/ui/components/header/MegaMenu.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef } from 'react'
+import { usePathname } from 'next/navigation'
 import styled, { css } from 'styled-components'
 
 import { AppBanner } from '../app-banner/AppBanner'
@@ -9,6 +10,7 @@ import { onClickAnalytics } from '@/lib/analytics/helpers'
 import { CTA } from '@/types/CTA'
 import { Link } from '@/ui/components/Link'
 import { parseText } from '@/utils/parseText'
+import { isStringAreEquals } from '@/utils/stringAreEquals'
 
 type MegaMenuProps = {
   onBlur: () => void
@@ -43,6 +45,7 @@ export function MegaMenu({
   data,
 }: MegaMenuProps) {
   const megaMenuRef = useRef<HTMLDivElement>(null)
+  const path = usePathname()
 
   function onClickOutside(e: MouseEvent) {
     if (!megaMenuRef.current?.contains(e.target as HTMLElement)) {
@@ -104,6 +107,9 @@ export function MegaMenu({
               return (
                 <li key={item.Label}>
                   <Link
+                    className={
+                      isStringAreEquals(path, item.URL) ? 'active' : ''
+                    }
                     href={item.URL}
                     aria-label={parseText(item.Label).accessibilityLabel}>
                     {parseText(item.Label).processedText}
@@ -117,6 +123,9 @@ export function MegaMenu({
               return (
                 <li key={item.Label}>
                   <Link
+                    className={
+                      isStringAreEquals(path, item.URL) ? 'active' : ''
+                    }
                     href={item.URL}
                     aria-label={parseText(item.Label).accessibilityLabel}>
                     {parseText(item.Label).processedText}
@@ -207,7 +216,9 @@ const StyledMegaMenuLists = styled.div`
       font-weight: ${theme.fonts.weights.semiBold};
       color: ${theme.colors.black};
       opacity: 0.9;
-
+      &.active {
+        text-decoration: underline;
+      }
       &:hover {
         text-decoration: underline;
       }

public_website/src/utils/stringAreEquals.ts

@@ -0,0 +1,6 @@
+export const isStringAreEquals = (str1: string, str2: string): boolean => {
+  if (str1 === undefined || str2 === undefined) return false
+  if (str1.trim().toLocaleLowerCase() === str2.trim().toLocaleLowerCase())
+    return true
+  return false
+}