<div class=" sticky -top-4 lg:-top-11 z-50 transition duration ease-in-out pt-4 lg:pt-11" x-data="{ atTop: false }">
    <div x-data="mobile_menu" class="w-full  sticky top-0 z-50">
        @php
            $pages = \Modules\Page\Models\Page::where('extras->show', '1')->whereNull('parent_id')->orderBy('lft')->get();
        @endphp
        <div class="mx-auto " :class="{ 'container px-3 md:px-0 lg:px-4': !atTop }">
            <!-- glass-bg -->
            <nav class="px-2 md:px-4 py-2.5 bg-white shadow-lg shadow-[#4c4c4c30]" :class="{ 'rounded-lg': !atTop }"
                 @scroll.window="atTop = (window.pageYOffset < 50 ) ? false: true">
                <div class="flex flex-wrap justify-between items-right mx-auto max-w-screen-xl">
                    <a href="/" class="flex items-center">
                        <img src="{{theme('/img/ghadirtv-logo.png')}}" class="mr-3 h-6 sm:h-9" alt="" />
                    </a>
                    <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" 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 sm:flex">
                        <div class="flex 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">
                                @foreach($pages as $page)
                                    @php
                                        $condition = false;
                                        if(session('vod_profile') and session('vod_profile')->kids and (int) $page->withFakes()->for_kids_profile) {
                                            $condition = true;
                                        } elseif (session('vod_profile') and !session('vod_profile')->kids and !(int) $page->withFakes()->for_kids_profile){
                                            $condition = true;
                                        } elseif (!session('vod_profile') and !(int) $page->withFakes()->for_kids_profile) {
                                            $condition = true;
                                        }
                                    @endphp
                                    @if($condition)
                                        <li>
                                            <a href="{{$page->getPageLink()}}" aria-label="{{$page->title}}" 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">{{$page->title}}</a>
                                        </li>
                                    @endif
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
            </nav>
        </div>

        <!-- mobile menu -->
        <div x-show="mobile_menu" x-cloak 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" 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">منو</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" >
                    <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="{{url('/')}}" class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg">
                                <span class="ml-3">خانه</span>
                            </a>
                        </li>
                        <li>
                            <a href="{{url('videos')}}" class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg">
                                <span class="ml-3">ویدیوها</span>
                            </a>
                        </li>
                        <li>
                            <a href="{{url('/تماس-با-ما')}}" class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg">
                                <span class="ml-3">تماس با ما</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--/ mobile menu -->
    </div>
</div>
