<x-app-layout title="Starter Sideblock" is-sidebar-open="true" is-header-blur="true">
    <style>
        [x-cloak] {
            display: none;
        }
    </style>
    <div x-data="{
        sidebarOpen: true,
        showSidebarButton: false,
        checkWindowWidth() {
            this.sidebarOpen = window.innerWidth >= 1550;
            this.showSidebarButton = window.innerWidth < 1550;
        }
    }" 
    x-init="checkWindowWidth(); window.addEventListener('resize', () => checkWindowWidth())"
    class="flex h-screen">
        <div x-show="sidebarOpen" x-cloak class=" w-1/5 max-w-[340px] bg-gray-100"
            x-transition:enter="transition transform ease-out duration-300"
            x-transition:enter-start="-translate-x-full" x-transition:enter-end="translate-x-0"
            x-transition:leave="transition transform ease-in duration-300"
            x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full">
            @include('components.sidebar', [
                'currentContent' => $currentContent,
                'userName' => auth()->user()->username ?? '',
            ])
        </div>

        <button @click="sidebarOpen = true" x-show="showSidebarButton" x-cloak
            class="mb-4 ml-2 pt-1 focus:outline-none"
            x-transition:enter="transition ease-out duration-100 transform"
            x-transition:enter-start="opacity-0 -translate-x-full" x-transition:enter-end="opacity-100 translate-x-0"
            x-transition:leave="transition ease-in duration-300 transform"
            x-transition:leave-start="opacity-100 translate-x-0" x-transition:leave-end="opacity-0 -translate-x-full">
            <svg xmlns="http://www.w3.org/2000/svg" x-show="!sidebarOpen" class="h-6 w-6" fill="black" viewBox="0 0 24 24" stroke="black">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
            </svg>
        </button>

        <div :class="sidebarOpen ? 'lg:w-4/5 mr-5' : 'w-full ml-2 mr-5'" class="transition-all duration-300">
            <livewire:main-container :currentContent="$currentContent" />
        </div>
    </div>
</x-app-layout>
