<Disclosure as="div" className="text-white">
            {({ open }) => (
                <>

      <Disclosure.Button className="md:hidden inline-block ">
         {open ? <XMarkIcon className='block h-8' /> : <Bars3Icon className="block h-8 " />}
      </Disclosure.Button>



                    <Transition
                        show={open}
                        enter="transform  transition ease-in-out duration-300 "
                        enterFrom="translate-y-full opacity-0"
                        enterTo="translate-y-0  opacity-100"
                        leave="transform transition ease-in-out duration-300 "
                        leaveFrom="translate-y-0 opacity-100"
                        leaveTo="translate-y-full opacity-0">


                        <Disclosure.Panel as='div' className="fixed md:hidden">
                            <div className=' h-screen w-screen bg-gray-500 p-5 text-center' >
                                <ul>
                                    <li>asd</li>
                                </ul>
                            </div>
                        </Disclosure.Panel>
                    </Transition>

                </>
            )}
</Disclosure>

As the title says. The transition for y axis does not work. But if I change y into x the transform transition does work. I am using Disclosure to show and hide the panel

I did try removing the fixed class but it goes with the body content not above it.