Improve dropdown menus positioning

resources/views/components/layouts/appHeader.blade.php

@@ -1,6 +1,5 @@
-<header
-    class="border-b bg-light-base-100 dark:bg-base-800 text-light-base-950 dark:text-base-50 border-light-base-300 dark:border-base-500">
-    <div class="max-w-[63rem] mx-auto">
+<header class="border-b bg-light-base-100 dark:bg-base-800 text-light-base-950 dark:text-base-50 border-light-base-300 dark:border-base-500">
+    <div class="max-w-[63rem] mx-auto" x-ref="header">
         <div class="flex justify-between px-4 py-5">
             {{ $slot }}
         </div>

resources/views/components/menu/index.blade.php

@@ -1,4 +1,8 @@
-@props(['wide' => false])
+@props([
+    'wide' => false,
+    'anchorElement' => null,
+    'anchorOffset' => null,
+])
 
 <div {{ $attributes->merge(['class' => 'relative']) }}
     x-data="{ menuOpen: false, wide: {{ $wide ? 'true' : 'false' }} }"

resources/views/components/menu/items.blade.php

@@ -1,6 +1,17 @@
+@aware([
+    'anchorElement',
+    'anchorOffset',
+])
+
 <div class="z-[35] border bg-light-base-200 dark:bg-base-950 border-light-base-300 dark:border-base-500 rounded-md shadow-lg p-1.5 text-light-base-950 dark:text-base-50"
     :class="wide ? 'min-w-[15rem]' : 'min-w-[10rem]'"
-    x-show="menuOpen" x-anchor.bottom-end="$refs.button" x-cloak
+    x-show="menuOpen"
+    x-cloak
+    @if ($anchorElement)
+        x-anchor.bottom-end{{ $anchorOffset ? '.offset.' . $anchorOffset : '' }}="{{ $anchorElement }}"
+    @else
+        x-anchor.bottom-end.offset.5="$refs.button"
+    @endif
     @click.away="menuOpen = false"
 >
     {{ $slot }}

resources/views/livewire/layout/notificationMenu.blade.php

@@ -1,5 +1,5 @@
 <div>
-    <x-menu wide>
+    <x-menu anchorElement="$refs.header" anchorOffset="-15" wide>
         <x-menu.button>
             <x-icons.bell class="w-5 h-5" />
 

resources/views/livewire/layout/userMenu.blade.php

@@ -1,5 +1,5 @@
 <div>
-    <x-menu>
+    <x-menu anchorElement="$refs.header" anchorOffset="-15">
         <x-menu.button>
             <x-icons.user class="w-5 h-5" />
         </x-menu.button>