Текущая ссылка в Livewire

Давайте рассмотрим ситуацию, когда в шапке несколько ссылок на разделы постов. После перехода адрес в строке браузера меняется, но по виду меню непонятно, какая страница сейчас открыта: все пункты выглядят одинаково.

У ссылки с навигацией Livewire на текущем адресе ставит служебный атрибут data-current. Его можно выделить обычным правилом в стилях прямо в шаблоне страницы.

Страницы откроются по адресам /posts и /posts/create. Давайте на списке зададим стиль и меню:

<x-layout>
	<style>
		a[data-current] {
			font-weight: bold;
		}
	</style>
	<nav>
		<a href="/posts" wire:navigate>All</a>
		<a href="/posts/create" wire:navigate>Create</a>
	</nav>
	<h1>Posts</h1>
</x-layout>

Давайте на странице формы повторим то же меню и стиль:

<x-layout>
	<style>
		a[data-current] {
			font-weight: bold;
		}
	</style>
	<nav>
		<a href="/posts" wire:navigate>All</a>
		<a href="/posts/create" wire:navigate>Create</a>
	</nav>
	<h1>Create post</h1>
</x-layout>

Сделайте меню на страницах работников. Текущая ссылка выделена жирным.