How can I convert my mobile nav menu into an accordion on Envy themes?

Store Design
, , ,
1

I’m using “envy” themes in my website. Can anyone help me to change the code of this mobile nav section to accrodion/dropdown not multi pages?

code of nav-mobile.liquid:

{% assign navMobile = linklists[section.settings.main_linklist] %}

<script type="application/json" id="mobile-menu-data">
{
    {% for link in navMobile.links %}
        {% assign forloop_1 = forloop %}
        {% unless forloop.first %},{% endunless %}
        "{{ forloop_1.index0 }}": {
            "level": 0,
            "url": "{{ link.url }}",
            "title": {{ link.title | json }},
            "links": [
                {% for sublink in link.links %}
                    "{{ forloop_1.index0 }}--{{ forloop.index0 }}"{% unless forloop.last %},{% endunless %}
                {% endfor %}
            ]
        }
        {% for sublink in link.links %}
          {% assign forloop_2 = forloop %}
            , "{{ forloop_1.index0 }}--{{ forloop_2.index0 }}": {
            "level": 1,
            "url": "{{ sublink.url }}",
            "title": {{ sublink.title | json }},
            "links": [
                {% for subsublink in sublink.links %}
                    "{{ forloop_1.index0 }}--{{ forloop_2.index0 }}--{{ forloop.index0 }}"{% unless forloop.last %},{% endunless %}
                {% endfor %}
            ]
        }
        {% for subsublink in sublink.links %}
        {% assign forloop_3 = forloop %}
        , "{{ forloop_1.index0 }}--{{ forloop_2.index0 }}--{{ forloop_3.index0 }}": {
            "level": 2,
            "url": "{{ subsublink.url }}",
            "title": {{ subsublink.title | json }},
            "links": []
        }
        {% endfor %}
        {% endfor %}
    {% endfor %}
}
</script>

<div class="mobile-menu-close">
  <button
    type="button"
    class="slide-menu menu-close-icon mobile-menu-close alt-focus"
    aria-label="{{ 'general.menu.close_nav' | t }}">
    <i data-feather="x" aria-hidden="true"></i>
  </button>
</div>

<ul
  class="mobile-menu active mobile-menu-main{% if section.settings.search-enable %} search-enabled{% else %} search-disabled{% endif %}"
  id="mobile-menu--{{ navMobile.handle }}"
>
  {% for link in navMobile.links %}
    <li {% if link.links != blank %} class="mobile-menu-link__has-submenu"{% endif %}>
      {% if link.links != blank %}
      <button
        type="button"
        class="alt-focus mobile-menu-link mobile-menu-sub mobile-menu-link__text{% if settings.navigation--font == 'subheading' %} type-subheading{% endif %}"
        data-link="{{ forloop.index0 }}"
        aria-expanded="false"
      >
        {{ link.title | escape }}

        <i data-feather="chevron-right"></i>
      </button>
      {% else %}
        <a
          class="alt-focus mobile-menu-link mobile-menu-link__text{% if settings.navigation--font == 'subheading' %} type-subheading{% endif %}"
          data-link="{{ forloop.index0 }}"
          href="{{ link.url }}"
        >
          {{ link.title | escape }}
        </a>
      {% endif %}
    </li>
  {% endfor %}

  <div id="mobile-topbar"></div>

  {% if shop.customer_accounts_enabled %}
    {% if customer %}
      <li class="mobile-customer-link{% if settings.navigation--font == 'subheading' %} type-subheading{% endif %}"><a href="{{ routes.account_url }}" class="mobile-menu-link">{{ 'customer.account.title' | t }}</a></li>
      <li class="mobile-customer-link{% if settings.navigation--font == 'subheading' %} type-subheading{% endif %}">{{ 'layout.customer.log_out' | t | customer_logout_link | replace: '<a', '<a class="mobile-menu-link"' }}</li>
    {% else %}
      <li class="mobile-customer-link{% if settings.navigation--font == 'subheading' %} type-subheading{% endif %}">{{ 'layout.customer.log_in' | t | customer_login_link | replace: '<a', '<a class="mobile-menu-link"' }}</li>
      {% if shop.customer_accounts_optional %}
        <li class="mobile-customer-link{% if settings.navigation--font == 'subheading' %} type-subheading{% endif %}">{{ 'customer.register.title' | t | customer_register_link | replace: '<a', '<a class="mobile-menu-link"' }}</li>
      {% endif %}
    {% endif %}
  {% endif %}

  {% render 'social-links' %}
</ul>

<div class="mobile-menu mobile-menu-child mobile-menu-hidden">
  <button
    type="button"
    class="mobile-menu-back alt-focus mobile-menu-link"
    tabindex="-1"
  >
    <i data-feather="chevron-left" aria-hidden="true"></i>
    <div>Back</div>
  </button>

  <ul
    id="mobile-menu"
  >
    <li>
      <a
        href="#"
        class="alt-focus mobile-menu-link top-link"
        tabindex="-1"
      >
        <div class="mobile-menu-title{% if settings.navigation--font == 'subheading' %} type-subheading{% endif %}"></div>
      </a>
    </li>
  </ul>
</div>

<div class="mobile-menu mobile-menu-grandchild mobile-menu-hidden">
  <button
    type="button"
    class="mobile-menu-back alt-focus mobile-menu-link"
    tabindex="-1"
  >
    <i data-feather="chevron-left" aria-hidden="true"></i>
    <div>Back</div>
  </button>

  <ul
    id="mobile-submenu"
  >
    <li>
        <a
          href="#"
          class="alt-focus mobile-menu-link top-link"
          tabindex="-1"
        >
            <div class="mobile-menu-title{% if settings.navigation--font == 'subheading' %} type-subheading{% endif %}"></div>
        </a>
    </li>
  </ul>
</div>

preview of the themes from developer: https://envy-oslo.myshopify.com/