Transform the desktop menu into a mobile menu if it collides with the…

… logo
GeotrekCE · Mar 27, 2024 · 5019f91 · 5019f91
1 parent 0156529
commit 5019f91
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 13 deletions.
diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx
@@ -1,3 +1,4 @@
+import { useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { routes } from 'services/routes';
 import Image from 'next/image';
@@ -13,7 +14,8 @@ import { BurgerMenu } from './BurgerMenu';
 import { useHeader } from './useHeader';
 
 export const Header: React.FC = () => {
-  const { config, menuItems, intl } = useHeader();
+  const menuNode = useRef<HTMLDivElement | null>(null);
+  const { config, menuItems, isDesktopMenu, intl } = useHeader(menuNode);
   /**
    * Disabled for now to handle the map on the search page
    */
@@ -38,8 +40,7 @@ export const Header: React.FC = () => {
         role="banner"
         id="header"
       >
-        <BurgerMenu config={config.menu} displayState={headerState} menuItems={menuItems} />
-        <div className="h-11 desktop:h-desktopHeader flex flex-row items-center sticky z-header px-3 shadow-sm shrink-0 transition-all duration-300 delay-100">
+        <div className="h-11 desktop:h-desktopHeader flex justify-between  items-center sticky z-header px-3 shadow-sm shrink-0 transition-all duration-300 delay-100">
           <Link href={routes.HOME} className="flex items-center">
             <div className="shrink-0" id="header_logo">
               <Image
@@ -57,19 +58,30 @@ export const Header: React.FC = () => {
               className="
               flex-auto text-white
               desktop:text-H2 desktop:leading-8
-              font-semibold desktop:font-bold"
+              font-semibold desktop:font-bold desktop:shrink-0"
             >
               <FormattedMessage id={'home.title'} />
             </p>
           </Link>
-          <div className="flex-1 w-0" />
-          <InlineMenu
-            className="hidden desktop:flex items-center justify-end flex-auto gap-4"
-            menuItems={menuItems}
-            config={config.menu}
-          />
-          <GoToSearchButton className="hidden desktop:block" />
+          <div
+            ref={menuNode}
+            className={cn('items-center hidden desktop:flex', !isDesktopMenu && 'invisible')}
+            aria-hidden={!isDesktopMenu}
+          >
+            <InlineMenu
+              className={cn('flex items-center justify-end flex-auto flex-wrap gap-4')}
+              menuItems={menuItems}
+              config={config.menu}
+            />
+            <GoToSearchButton />
+          </div>
         </div>
+        <BurgerMenu
+          className={cn(isDesktopMenu && 'hidden')}
+          config={config.menu}
+          displayState={headerState}
+          menuItems={menuItems}
+        />
       </header>
       {headerBottom !== undefined && (
         <div id="header_bottomHtml">

diff --git a/frontend/src/components/Header/useHeader.ts b/frontend/src/components/Header/useHeader.ts
@@ -1,12 +1,14 @@
+import { MutableRefObject } from 'react';
 import { MenuItem } from 'modules/menuItems/interface';
 import { getDefaultLanguage, getHeaderConfig } from 'modules/header/utills';
 import { useRouter } from 'next/router';
 import { useIntl } from 'react-intl';
 import { useQuery } from '@tanstack/react-query';
 import { ONE_DAY } from 'services/constants/staleTime';
 import { geMenuItems } from 'modules/menuItems/connector';
+import useSize from 'hooks/useSize';
 
-export const useHeader = () => {
+export const useHeader = (menuNode: MutableRefObject<HTMLDivElement | null | undefined>) => {
   const config = getHeaderConfig();
   const language = useRouter().locale ?? getDefaultLanguage();
   const { data: menuItems } = useQuery<MenuItem[], Error>(
@@ -18,5 +20,9 @@ export const useHeader = () => {
   );
   const intl = useIntl();
 
-  return { config, intl, menuItems };
+  const { height = 0 } = useSize(menuNode) ?? {};
+
+  const isDesktopMenu = menuNode.current === null || (height < 100 && height !== 0);
+
+  return { config, intl, menuItems, isDesktopMenu };
 };