Ensure Inertia pages are children of AppLayout

[mst101]

I noticed that the AppLayout.vue component is currently a child of the following pages:

• resources/js/Pages/API/Index.vue
• resources/js/Pages/Dashboard.vue
• resources/js/Pages/Profile/Show.vue
• resources/js/Pages/Teams/Create.vue
• resources/js/Pages/Teams/Show.vue

This means the whole layout is refreshed when clicking between these pages. Not only is this inefficient, but any custom code in the navigation bar (e.g. a search input field) will have its content reset.

This PR solves this problem by providing a wrapper around AppLayout and makes use of the defineOptions macro:

defineOptions({
    layout: AppLayout,
})

... to ensure that the above vue components are children of AppLayout.vue, not the other way around.

[taylorotwell]

I'm not sure I follow. How is AppLayout a child of Teams/Show when it's the root component of the page and everything else is contained within it?

[mst101]

If you have a look at Vue DevTools, this shows the current hierarchy of components:

This PR adjusts things, like so:

If you check out this repo, you'll see why this could be an issue: https://github.com/mst101/jetstream-bug

e.g. Imagine you're on the Dashboard page and you write some text in an input field in the nav. You then click on the 'Profile' page... and find that the input text you entered has been overwritten (because the site has reloaded AppLayout.vue).

That's perfectly normal behaviour for a traditional server-side app of course. But it needn't be for an SPA.

[taylorotwell]

A point of feedback from creator of Inertia:

I find the PageContainer component name a bit weird. I would have just called this PageHeader and not included all the page content within it.

[taylorotwell]

Please mark as ready for review when the requested changes have been made.