fix: mobile header menu (#1070)

* fix: mobile header menu fix #1020 * fix: keep style consistent
annuaire-entreprises-data-gouv-fr · May 29, 2024 · e3ffcd6 · e3ffcd6
1 parent de00705
commit e3ffcd6
Show file tree

Hide file tree

Showing 9 changed files with 191 additions and 47 deletions.
diff --git a/components-ui/filter-menu/filter-menu.tsx b/components-ui/filter-menu/filter-menu.tsx
@@ -2,6 +2,7 @@
 import { PropsWithChildren, useId, useState } from 'react';
 import ButtonLink from '#components-ui/button';
 import ButtonClose from '#components-ui/button/button-close';
+import FloatingModal from '#components-ui/floating-modal';
 import { Icon } from '#components-ui/icon/wrapper';
 import constants from '#models/constants';
 import {
@@ -78,9 +79,11 @@ export const FilterMenu: React.FC<PropsWithChildren<FilterMenuProps>> = ({
             />
           )}
         </div>
-        <div
+        <FloatingModal
           className={styles['container']}
           style={{ display: open ? 'block' : 'none' }}
+          aria-label={'Les filtres de ' + activeFilter.label}
+          aria-modal={false}
         >
           <div className={styles['filter-container']}>{children}</div>
           {addSaveClearButton && (
@@ -99,7 +102,7 @@ export const FilterMenu: React.FC<PropsWithChildren<FilterMenuProps>> = ({
               </div>
             </>
           )}
-        </div>
+        </FloatingModal>
       </div>
     </>
   );

diff --git a/components-ui/filter-menu/style.module.css b/components-ui/filter-menu/style.module.css
@@ -64,12 +64,10 @@ span.search-filter-label:hover {
 .container {
   box-shadow: 0 0 15px -5px rgba(0, 0, 0, 0.3);
   top: 100%;
+  border: none;
   left: 0;
   position: absolute;
-  padding: 15px;
   margin-top: 5px;
-  background-color: #fff;
-  border-radius: 3px;
   width: 480px;
   z-index: 1000;
 }

diff --git a/components-ui/floating-modal/index.tsx b/components-ui/floating-modal/index.tsx
@@ -3,10 +3,18 @@ import styles from './style.module.css';
 type IProps = React.HTMLAttributes<HTMLDivElement> & {
   agentColor?: boolean;
   noMobile?: boolean;
+  elevation?: 'low' | 'high';
   footer?: React.ReactNode;
 };
 export default forwardRef(function FloatingModal(
-  { children, agentColor = false, footer, noMobile = false, ...props }: IProps,
+  {
+    children,
+    agentColor = false,
+    footer,
+    noMobile = false,
+    elevation = 'high',
+    ...props
+  }: IProps,
   ref: React.Ref<HTMLDivElement>
 ) {
   return (
@@ -19,7 +27,11 @@ export default forwardRef(function FloatingModal(
         ' ' +
         (props.className ?? '') +
         ' ' +
-        (noMobile ? styles['no-mobile'] : '')
+        (noMobile ? styles['no-mobile'] : '') +
+        ' ' +
+        (elevation === 'low'
+          ? styles['elevation-low']
+          : styles['elevation-high'])
       }
       ref={ref}
     >

diff --git a/components-ui/floating-modal/style.module.css b/components-ui/floating-modal/style.module.css
@@ -2,15 +2,13 @@
   --gutter-vertical: 1rem;
   --gutter-horizontal: 1.5rem;
   background-color: #fff;
-  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.3);
   padding: var(--gutter-vertical) var(--gutter-horizontal);
   border-radius: 0.25rem;
-  border: 2px solid var(--annuaire-colors-pastelBlue);
+  border: 1px solid var(--annuaire-colors-pastelBlue);
 }
 
 .footer {
-  margin: calc(var(--gutter-vertical) * 2) calc(var(--gutter-horizontal) * -1)
-    calc(var(--gutter-vertical) * -1);
+  margin: calc(var(--gutter-vertical) * 2) calc(var(--gutter-horizontal) * -1) calc(var(--gutter-vertical) * -1);
   padding: var(--gutter-vertical) var(--gutter-horizontal);
   font-size: 0.9rem;
   background-color: var(--background-alt-grey);
@@ -20,9 +18,19 @@
   .no-mobile .footer {
     background-color: transparent;
   }
+
   .no-mobile.floating-modal {
     box-shadow: none;
     border: none;
     padding: 0;
   }
 }
+
+.elevation-low {
+  box-shadow: 0 0 15px -5px rgba(0, 0, 0, 0.3);
+}
+
+.elevation-high {
+  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.3);
+
+}
diff --git a/components/header/header-core/index.tsx b/components/header/header-core/index.tsx
@@ -90,7 +90,13 @@ export const HeaderCore: React.FC<IProps> = ({
                         </a>
                       </div>
                     ) : null}
-                    <div className="fr-header__navbar"></div>
+                    <div className={styles.menuMobile}>
+                      <Menu
+                        session={session}
+                        useAgentCTA={useAgentCTA}
+                        pathFrom={pathFrom}
+                      />
+                    </div>
                   </div>
                   {useSearchBar ? (
                     <div className={styles.notFrSearch}>

diff --git a/components/header/header-core/styles.module.css b/components/header/header-core/styles.module.css
@@ -13,3 +13,15 @@
     margin-top: 0;
   }
 }
+
+.menuMobile {
+  order: 3;
+  padding: 1rem;
+  margin-left: auto;
+}
+
+@media screen and (min-width: 993px) {
+  .menuMobile {
+    display: none;
+  }
+}
diff --git a/components/header/menu/index.tsx b/components/header/menu/index.tsx
@@ -1,3 +1,4 @@
+import FloatingModal from '#components-ui/floating-modal';
 import { Icon } from '#components-ui/icon/wrapper';
 import constants from '#models/constants';
 import { isLoggedIn } from '#models/user/rights';
@@ -10,38 +11,53 @@ const Menu: React.FC<{
   useAgentCTA: boolean;
 }> = ({ session, pathFrom, useAgentCTA }) => {
   return isLoggedIn(session) ? (
-    <div className={styles.menuLogout + ' fr-link'}>
+    <div className={styles.menuLogout + ' fr-link'} tabIndex={0}>
       <div>
         <Icon slug="accountLine">
-          {session?.user?.fullName ||
-            session?.user?.email ||
-            'Utilisateur inconnu'}
-          &nbsp;(
-          <strong
-            style={{
-              fontVariant: 'small-caps',
-              color: constants.colors.espaceAgent,
-            }}
-          >
-            agent public
-          </strong>
-          )
+          <span className={styles.menuText}>
+            {session?.user?.fullName ||
+              session?.user?.email ||
+              'Utilisateur inconnu'}
+            &nbsp;(
+            <strong
+              style={{
+                fontVariant: 'small-caps',
+                color: constants.colors.espaceAgent,
+              }}
+            >
+              agent public
+            </strong>
+            )
+          </span>
         </Icon>
       </div>
-      <a
-        href={`/api/auth/agent-connect/logout?pathFrom=${encodeURIComponent(
-          pathFrom
-        )}`}
+      <FloatingModal
+        id="feedback-modal"
+        aria-modal="false"
+        elevation="low"
+        role="dialog"
+        className={styles.dialog}
       >
-        <div>Se déconnecter</div>
-      </a>
+        <a
+          aria-label="Se déconnecter de l'espace agent public"
+          href={`/api/auth/agent-connect/logout?pathFrom=${encodeURIComponent(
+            pathFrom
+          )}`}
+        >
+          <div>Se déconnecter</div>
+        </a>
+      </FloatingModal>
     </div>
   ) : useAgentCTA ? (
     <a
       href={`/lp/agent-public?pathFrom=${encodeURIComponent(pathFrom)}`}
       className="fr-link"
+      title="Se connecter à l'espace agent"
+      aria-label="Accéder à la page de connexion de l'espace agent public"
     >
-      <Icon slug="accountLine">Espace agent public</Icon>
+      <Icon slug="accountLine">
+        <span className={styles.menuText}>Espace agent public</span>
+      </Icon>
     </a>
   ) : null;
 };

diff --git a/components/header/menu/styles.module.css b/components/header/menu/styles.module.css
@@ -1,25 +1,110 @@
 .menuLogout {
   position: relative;
+  z-index: 11;
+  cursor: pointer;
 }
+
 .menuLogout:hover {
-  background-color: #eee !important;
-  cursor: default;
+  background-color: #eee;
 }
 
-.menuLogout > a {
+.dialog {
+  position: absolute;
+  padding: 1rem;
+  min-width: max-content;
   position: absolute;
-  top: 100%;
-  left: 0;
-  display: none;
-  width: 100%;
-  background-color: #fff;
-  padding: 5px 15px;
-  box-shadow: 0 10px 15px -10px rgba(0, 0, 0, 0.5);
+  z-index: 10;
+  visibility: hidden;
+  will-change: transform, opacity;
 }
-.menuLogout > a:hover {
-  background-color: #f8f8f8 !important;
+
+.menuLogout:hover>.dialog,
+.menuLogout:focus-visible>.dialog,
+.dialog:focus-visible,
+.dialog:hover {
+  visibility: visible !important;
+  animation: appear 0.15s ease-in-out forwards;
 }
 
-.menuLogout:hover > a {
+.dialog a {
   display: block;
+  margin: -1rem;
+  padding: 1rem;
+  color: var(--annuaire-colors-frBlue);
+}
+
+.dialog a:hover {
+  text-decoration: underline;
+
 }
+
+.dialog:hover {
+  background: #f8f8f8;
+
+}
+
+@media only screen and (min-width: 1px) and (max-width: 992px) {
+  .menuText {
+    display: none;
+  }
+
+  .dialog {
+    top: 0.25rem;
+    right: 0.5rem;
+  }
+
+  .menuLogout:hover>.dialog,
+  .menuLogout:focus-visible>.dialog,
+  .dialog:focus-visible,
+  .dialog:hover,
+  .menuLogout:focus>.dialog,
+  .dialog:focus {
+    visibility: visible !important;
+    animation: appear-right 0.1s ease-in-out forwards;
+  }
+
+}
+
+@media only screen and (min-width: 993px) {
+  .dialog {
+    right: 0;
+    left: 0;
+    top: 100%;
+    border: none;
+
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  .menuLogout:hover>.dialog,
+  .menuLogout:focus-visible>.dialog,
+  .dialog:focus-visible,
+  .dialog:hover {
+    visibility: visible !important;
+    animation: appear-top 0.15s ease-in-out forwards;
+  }
+}
+
+@keyframes appear-top {
+  from {
+    opacity: 0;
+    transform: translateY(-10%);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes appear-right {
+  from {
+    opacity: 0;
+    transform: translateX(10%);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
diff --git a/cypress/e2e/espace-agent.cy.js b/cypress/e2e/espace-agent.cy.js
@@ -13,7 +13,11 @@ describe(
     });
     it("Page d'accueil", () => {
       cy.visit(`/`);
-      cy.contains('Espace agent').click();
+      cy.contains('Espace agent')
+        // The element is present twice (mobile and desktop menu).
+        // The mobile one is hidden but appears first in the DOM,
+        // so we need to force the click
+        .click({ force: true });
       cy.contains('button', 'AgentConnect');
     });