From 719515afe7ee8c84f42d6bce7878e0a4a0d2ee3c Mon Sep 17 00:00:00 2001
From: Louis Chemineau <louis@chmn.me>
Date: Thu, 2 Jun 2022 13:11:08 +0200
Subject: Properly calculate carret position

The carret position is currently hard coded based on the position of the icon in the header.

This PR calculate its position relatively to the header icon.

Signed-off-by: Louis Chemineau <louis@chmn.me>
---
 core/src/components/HeaderMenu.vue | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

(limited to 'core/src/components/HeaderMenu.vue')

diff --git a/core/src/components/HeaderMenu.vue b/core/src/components/HeaderMenu.vue
index 9fed383b026..7a4c10010f2 100644
--- a/core/src/components/HeaderMenu.vue
+++ b/core/src/components/HeaderMenu.vue
@@ -33,11 +33,11 @@
 			@click.prevent="toggleMenu">
 			<slot name="trigger" />
 		</a>
+		<div v-show="opened" class="header-menu__carret" />
 		<div v-show="opened"
 			:id="`header-menu-${id}`"
 			class="header-menu__wrapper"
 			role="menu">
-			<div class="header-menu__carret" />
 			<div class="header-menu__content">
 				<slot />
 			</div>
@@ -162,12 +162,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.notifications:not(:empty) ~ #unified-search {
-	order: -1;
-	.header-menu__carret {
-		right: 175px;
-	}
-}
 .header-menu {
 	&__trigger {
 		display: flex;
@@ -207,8 +201,9 @@ export default {
 
 	&__carret {
 		position: absolute;
-		right: 128px;
-		bottom: 100%;
+		z-index: 2001; // Because __wrapper is 2000.
+		left: calc(50% - 10px);
+		bottom: 0;
 		width: 0;
 		height: 0;
 		content: ' ';
-- 
cgit v1.2.3

