Untitled

 <div className={`${scroll ? 'bg-[#ffffff] ' : ''}  lg:hidden flex h-[90px] px-6 md:px-10 z-50 header  justify-between items-center fixed w-full backdrop-blur-sm`} >
        <Image src={path === '/' ? '/home/menu_white.svg' : '/home/menu.svg'} width={35} height={35} alt="hamburger" onClick={handleHamburger} className={`${scroll ? 'scroll-hidden' : 'scroll-block'} cursor-pointer `} />
        <Image src={'/home/menu.svg'} width={35} height={35} alt="hamburger" onClick={handleHamburger} className={`${scroll ? 'scroll-block' : 'scroll-hidden'} cursor-pointer `} />

        <Image src={path === '/' ? "/isma_logo_white.svg" : "/home/logo_mobile.svg"} width={60} height={60} alt="hamburger" className={`${scroll ? 'scroll-hidden' : 'scroll-block'} cursor-pointer `} onClick={handleLogoClick} />

        <Image src='home/logo_mobile.svg' width={60} height={60} alt="logo" className={`${scroll ? 'scroll-block' : 'scroll-hidden'} cursor-pointer`} onClick={handleLogoClick} />
        <Image src={path === "/" ? "/home/search_white.svg" : "/home/search.svg"} width={35} height={35} alt="hamburger" className={`${scroll ? 'scroll-hidden' : 'scroll-block'} cursor-pointer `} />
        <Image src={'/home/search.svg'} width={35} height={35} alt="hamburger" className={`${scroll ? 'scroll-block' : 'scroll-hidden'} cursor-pointer `} />

      </div>
      <div className={`w-full bg-white  h-screen  lg:hidden fixed  px-[20px] py-[20px] top-[-2px] left-0 right-0 bottom-0  transition-transform ease-in-out duration-300 ${hamburger ? 'transform translate-x-0 z-50' : 'transform translate-x-full z-0'}`} >
        <div className="flex px-[20px] mt-[20px] mb-7  justify-between mx-2 md:mx-3">
          <div className="w-[50%]  flex" onClick={handleBack}>
            <Image src='/home/arrow_warm_up_black.svg' width={18} height={12} alt="back-arrow" className="align-middle rotate-180 cursor-pointer" />
          </div>
          <div className="">
            <Image
              src="/home/isma_logo_black.svg"
              width={100}
              height={100}
              alt="img"
              onClick={handleBlackLogoClick}
              className='cursor-pointer'
            />
          </div>
        </div>
        <div className="mx-6 md:mx-10 ">
          <div className=" gap-3 justify-around items-center  text-[20px] ">
            {pages.map(page => (
              <div key={page.page_id} className="mb-7 font-[450] ">
                {/* the page data divide into to one direct page link and another collection of pages  */}
                {page.link ? (
                  <div className="">
                    <div className="flex gap-4">
                      <a className="font-theme-family" href={page.link}>{page.title}</a>
                      {page?.subPages &&
                        <Image
                          onClick={() => setSelectedOption(
                            selectedOption === page.page_id ? null : page.page_id
                          )}
                          src={selectedOption === page.page_id ? homeUrls.arrow_down_green : homeUrls.arrow_down}
                          width={15}
                          height={5}
                          alt="arrow"
                          className={`lg:ml-[-25px] lg:mr-8 xl:mr-0 xl:ml-[-15px] mt-[12px] w-3 h-2 cursor-pointer transition-transform ${selectedOption === page.page_id ? 'rotate-180' : 'rotate-0'}`}
                        />
                      }
                    </div>
                    {selectedOption === page?.page_id && page?.subPages && (
                      <div className=" p-3  rounded-[8px] box-shadow z-10">
                        {page.subPages?.map(subPage => (
                          <a href={subPage.link} key={subPage.page_id}>
                            <p className="p-2 hover:bg-theme-orange hover:rounded-[5px] public-sans text-black">{subPage.title}</p>
                          </a>
                        ))}
                      </div>
                    )}
                  </div>

                ) : (
                  ''
                )}
              </div>
            ))}
            <a className="font-theme-family font-[450] text-[20px]" href="/login">Member Login</a>
          </div>

        </div>

      </div>