Laravel, Bootstrap e <svg>

[Frank K Hosaka]

Estou estudando o projeto Chirp do Laravel, mas eu desativei o Tailwinds e ativei o Bootstrap.

O resultado é um completo desastre. As imagens do tutorial são bem diferentes do que eu consegui com a minha improvisação.

Mas o meu maior problema é o arquivo <svg>, ele fica enorme, tornando o programa inoperante.

Hoje a Gemini me ensinou a controlar o tamanho do <svg> assim <svg width=100 height=100>.

Agora pedir para ela traduzir o Tailwinds em Bootstrap é pura perda de tempo, mas em compensação a brutal diferença visual entre os dois CSS é motivo suficiente para tirar o chapéu para o Tailwinds. O Tailwinds é capaz de mudar a cor da fonte de um texto, mais escuro para a opção que você escolher na barra de navegação, e menos escuro para as outras opções, e ele ainda é capaz de desenhar uma linha abaixo da opção selecionada. Isso é muito bacana, não sei se vou conseguir imitar o mesmo comportamento com o Bootstrap, por enquanto eu me contento com a posição dos elementos, é o máximo que eu consigo fazer.

 

resources.views.chirps.index.blade.php
<x-app-layout>
    <div class="container mt-2 bg-light">
        <form method="POST" action="{{ route('chirps.index') }}">
            @csrf
            <div class=row>
            <div class=col-md-12>
            <textarea name="message" placeholder="What's on your mind?" cols=50
                class="mt-4">{{ old('message') }}</textarea>
            <x-input-error :messages="$errors->get('message')" class="" />
            </div>
            <div class=col-md-auto>
            <x-primary-button class="btn btn-primary">Chirp</x-primary-button>
            </div>
            </div>
        </form>
        <div class="">
            @foreach ($chirps as $chirp)
                <svg width=30 height=30 xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                </svg>
                <span class="">{{ $chirp->user->name }}</span>
                <small class="">{{ $chirp->created_at->format('j M Y, g:i a') }}</small>
                <p class="">{{ $chirp->message }}</p>
            @endforeach
        </div>
    </div>
</x-app-layout>

Editado Setembro 4 por Frank K Hosaka

[Frank K Hosaka]

Com a ajuda da Gemini, consegui o seguinte:

resources.views.layouts.navigation.blade.php
<style>
    .nav-link.active {color:#333;font-weight:bold}
</style>
<ul class="nav nav-tabs mt-2">
<li class='nav-item'>
<x-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')" 
    class='nav-link active' style=margin-left:120px>
    Dashboard
</x-nav-link>
<li class='nav-item'>
<x-nav-link :href="route('chirps.index')" :active="request()->routeIs('chirps.index')"
    class='nav-link' style=margin-left:120px>
    Chirps
</x-nav-link>
<li class='nav-item' style=margin-left:120px>
<div class=dropdown>
    <button class="btn btn-sm btn-outline-secondary d-inline-flex 
        align-items-center dropdown-toggle" data-bs-toggle=dropdown>
    {{ Auth::user()->name }}
    </button>
    <div class=dropdown-menu>
    <x-dropdown-link :href="route('profile.edit')">
    Profile
    </x-dropdown-link>
    <form method="POST" action="{{ route('logout') }}">
    @csrf
    <x-dropdown-link :href="route('logout')"
        onclick="event.preventDefault();this.closest('form').submit();">
        Log Out
    </x-dropdown-link>
    </form>
    </div>
</div>
</ul>
<script>
    document.addEventListener('DOMContentLoaded', function() {
  const navLinks = document.querySelectorAll('.nav-link');
  const selectedOption = localStorage.getItem('selectedOption');

  // Aplica a classe 'active' ao elemento selecionado anteriormente
  navLinks.forEach(link => {
    if (link.textContent === selectedOption) {
      link.classList.add('active');
    } else {link.classList.remove('active')}
  });

  navLinks.forEach(link => {
    link.addEventListener('click', function() {
      navLinks.forEach(link => link.classList.remove('active'));
      this.classList.add('active');
      localStorage.setItem('selectedOption', this.textContent);
    });
  });
});
</script>