Laravel Breezeが仕事でも使えないかと思い少しだけ触ってみたところ、ログインしていない状態でもnavigation.blade.phpが使えると便利だなーと思ったので少しだけ変更してみました。

開発環境

Laravel 8.63.0

何をしたかったか

breezeのheaderが結構かっこよかったので、ログインしていない状態でも使いたいと思いました。

変更したいファイル。

app.blade.php

navigation.blade.php

やること

navigationがログインしていない時に対応していない。
navigationの下のタイトルは不要な画面も結構ありそうなので削除する。

いろいろ触ってみたところこれだけで対応できそう。

@authを使ってログイン状態を管理する

・ログイン時、ドロップダウンで表示する。未ログイン時は、loginとresisterを表示するように変更。

@if (Route::has('login'))
    @auth
    <div class="px-4">
        <div class="font-medium text-base text-gray-800">{{ Auth::user()->name }}</div>
        <div class="font-medium text-sm text-gray-500">{{ Auth::user()->email }}</div>
    </div>

    <div class="mt-3 space-y-1">
        <!-- Authentication -->
        <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>
    </div>
    @else
        <a href="{{ route('login') }}" class="text-sm text-gray-700 dark:text-gray-500 underline">Log in</a>

        @if (Route::has('register'))
            <a href="{{ route('register') }}" class="ml-4 text-sm text-gray-700 dark:text-gray-500 underline">Register</a>
        @endif
    @endauth
@endif

こんな感じで追加しました。

もともとは@autoがないので、ログインしていない状態だと{{ Auth::user()->name }}の記述でエラーを吐かれてしまいます。

これならエラーを吐かれずに、ログインしていない状態の場合は、loginとresisterが表示されるようになります。

他にも2箇所同様の変更しました。

・ナビゲーション（PC）版のリンクの表示。未ログイン時は表示されない。

navigation.blade.php

<!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
    @if (Route::has('login'))
        @auth
            <x-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">
                {{ __('Dashboard') }}
            </x-nav-link>
        @endauth
    @endif
</div>

・レスポンシブのメニュー

<div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden">
    <div class="pt-2 pb-3 space-y-1">
        @if (Route::has('login'))
            @auth
            <x-responsive-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">
                {{ __('Dashboard') }}
            </x-responsive-nav-link>
            @endauth
        @endif
    </div>

    <!-- Responsive Settings Options -->
    <div class="pt-4 pb-1 border-t border-gray-200">
        @if (Route::has('login'))
            @auth
            <div class="px-4">
                <div class="font-medium text-base text-gray-800">{{ Auth::user()->name }}</div>
                <div class="font-medium text-sm text-gray-500">{{ Auth::user()->email }}</div>
            </div>

            <div class="mt-3 space-y-1">
                <!-- Authentication -->
                <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>
            </div>
            @else
                <x-responsive-nav-link :href="route('login')">
                    {{ __('Log In') }}
                </x-responsive-nav-link>

                @if (Route::has('register'))
                    <x-responsive-nav-link :href="route('register')">
                        {{ __('Register') }}
                    </x-responsive-nav-link>
                @endif
            @endauth
        @endif
        
    </div>
</div>

個人開発なのでかなりざっくりと作りましたが、結構いい感じです。いろいろ使えそうです。