Untitled

import { useCategoryData } from "../context/CategoryProvider";
import { SkeletonMobileMenuBase } from "./Skeleton";
import chevronDownIcon from '../assets/img/header/chevron-down.svg';

const MobileNavMenu = () => {
  
  const categoryData = useCategoryData();

  const showSubMenuHandler = (event) => {
    let chevron = event.currentTarget.childNodes[0] || event.target;
    let ulSubMenu = event.currentTarget.parentNode.parentNode.childNodes[1].classList.contains('h-0') ? event.currentTarget.parentNode.parentNode.childNodes[1] : event.currentTarget.parentNode.childNodes[1].classList.contains('h-0') ? event.currentTarget.parentNode.childNodes[1] : '';
    chevron.classList.toggle('!rotate-180');
    event.currentTarget.parentNode.parentNode.classList.contains('level-1') && event.currentTarget.classList.toggle('!bg-[#F8F8F8]');
    event.currentTarget.classList.toggle('rounded-lg');
    ulSubMenu.classList.toggle('!h-auto');
    ulSubMenu.classList.toggle('!py-1');
  }

  return ( 
    <div className=" px-4 py-3 h-[calc(100%-60px)] overflow-y-auto">
      {!categoryData && <SkeletonMobileMenuBase />}
      {categoryData && 
        <nav>
          <ul className="text-[#626161] font-medium text-[15px] level-1">
            {
              categoryData.map((item,index) => {
                return(
                  <li key={index}>
                    <div className="flex gap-3 p-2.5" onClick={(e)=> showSubMenuHandler(e)}>
                      <img src={chevronDownIcon} width="13" className="transition-all duration-300 chevron" alt="" />
                      <span>{item.name}</span>
                    </div>
                    <ul className="overflow-hidden h-0 mr-2 text-[13px] font-normal">
                      {
                        item.childs.map((item, index) => {
                          return(
                            <li key={index}>
                              <div className="flex gap-3 p-2.5">
                                <img src={chevronDownIcon} width="12" className="transition-all duration-300 chevron mb-1.5" onClick={(e)=> showSubMenuHandler(e)} alt="" />
                                <a href={item.url}>{item.name}</a>
                              </div>
                              <ul className="overflow-hidden h-0 mr-4 space-y-2 text-[13px] font-normal">
                                {
                                  item.childs.map((item, index) => {
                                    return(
                                      <li key={index}>
                                        <div className="flex gap-3 px-2.5">
                                          <img src={chevronDownIcon} width="12" className="transition-all duration-300 chevron mb-1.5" onClick={(e)=> showSubMenuHandler(e)} alt="" />
                                          <a href={item.url}>{item.name}</a>
                                        </div>
                                        <ul className="overflow-hidden h-0 py-0 mr-6 space-y-3 text-[13px] mt-2 font-normal">
                                          {
                                            item.childs.map((item, index) => {
                                              return(
                                                <li key={index}>
                                                  <a href={item.url}>{item.name}</a>
                                                </li>
                                              )
                                            })
                                          }
                                        </ul>
                                      </li>
                                    )
                                  })
                                }
                              </ul>
                            </li>
                          )
                        })
                      }
                    </ul>
                  </li>
                ) 
              })
            }
          </ul>
        </nav>
      }
    </div>
   );
}
 
export default MobileNavMenu;