MuCRMDocs
Site

Layouts

A casca é o que se repete em toda página: menu, cabeçalho, rodapé. No React essa casca é um componente pai. O arquivo _layouts/app.mucrm.php continua valendo só para views PHP.

ℹ️Em poucas palavras

O handler escolhe a área. O componente layout desenha o menu. A página desenha só o miolo, e entra em children.

Três áreas

A propriedade $layout do handler não desenha o menu React. Ela diz de qual pasta saem as páginas. O menu em si é o componente dentro dessa pasta.

ÁreaOnde a rota mora$layoutReact
Site públicoroutes/web.php_layouts.appthemes/{tema}/react/layouts/Public.jsx
Conta logadaroutes/user.php, prefixo user_layouts.appa mesma pasta, componente Account.jsx
Painel adminroutes/admin.phppanels.admin._layouts.appthemes/panels/admin/react/

Site e conta usam o tema de system.theme. O que muda na conta é o componente: menu do jogador, não o menu do site. O admin é outra pasta, então o React dele não mistura com o público. Enquanto themes/panels/admin/react/app.jsx não existir, o admin segue nas views .mucrm.php. Essa casca PHP está em Layouts.

Por que $this->title()

public function index()
{
    $this->title('Minha Conta');

    return $this->inertia('Account/Panel');
}

A primeira visita ainda é HTML, antes do React existir na tela.$this->title('Minha Conta') escreve o <title> desse HTML: a aba do navegador e o título que um buscador lê no código-fonte.

Nas visitas seguintes o documento não recarrega. Quem troca o título da aba é o <Head> da página. A entrada do tema completa com o nome do site: Minha Conta · MUCRM.

import { Head } from '@inertiajs/react'

export default function Panel() {
    return (
        <>
            <Head title="Minha Conta" />
            <h1>Painel</h1>
        </>
    )
}
⚠️Não passe uma prop chamada title

Se o handler mandar 'title' => '...' dentro de inertia(), esse texto substitui $this->title() no HTML. Deixe o título no método e no <Head>.

Layout pai do site

Crie themes/{tema}/react/layouts/Public.jsx. Tudo que a página renderiza cai em children.

import { Link, usePage } from '@inertiajs/react'

export default function Public({ children }) {
    const { app } = usePage().props

    return (
        <>
            <header className="topbar">
                <strong>{app?.name || 'MUCRM'}</strong>
                <nav>
                    <Link href={route('home')}>Início</Link>
                    <Link href={route('user.panel')}>Conta</Link>
                </nav>
            </header>
            {children}
        </>
    )
}

A entrada da Engine aplica essa casca nas páginas que não definem layout. Assim cada página nova já nasce com o menu, sem repetir o cabeçalho.

import PublicLayout from './layouts/Public'

return page().then((module) => {
    const component = module.default

    if (component.layout === undefined) {
        component.layout = (rendered) => <PublicLayout>{rendered}</PublicLayout>
    }

    return component
})

Layout da conta

layouts/Account.jsx fica na mesma pasta do tema. A página da área logada escolhe essa casca. O handler continua com $layout = '_layouts.app'.

import Account from '../layouts/Account'

export default function Panel() {
    return <h1>Painel</h1>
}

Panel.layout = (page) => <Account>{page}</Account>

Uma tela sem menu, como o login, recusa a casca padrão com layout = null.

export default function Login() {
    return <form>...</form>
}

Login.layout = null