Laravel 12 Liveware: criando uma barra de navegação

[Frank K Hosaka]

Ontem, o Copilot tentou me ensinar como criar uma barra de navegação, usando o Liveware. Eu achei muito complicado e fiquei apavorado!

Mas eu encontrei o arquivo resources > views > components > layouts > app > sider.blade.php, eu gostei a beça dele, e consultando a internet eu consegui montar o meu arquivo 
resources > views > components > layouts > app > navbar.blade.php

<flux:header>
<flux:navbar>
    
    <flux:navbar.item>Laravel 12</flux:navbar.item>

    <flux:dropdown>
        <flux:navbar.item icon-trailing="chevron-down">Menu</flux:navbar.item>
        <flux:navmenu>
            @if(auth()->user()->id==1)
                <flux:navmenu.item href="diarioInicio">Diário</flux:navmenu.item>
            @endif
            <flux:navmenu.item href="orcamentoMenu">Orçamento</flux:navmenu.item>
            <flux:navmenu.item href="vendaInicio">Relatório de Venda</flux:navmenu.item>
        </flux:navmenu>
    </flux:dropdown>

    <flux:dropdown>
        <flux:navbar.item icon-trailing="chevron-down">{{ auth()->user()->nome }}</flux:navbar.item>
        <flux:navmenu>
            <form method="POST" action="{{ route('logout') }}" class="w-full">
                @csrf
                <flux:menu.item as="button" type="submit" icon="arrow-right-start-on-rectangle" class="w-full">
                    {{ __('Sair') }}
                </flux:menu.item>
            </form>
            <form method="POST" action="{{ route('logout') }}" class="w-full">
                @csrf
                <flux:menu.item as="button" type="submit" icon="arrow-right-start-on-rectangle" class="w-full">
                    {{ __('Mudar a senha') }}
                </flux:menu.item>
            </form>
        </flux:navmenu>
    </flux:dropdown>

</flux:navbar>
{{$slot}}
@fluxScripts
</flux:header>

O meu arquivo menuView.blade.php não funciona no Laravel 12, só funciona se você atualizar o navegador. Ele usava JavaScript, e acredito que o paradigma do LiveWare é trocar o JavaScript pelo PHP. E assim, o meu arquivo resources > views > menuView.blade.php ficou assim:
 

@vite(['resources/css/app.css', 'resources/js/app.js'])
<div class="w-[500px] m-auto m-0">
    <x-layouts.app.navbar />
</div>

Por enquanto, tudo é tentativa e erro. Para o diarioView.blade.php funcionar, eu fiz assim:
 

@include('appView')
<div class="w-[500px] m-0 m-auto">
<x-layouts.app.navbar />
<input type=submit value='Lançamentos'
    class="hover:bg-gray-200 py-1 px-2 font-semibold rounded text-gray-500"
    onclick="location.replace('diarioCria')" />
    do dia
    <input type=date value=<?=$dia?> 
        class="border-none font-semibold py-1 px-2 w-[110px] hover:bg-gray-200 rounded text-gray-500"
        onclick=this.showPicker()
        onchange="location.replace('diarioNovaData?data='+this.value)">
    <?=$mensagem?>
    <a href=previsaoInicio class=text-blue-700>Previsão</a>
<div class="py-1"></div>
<div class="shadow-sm"> 
    <div class="bg-gray-100">  
        <div class="flex bg-gray-200 py-1"> 
            <div class='w-[40px] whitespace-nowrap px-2'>Lçto</div> 
            <div class='w-[60px] whitespace-nowrap text-right'>Ctad</div> 
            <div class='w-[60px] whitespace-nowrap text-right'>Ctac</div> 
            <div class="w-[100px] whitespace-nowrap text-right">Valor</div> 
            <div>
                <form action=diarioHistorico method=post>
                    @csrf
                    <input name=hist placeholder="Procurar no Histórico" onchange=submit() 
                        class="rounded py-0 ml-2 border-none bg-transparent text-black font-semibold" 
                        autocomplete=off>
                </form>
            </div> 
        </div> 
        <?php foreach ($lctos as $index => $lcto): ?>
        <div class="flex odd:bg-gray-200 even:bg-white"> 
            <div class="w-[40px] px-2">
                <a href="diarioEdita?docto=<?=$lcto->docto?>" class="text-gray-500 font-semibold"><?=$lcto->lcto?></a>
            </div> 
            <div class="w-[60px] text-right"><?= $lcto->contad ?></div> 
            <div class="w-[60px] text-right"><?= $lcto->contac ?></div> 
            <div class="w-[100px] text-right"><?= dec($lcto->valor) ?></div> 
            <div class="w-[370px] truncate px-2"><?= $lcto->hist ?></div> 
        </div> 
        <?php endforeach; ?>
        <div class="flex font-semibold odd:bg-gray-200 even:bg-white"> 
            <div style="width:260px" class="text-right font-semibold">
                {{dec($somaDebito)}}
            </div>
            <div class='whitespace-nowrap px-2 text-red-500'>
                @if($somaDebito!==$somaCredito)
                    {{"Soma de Crédito ".dec($somaCredito)}}
                @endif
            </div>               
        </div>
    </div>
</div>
</div>

Tudo isso é gambiarra, não existe nenhum tutorial afirmando que essa é forma correta de usar o <flux>.

Editado 21 horas atrás por Frank K Hosaka