Alpine.js in christophrumpel/larastreamers

package.json

{
   //
    "devDependencies": {
        //
        "alpinejs": "^2.8.2"
    },
   //
}

resources/views/layouts/app.blade.php

Open in GitHub

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        //
        <script src="{{ mix('js/app.js') }}" defer></script>
    </head>
//

resources/views/pages/partials/nav.blade.php

Open in GitHub

<nav x-data="{ isOpen: false }">
    <div class="max-w-6xl mx-auto px-2 sm:px-6 lg:px-8">
        //
    </div>

    <!-- Mobile menu, show/hide based on menu state. -->
    <div
        x-show="isOpen"
        x-transition:enter="transition ease-out duration-100 transform"
        x-transition:enter-start="opacity-0 scale-95"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-75 transform"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-95"
        class="sm:hidden" id="mobile-menu">
        <div class="pt-2 pb-4 space-y-1">
            <x-nav-mobile-link :link="route('home')" name="Home" route-name="home"/>
            <x-nav-mobile-link :link="route('submission')" name="Submit" route-name="submission"/>
            <x-nav-mobile-link :link="route('archive')" name="Archive" route-name="archive"/>
        </div>
    </div>
</nav>