fix: mobile header menu

fix #1020
annuaire-entreprises-data-gouv-fr · May 28, 2024 · c5135e9 · c5135e9
1 parent a8228d4
commit c5135e9
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 38 deletions.
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,52 @@ 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"
+        role="dialog"
+        className={styles.dialog}
+        aria-label="Partager une idée, un bug, une question ou une donnée manquante avec l'équipe de l'Annuaire des Entreprises"
       >
-        <div>Se déconnecter</div>
-      </a>
+        <a
+          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,44 @@
 .menuLogout {
   position: relative;
-}
-.menuLogout:hover {
-  background-color: #eee !important;
-  cursor: default;
+  z-index: 10;
+  cursor: pointer;
 }
 
-.menuLogout > a {
+.menuLogout>.dialog {
   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);
+  right: -1rem;
+  z-index: 11;
+  visibility: hidden;
+  width: max-content;
 }
-.menuLogout > a:hover {
-  background-color: #f8f8f8 !important;
+
+.menuLogout:hover>.dialog,
+.menuLogout:focus>.dialog,
+.dialog:focus-within,
+.dialog:hover {
+  visibility: visible !important;
+  animation: appear 0.1s ease-in-out forwards;
+
 }
 
-.menuLogout:hover > a {
-  display: block;
+.dialog a:hover {
+  text-decoration: underline;
 }
+
+@media only screen and (min-width: 1px) and (max-width: 992px) {
+  .menuText {
+    display: none;
+  }
+}
+
+@keyframes appear {
+  from {
+    opacity: 0;
+    transform: translateY(-10%);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}