Boa notícia: o componente <flux> funciona na Hostinger

Frank K Hosaka · Março 29

arquivo resources > views > menuView.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ $menu ?? 'Menu' }}</title>
</head>
@vite(['resources/css/app.css', 'resources/js/app.js'])
<body class="w-[630px] m-0 m-auto">
<header class="bg-white shadow-sm flex p-1 items-center justify-between mb-2">
  Laravel 12
  <flux:separator vertical />
  <div class="ml-10 flex items-baseline space-x-4">
  <div class="relative group">
    <button class="inline-flex px-3 py-2 rounded-md text-sm font-medium">
      {{ $menu ?? 'Menu'}}
      <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a 1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </button>
    <div class="hidden group-hover:block absolute bg-white text-gray-800 rounded-md shadow-lg w-40">
      <?php if(auth()->user()->id==1): ?>
        <a href=diarioInicio class="block px-4 py-2 text-sm hover:bg-gray-200">Diário</a>
        <a href=balanceteInicio class="block px-4 py-2 text-sm hover:bg-gray-200">Balancete</a>
        <a href=pagarInicio class="block px-4 py-2 text-sm hover:bg-gray-200">Pagar</a>
        <a href=outrosInicio class="block px-4 py-2 text-sm hover:bg-gray-200">Outros</a>
      <?php endif; ?>
        <a href=orcamentoMenu class="block px-4 py-2 text-sm hover:bg-gray-200">Orçamento</a>
        <a href=pessoaInicio class="block px-4 py-2 text-sm hover:bg-gray-200">Pessoa</a>
        <a href=produtoInicio class="block px-4 py-2 text-sm hover:bg-gray-200">Produto</a>
        <a href=vendaInicio class="block px-4 py-2 text-sm hover:bg-gray-200">Relatório de Venda</a>   
    </div>
  </div>
  <flux:separator vertical />
  <div class="relative group">
    <button class="inline-flex px-3 py-2 rounded-md text-sm font-medium">
      {{ auth()->user()->nome}}
      <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a 1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </button>
    <div class="hidden group-hover:block absolute bg-white text-gray-800 rounded-md shadow-lg w-40">
      <form method=post action=logout class="block px-4 py-2 text-sm hover:bg-gray-200">
        @csrf
        <input type="submit" value="Sair">
      </form>
      <a class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-200" href=#>Mudar Senha</a>
    </div>
  </header>

Hoje eu decidi consertar a barra de menu. Tanto na Hostinger como no Notebook, eu precisava atualizar o navegador para a barra funcionar.

Pedi para o Copilot, um código básico de uma barra de menu com Tailwinds e em cima dele eu fui acrescentando os atalhos.

Em comparação com o meu código antigo, eu precisei jogar fora o código JavaScript que fazia o menu aparecer e desaparecer, o Tailwind tem um outro jeito de fazer isso.

Como deu tudo certo, eu me atrevi a testar o componente <flux>, e deu certo aqui no notebook como lá na Hostinger.

Todo o meu projeto do orçamento está na pasta app > Http > Controllers, não preciso reescrever para colocar na pasta app > Livewire, e eu só preciso dar um jeito de jogar fora todos os códigos em JavaScript que embuti nos arquivos blade da pasta resources > views, eles é que estavam impedindo do Laravel 12 com Livewire funcionar tanto no notebook quanto na Hostinger.

Editado Março 29 por Frank K Hosaka

Entrar

Boa notícia: o componente <flux> funciona na Hostinger

Pergunta

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades