Slide-over Help

[topwebworks]

Slide-out Request:
Example of a slide-over triggered from a button in AlpineJS. Use is a filter button that opens a filter list slide-out that still allows the background to keep the interaction.

[topwebworks]

This worked out better than repurposing the slide-over.

<div class="pb-6" x-data="{ openFilters: false }">



    <!-- Button Start -->

    <div class="flex flex-wrap items-center">

        <div class="relative pb-2 text-left md:inline-block md:-mb-8">

            <a href="#" @click="openFilters = !openFilters" type="button"
                class="inline-flex items-center px-2.5 py-1.5 border border-gray-300 shadow-sm text-xs font-medium rounded text-gray-700 bg-transparent hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-aloBlue-500"
                aria-haspopup="true" x-bind:aria-expanded="openFilters">
                <span class="sr-only">Open options</span>
                <svg class="-ml-0.5 mr-1 h-4 w-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                    fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd"
                        d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z"
                        clip-rule="evenodd" />
                </svg>
                Filters
            </a>

        </div>

    </div>


    <!-- Sidenav Start -->

    <div id="mySidenav" x-show="openFilters"
                        class="fixed flex flex-col w-64 px-2 pt-3 pb-2 overflow-x-hidden overflow-y-auto bg-gray-200 border-l border-gray-300 shadow-md -right-4 sidenav z-1"
                        style="top: 7.125rem; height: calc(100vh - 7.125rem);"
                        x-transition:enter="transition-opacity ease-linear duration-200"
                        x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
                        x-transition:leave="transition-opacity ease-linear duration-200"
                        x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">

        <a href="#" class="absolute text-3xl font-light text-gray-500 top-3 right-9"
            @click.prevent="openFilters = false">&times;</a>

        <div class="px-2 py-2">
            <h3 class="text-lg font-bold leading-6 text-gray-500">
                Filter List
            </h3>
        </div>

        <p>Filter list contents</p>

    </div>



</div>