diff --git a/components/header/header-core/index.tsx b/components/header/header-core/index.tsx index c09a880e2..15602f806 100644 --- a/components/header/header-core/index.tsx +++ b/components/header/header-core/index.tsx @@ -90,7 +90,13 @@ export const HeaderCore: React.FC = ({ ) : null} -
+
+ +
{useSearchBar ? (
diff --git a/components/header/header-core/styles.module.css b/components/header/header-core/styles.module.css index 3e9be1b74..ab449d972 100644 --- 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 index c371e820c..5d71b6bf1 100644 --- 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) ? ( -
+
- {session?.user?.fullName || - session?.user?.email || - 'Utilisateur inconnu'} -  ( - - agent public - - ) + + {session?.user?.fullName || + session?.user?.email || + 'Utilisateur inconnu'} +  ( + + agent public + + ) +
- -
Se déconnecter
-
+ +
Se déconnecter
+
+
) : useAgentCTA ? ( - Espace agent public + + Espace agent public + ) : null; }; diff --git a/components/header/menu/styles.module.css b/components/header/menu/styles.module.css index fa934a207..cb4a68602 100644 --- 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); + } +} \ No newline at end of file