Смена пропсов макета в Inertia

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

Статические значения из опции layout для этого не годятся: они заданы при открытии страницы. Функция setLayoutProps обновляет пропсы макета прямо из компонента страницы. Такие динамические значения имеют приоритет выше статических и значений по умолчанию в самом макете.

Давайте в макете оставим флаг боковой колонки:

<script setup>
	const props = withDefaults(
		defineProps({
			title: String,
			showSidebar: Boolean,
		}),
		{
			title: 'My App',
			showSidebar: true,
		},
	)
</script>

<template>
	<header>{{ props.title }}</header>
	<aside v-if="props.showSidebar">Sidebar</aside>
	<main>
		<slot />
	</main>
</template>

Давайте на странице вызовем setLayoutProps при монтировании:

<script setup>
	import { setLayoutProps } from '@inertiajs/vue3'

	setLayoutProps({
		title: 'Dashboard',
		showSidebar: false,
	})
</script>

<template>
	<h1>Dashboard</h1>
</template>

Сделайте экран задач работника Maria, где после нажатия кнопки шапка макета меняет режим, а боковая колонка исчезает.