Blade layout file not working on one page

Hi! I have a blade layout file app.blade.php and it is working as expected on all of my views but one. Here is the layout file:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <title>Elephant in the Room</title>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link href="{{ asset('css/app.css') }}" rel="stylesheet">
        <script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
        <!-- The "defer" attribute is important to make sure Alpine waits for Livewire to load first. -->
    
        <title>Elephant in the Room</title>

        @livewireStyles
    </head>
    <body class="antialiased bg-zinc-300">
        <div class="flex items-center justify-between text-white bg-purple-400 p-2">
            <button type="button" class="inline text-2xl font-bold" onclick=window.location="{{ route('dashboard') }}">
                Elephant in the Room
            </button>

        <x-hamburger>
            <x-slot name="trigger">
                <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                    <path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                    <path :class="{'hidden': ! open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </x-slot>

            <a class="block px-4 py-1 text-black hover:bg-gray-400 text-sm" href="/">Home</a>
            <a class="block px-4 py-1 text-black hover:bg-gray-400 text-sm" href="/rules">Rules</a>
            <a class="block px-4 py-1 text-black hover:bg-gray-400 text-sm" href="https://discord.gg/hxtNN5SafM">Join the Discord</a>
            <form method="POST" action="{{ route('logout') }}">
                @csrf
                <x-responsive-nav-link :href="route('logout')"
                        onclick="event.preventDefault();
                                    this.closest('form').submit();">
                    {{ __('Log Out') }}
                </x-responsive-nav-link>
            </form>
        </x-hamburger>

        </div>
        <div class="mx-auto max-w-sm">

            {{ $slot ?? '' }}

            @livewireScripts
        </div>
    </body>
</html>

In this particular view, right now all I'm doing is rendering a livewire component:

 <x-app>
    <livewire:board/>
 </x-app>

The nav bar from my layout file appears exactly as expected, but the links/buttons in the nav bar become unresponsive and do nothing when I click on them. What's weird is that if I delete the livewire component from that view, the links all work again. Any ideas?

da_Mask

3 years ago

Level 13

Have you tried moving your @LivewireScripts to outside of that div, to just above the closing </body> tag?

Snapey

3 years ago

Level 122

check browser console?

check that the view for the livewire component has balancing open and close tags

Please or to participate in this conversation.