DOCUMENTATION

<div class="w-full">
    <div class="flex flex-wrap">
        <div x-data="{ open: false }">
            <button type="button" x-on:click="scrolldisable()" @click="open = !open"
                class=" relative whitespace-nowrap inline-block px-6 py-2 mb-4 mr-4 text-center text-white duration-700 bg-blue-500 border border-blue-500 rounded shadow-md hover:shadow-xl hover:bg-blue-600 focus:bg-blue-600">
                Toggle top Offcanvas
            </button>
            <div class="fixed w-full h-full top-0 z-50" x-show="open" style="display: none;">
                <span x-on:click="scrollenable()"
                    class="fixed bg-gray-900 bg-opacity-70 w-full h-full inset-x-0 top-0"></span>
                <!-- Mobile navbar -->
                <nav class="top-0 w-full left-0 fixed py-4 bg-white dark:bg-gray-800 h-64 overflow-auto z-40"
                    x-show="open" @click.away="open=false" x-description="Mobile menu" role="menu"
                    x-transition:enter="transform transition-transform duration-700"
                    x-transition:enter-start="-translate-y-full" x-transition:enter-end="-translate-y-0"
                    x-transition:leave="transform transition-transform duration-700"
                    x-transition:leave-start="-translate-y-0" x-transition:leave-end="-translate-y-full">
                    <div class="p-3">
                        <h3 class="text-2xl font-semibold text-gray-700">Offcanvas top</h3>
                        <a x-on:click="scrollenable()"
                            class="absolute mr-2 top-1 right-5 text-4xl cursor-pointer text-black dark:text-white"
                            @click="open = !open">&times;</a>
                    </div>
                    <p class="p-3 text-gray-500">....</p>
                </nav>
            </div><!-- End Mobile menu -->
        </div>

        <div x-data="{ open: false }">
            <button type="button" x-on:click="scrolldisable()" @click="open = !open"
                class=" relative whitespace-nowrap inline-block px-6 py-2 mb-4 mr-4 text-center text-white duration-700 bg-blue-500 border border-blue-500 rounded shadow-md hover:shadow-xl hover:bg-blue-600 focus:bg-blue-600">
                Toggle right Offcanvas
            </button>
            <div class="fixed w-full h-full right-0 z-50" x-show="open" style="display: none;">
                <span x-on:click="scrollenable()"
                    class="fixed bg-gray-900 bg-opacity-70 w-full h-full inset-x-0 top-0"
                    x-transition:enter="transform transition-transform duration-700"
                    x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0"
                    x-transition:leave="transform transition-transform duration-700"
                    x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full"></span>
                <!-- Mobile navbar -->
                <nav class="right-0 md:w-96 w-full fixed top-0 py-4 bg-white dark:bg-gray-800 h-full overflow-auto z-40"
                    x-show="open" @click.away="open=false" x-description="Mobile menu" role="menu"
                    x-transition:enter="transform transition-transform duration-700"
                    x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0"
                    x-transition:leave="transform transition-transform duration-700"
                    x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full">
                    <div class="p-3">
                        <h3 class="text-2xl font-semibold text-gray-700">Offcanvas right</h3>
                        <a x-on:click="scrollenable()"
                            class="absolute mr-2 top-1 right-5 text-4xl text-black cursor-pointer dark:text-white"
                            @click="open = !open">&times;</a>
                    </div>
                    <p class="p-3 text-gray-500">....</p>
                </nav>
            </div><!-- End Mobile menu -->
        </div>

        <div x-data="{ open: false }">
            <button type="button" x-on:click="scrolldisable()" @click="open = !open"
                class=" relative whitespace-nowrap inline-block px-6 py-2 mb-4 mr-4 text-center text-white duration-700 bg-blue-500 border border-blue-500 rounded shadow-md hover:shadow-xl hover:bg-blue-600 focus:bg-blue-600">
                Toggle bottom Offcanvas
            </button>
            <div class="fixed w-full h-full botttom-0 z-50" x-show="open" style="display: none;">
                <span x-on:click="scrollenable()"
                    class="fixed bg-gray-900 bg-opacity-70 w-full h-full inset-x-0 top-0"></span>
                <!-- Mobile navbar -->
                <nav class="bottom-0 w-full fixed right-0 py-4 bg-white dark:bg-gray-800 h-64 overflow-auto z-40"
                    x-show="open" @click.away="open=false" x-description="Mobile menu" role="menu"
                    x-transition:enter="transform transition-transform duration-700"
                    x-transition:enter-start="translate-y-full" x-transition:enter-end="translate-y-0"
                    x-transition:leave="transform transition-transform duration-700"
                    x-transition:leave-start="translate-y-0" x-transition:leave-end="translate-y-full">
                    <div class="p-3">
                        <h3 class="text-2xl font-semibold text-gray-700">Offcanvas bottom</h3>
                        <a x-on:click="scrollenable()"
                            class="absolute mr-2 cursor-pointer top-1 right-5 text-4xl text-black dark:text-white"
                            @click="open = !open">&times;</a>
                    </div>
                    <p class="p-3 text-gray-500">....</p>
                </nav>
            </div><!-- End Mobile menu -->
        </div>

        <div x-data="{ open: false }">
            <button type="button" x-on:click="scrolldisable()" @click="open = !open"
                class=" relative whitespace-nowrap inline-block px-6 py-2 mb-4 mr-4 text-center text-white duration-700 bg-blue-500 border border-blue-500 rounded shadow-md hover:shadow-xl hover:bg-blue-600 focus:bg-blue-600">
                Toggle Left Offcanvas
            </button>
            <div class="fixed w-full h-full left-0 z-50" x-show="open" style="display: none;">
                <span x-on:click="scrollenable()"
                    class="fixed bg-gray-900 bg-opacity-70 w-full h-full inset-x-0 top-0"></span>
                <!-- Mobile navbar -->
                <nav class="left-0 md:w-96 w-full fixed top-0 py-4 bg-white backdrop-blur-sm dark:bg-gray-800 h-full overflow-y-hidden z-40"
                    x-show="open" @click.away="open=false"
                    x-transition:enter="transform transition-transform duration-700"
                    x-transition:enter-start="-translate-x-full" x-transition:enter-end="-translate-x-0"
                    x-transition:leave="transform transition-transform duration-700"
                    x-transition:leave-start="-translate-x-0" x-transition:leave-end="-translate-x-full">
                    <div class="p-3">
                        <h3 class="text-2xl font-semibold text-gray-700">Offcanvas left</h3>
                        <a x-on:click="scrollenable()"
                            class="absolute mr-2 top-1 right-5 cursor-pointer text-4xl text-black dark:text-white"
                            @click="open = !open">&times;</a>
                    </div>
                    <p class="p-3 text-gray-500">....</p>
                </nav>
            </div><!-- End Mobile menu -->
        </div>

        <div x-data="{ open: false }">
            <button type="button" @click="open = !open"
                class=" relative whitespace-nowrap inline-block px-6 py-2 mb-4 mr-4 text-center text-white duration-700 bg-blue-500 border border-blue-500 rounded shadow-md hover:shadow-xl hover:bg-blue-600 focus:bg-blue-600">
                Toggle Scroll Offcanvas
            </button>
            <div class="fixed w-full h-full left-0 z-50" x-show="open" style="display: none;">
                <span x-on:click="scrollenable()"
                    class="fixed bg-gray-900 bg-opacity-70 w-full h-full inset-x-0 top-0"></span>
                <!-- Mobile navbar -->
                <nav class="left-0 md:w-96 w-full fixed top-0 py-4 bg-white backdrop-blur-sm dark:bg-gray-800 h-full overflow-y-hidden z-40"
                    x-show="open" @click.away="open=false"
                    x-transition:enter="transform transition-transform duration-700"
                    x-transition:enter-start="-translate-x-full" x-transition:enter-end="-translate-x-0"
                    x-transition:leave="transform transition-transform duration-700"
                    x-transition:leave-start="-translate-x-0" x-transition:leave-end="-translate-x-full">
                    <div class="p-3">
                        <h3 class="text-2xl font-semibold text-gray-700">Offcanvas Scroll</h3>
                        <a class="absolute mr-2 top-1 right-5 cursor-pointer text-4xl text-black dark:text-white"
                            @click="open = !open">&times;</a>
                    </div>
                    <p class="p-3 text-gray-500">....</p>
                </nav>
            </div><!-- End Mobile menu -->
        </div>
    </div>
</div>
      

var body=document.querySelector('body');
  function scrolldisable(){
    body.classList.add("pr-4");
    body.classList.add("overflow-y-hidden");
  }
  function scrollenable(){
    body.classList.remove("overflow-y-hidden");
    body.classList.remove("pr-4");
  }