Клик вне элемента в Livewire

Давайте разберём такой случай. Меню поста открыто на экране, а клик мимо него его не закрывает. Человек кликает по странице, а блок Menu остаётся как был.

Модификатор .outside слушает нажатие вне элемента с атрибутом. Клик по самому меню метод не вызывает, а клик снаружи - вызывает.

Страница откроется по адресу /posts/menu. Давайте опишем компонент PostMenu:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class PostMenu extends Component
	{
		public $shut = '';
		
		public function shut()
		{
			$this->shut = 'Shut';
		}
		
		public function render()
		{
			return view('livewire.post-menu');
		}
	}
?>

Давайте выведем меню с обработчиком outside и свойство результата:

<div>
	<div wire:click.outside="shut">
		Menu
	</div>
	<div>{{ $shut }}</div>
</div>

Давайте откроем страницу по адресу /posts/menu:

<?php
	Route::get('/posts/menu', function () {
		return view('posts-menu');
	});
?>

Давайте вставим компонент на страницу:

<x-layout>
	<livewire:post-menu />
</x-layout>

Создайте компонент EmployeeMenu. Клик мимо меню работника его закрывает.