/* Add custom Js code below */ 
  class CustomMainMenu extends HTMLElement {
    connectedCallback() {
      this.innerHTML = `
        <!--original menu location-->
        <nav id="mobile-menu" class="mobile-menu mm-spn--light mm-spn--navbar mm-spn--main" data-mm-spn-title="القائمة الرئيسية">
          <ul class="main-menu mm-spn--open">
            <li class="lg:hidden text-sm font-bold" id="1162426956">
              <a href="https://yafoooh.com/" aria-label="الصفحة الرئيسة" class="text-gray-500" target="_self">
                <span>الصفحة الرئيسة</span>
              </a>
            </li>
            <li class="!hidden lg:!block root-level lg:!inline-block" id="1162426956">
              <a href="https://yafoooh.com/" aria-label="الصفحة الرئيسة" target="_self">
                <span>الصفحة الرئيسة</span>
              </a>
            </li>

            <li class="lg:hidden text-sm font-bold" id="1971220484">
              <a href="https://yafoooh.com/ar/redirect/categories/813711646" aria-label="جميع المنتجات" class="text-gray-500" target="_self">
                <span>جميع المنتجات</span>
              </a>
            </li>
            <li class="!hidden lg:!block root-level lg:!inline-block" id="1971220484">
              <a href="https://yafoooh.com/ar/redirect/categories/813711646" aria-label="جميع المنتجات" target="_self">
                <span>جميع المنتجات</span>
              </a>
            </li>

            <li class="lg:hidden text-sm font-bold" id="1195679493">
              <a href="https://yafoooh.com/ar/redirect/categories/938787545" aria-label="العطور" class="text-gray-500" target="_self">
                <span>العطور</span>
              </a>
            </li>
            <li class="!hidden lg:!block root-level lg:!inline-block" id="1195679493">
              <a href="https://yafoooh.com/ar/redirect/categories/938787545" aria-label="العطور" target="_self">
                <span>العطور</span>
              </a>
            </li>

            <li class="lg:hidden text-sm font-bold" id="287424006">
              <a href="https://yafoooh.com/ar/redirect/categories/658188483" aria-label="الزيوت العطرية" class="text-gray-500" target="_self">
                <span>الزيوت العطرية</span>
              </a>
            </li>
            <li class="!hidden lg:!block root-level lg:!inline-block" id="287424006">
              <a href="https://yafoooh.com/ar/redirect/categories/658188483" aria-label="الزيوت العطرية" target="_self">
                <span>الزيوت العطرية</span>
              </a>
            </li>

            <li class="lg:hidden text-sm font-bold" id="1257849130">
              <a href="https://yafoooh.com/ar/redirect/categories/1293698920" aria-label="العينات" class="text-gray-500" target="_self">
                <span>العينات</span>
              </a>
            </li>
            <li class="!hidden lg:!block root-level lg:!inline-block" id="1257849130">
              <a href="https://yafoooh.com/ar/redirect/categories/1293698920" aria-label="العينات" target="_self">
                <span>العينات</span>
              </a>
            </li>

            <li class="lg:hidden text-sm font-bold" id="1661918471">
              <a href="https://yafoooh.com/ar/redirect/categories/30532058" aria-label="العروض" class="text-gray-500" target="_self">
                <span>العروض</span>
              </a>
            </li>
            <li class="!hidden lg:!block root-level lg:!inline-block" id="1661918471">
              <a href="https://yafoooh.com/ar/redirect/categories/30532058" aria-label="العروض" target="_self">
                <span>العروض</span>
              </a>
            </li>
          </ul>
          <button class="btn--close close-mobile-menu sicon-cancel lg:hidden"></button>
        </nav>
        <button class="btn--close-sm close-mobile-menu sicon-cancel hidden"></button>
      `;
    }
  }

  if (!customElements.get('custom-main-menu')) {
    customElements.define('custom-main-menu', CustomMainMenu);
  }