<div class=" sticky top-0 z-50 transition duration ease-in-out">
    <div x-data="mobile_menu" class="w-full  sticky top-0 z-50">
        <div class="mx-auto ">
            <!-- glass-bg -->
            <nav class="px-2 md:px-4 py-2.5 bg-white shadow-lg shadow-[#4c4c4c30]">
                <div class="flex flex-wrap justify-between items-right mx-auto max-w-screen-xl">
                    <div class="flex flex-wrap">
                        <a href="{{url()->previous()}}" wire:navigate class="flex items-center align-middle">
                            <i class="las la-arrow-right mr-3 text-2xl" alt="" ></i>
                        </a>
                        <a href="{{url('/')}}" wire:navigate class="flex items-center">
                            <img src="{{theme('/img/ghadir.png')}}" class="mr-3 h-6 sm:h-9" alt="" />
                        </a>
                    </div>
                    <div class="flex items-center md:order-2 relative" x-data="popup">
                        <a @click.prevent="show" href="#" class="bg-[#007f3f] text-white hover:bg-brand-800 focus:ring-4 font-bold rounded-lg text-sm px-4 py-2 md:px-8 md:py-2.5 mr-1 md:mr-2 bg-gradient-to-tr from-brand-300 to-brand-700 focus:outline-none">ورود | ثبت نام</a>
                        <button @click="toggle" type="button" class="mr-1 inline-flex items-center p-2 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mega-menu" aria-expanded="false">
                            <svg aria-hidden="true" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
                        </button>
                    </div>
                    <div class="hidden justify-between items-center w-full text-sm md:flex md:w-auto md:order-1">
                        <ul class="flex flex-col mt-4 font-medium md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0">
                            <li>
                                <a wire:navigate href="{{url('/')}}" class="block py-2 pr-4 pl-3 text-brand-500 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-brand-700 md:p-0 dark:text-brand-100 md:dark:hover:text-brand-400 dark:hover:bg-gray-700 dark:hover:text-brand-100 md:dark:hover:bg-transparent dark:border-gray-700" aria-current="page">خانه</a>
                            </li>
                            <li>
                                <a wire:navigate href="{{url('videos')}}" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-brand-500 md:p-0 dark:text-gray-400 md:dark:hover:text-brand-400 dark:hover:bg-gray-700 dark:hover:text-brand-100 md:dark:hover:bg-transparent dark:border-gray-700">دسته بندی</a>
                            </li>
                            <li>
                                <a wire:navigate href="{{url('live')}}" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-brand-500 md:p-0 dark:text-gray-400 md:dark:hover:text-brand-400 dark:hover:bg-gray-700 dark:hover:text-brand-100 md:dark:hover:bg-transparent dark:border-gray-700">پخش زنده</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>

        <!-- mobile menu -->
        <div x-show="mobile_menu" class="bg-gray-600 bg-opacity-20 fixed z-40 h-screen w-screen top-0">
            <div
                x-show="mobile_menu"
                x-transition:enter="transition ease-in-out duration-200 transform"
                x-transition:enter-start="translate-x-5 opacity-0"
                x-transition:enter-end="translate-x-0 opacity-100"
                x-transition:leave="transition ease-in-out duration-200"
                x-transition:leave-start="opacity-100"
                x-transition:leave-end="translate-x-5 opacity-0"
                @click.away="toggle"
                class="fixed z-50 h-screen p-4 overflow-y-auto bg-white w-80 dark:bg-gray-800" tabindex="-1" aria-labelledby="drawer-disable-body-scrolling-label">
                <h5 id="drawer-disable-body-scrolling-label" class="text-base font-semibold text-gray-500 uppercase dark:text-gray-400">منو</h5>
                <button @click="close" type="button" aria-controls="drawer-disable-body-scrolling" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 absolute top-2.5 left-2.5 inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" >
                    <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
                </button>
                <div class="py-4 overflow-y-auto">
                    <ul class="space-y-2">
                        <li>
                            <a href="" class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
                                <span class="ml-3">خانه</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
                                <span class="ml-3">دسته بندی</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
                                <span class="ml-3">پخش زنده</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--/ mobile menu -->
    </div>
</div>
