{% if categories %}
    <div id="_desktop_top_menu" class="menu js-top-menu d-lg-inline-block {{ ishome }}">
      <h2 class="home-title d-none d-lg-block">
        <div class="wrapper-menu">
          <span>
            <img src="https://sparrow.gcc-demo.com//catalog/view/image/sparrowTop.svg">
        </span>
        </div>
        Browse Categories
      </h2>  
        {# add class name as 'mega-menu' LIKE class="mega-menu" #}
        <div class="deskCat">
          <ul id="top-menu" class="top-menu" data-depth="0">
            {% for category in categories %}
            {% if category.children %}
            {% set temprand = random(10000) %}
            <li class="top_level_category dropdown">
              <a class="dropdown-item" href="{{ category.href }}">{{ category.name }}
                {% if category.children %}
                  <i class="fa fa-angle-right add d-none d-lg-inline-block"></i>
                {% endif %}
              </a>
              <span class="pull-xs-right d-lg-none">
                  <span data-bs-target="#top_sub_menu_{{temprand}}" data-bs-toggle="collapse" class="navbar-toggler collapse-icons">
                    <i class="fa fa-angle-down add"></i>
                    <i class="fa fa-angle-up remove"></i>
                  </span>
              </span>
              <div id="top_sub_menu_{{temprand}}" class="dropdown-menu popover sub-menu collapse">
                  {% for children in category.children|batch(category.children|length / category.column|round(1, 'ceil')) %}
                  <ul class="list-unstyled childs_1 category_dropdownmenu {% if category.column <=1 %} {{ 'single-dropdown-menu' }} {% else %} {{ 'multiple-dropdown-menu' }} {% endif %}" data-depth="1">

                    {% for child in children %}   {# 2 Level Sub Categories START #}
                    {% if child.childs %}
                    {% set temprand = random(10000) %}
                      <li class="category dropdown sub-category">
                        <a class="dropdown-item dropdown-submenu" href="{{ child.href }}">{{ child.name }}</a>
                        <span class="pull-xs-right d-lg-none">
                            <span data-bs-target="#top_sub_menu_{{temprand}}" data-bs-toggle="collapse" class="navbar-toggler collapse-icons">
                              <i class="fa fa-angle-down add"></i>
                              <i class="fa fa-angle-up remove"></i>
                            </span>
                        </span>
                        <div id="top_sub_menu_{{temprand}}" class="dropdown-inner collapse">
                            {% for childs_col in child.childs|batch(child.childs|length / child.column|round(1, 'ceil')) %}
                            <ul class="list-unstyled childs_2 top-menu" data-depth="2">
                              {% for childs_2 in childs_col %}
                              <li class="category">
                                <a class="dropdown-item" href="{{ childs_2.href }}">{{ childs_2.name }}</a>
                              </li>
                              {% endfor %}
                            </ul>
                            {% endfor %}
                        </div>
                      </li>
                    {% else %}
                      <li class="top_level_category dropdown"><a href="{{ child.href }}">{{ child.name }}</a></li>
                    {% endif %}   {# 2 Level Sub Categories END #}
                    {% endfor %}
                  </ul>
                  {% endfor %}
              </div>
            </li>
            {% else %}
            <li class="maintitle"><a href="{{ category.href }}" class="dropdown-item">{{ category.name }}</a></li>
            {% endif %}
            {% endfor %}
            {% if blog_enable == true %}
            <li> <a href="{{ all_blogs }}">
              <span data-hover="{{ text_blog }}">{{ text_blog }}</span>
            </a></li>       
            {% endif %}  
          </ul>
          <div class="supplies-logo"><img src="https://sparrow.gcc-demo.com//catalog/view/image/supplies-logo.svg" /></div>
</div>
    </div> 
{% endif %}

<script type="text/javascript"> 
$("#_desktop_top_menu").click(function(){
        $("#top-menu").slideToggle();
        $('.wrapper-menu').toggleClass('open');
});
</script>