alpes-maritimes-2022: close toplinks panel when click outside (#72095)

static/alpes-maritimes-2022/_custom.scss

@@ -220,8 +220,9 @@ h3, .h3 {
 // Top links
 #toplinks {
 	text-align: left;
+	z-index: 110;
 	@media ($min-desktop-viewport) {
-		transform: translateY(-$top-gray-line-height);
+		margin-top: -$top-gray-line-height;
 	}
 	@media ($max-mobile-viewport) {
 		position: relative;
@@ -267,8 +268,15 @@ h3, .h3 {
 		}
 		display: none;
 	}
-	.toplinks--togglable-btn.toggled + .logged-in {
-		display: block;
+	.toplinks--panel-mask {
+		@include mask(-1);
+		background-color: transparent;
+	}
+	.toplinks--togglable-btn.toggled {
+		+ .logged-in,
+		~ .toplinks--panel-mask {
+			display: block;
+		}
 	}
 }
 // Nav

templates/variants/alpes-maritimes-2022/includes/user-info.html

@@ -2,7 +2,7 @@
 
 {% block user-info %}
   {% if user.is_authenticated %}
-    <div class="toplinks--toggled-wrapper togglable">
+    <div class="toplinks--toggled-wrapper">
       <button aria-label="{% include "includes/user-info-user-name.html" %}" class="toplinks--togglable-btn togglable">
         <svg class="toplinks-icon">
           <use href="{{site_base}}/static/{{css_variant}}/img/toplinks-icon.svg#icon" />
@@ -12,6 +12,14 @@
         </span>
       </button>
       {{ block.super }}
+      <div class="toplinks--panel-mask"></div>
+      <script>
+        const toplinksBtn = document.querySelector('.toplinks--togglable-btn')
+        const toplinksMask = document.querySelector('.toplinks--panel-mask')
+        toplinksMask.addEventListener('click', function(){
+          toplinksBtn.click()
+        });
+      </script>
     </div>
   {% else %}
     {{ block.super }}