{% if categories %}
<div class="container-fluid px-0">

    <nav id="menu" class="navbar navbar-expand-lg kottal-menu">

        <button type="button"
                class="navbar-toggler d-lg-none"
                data-bs-toggle="collapse"
                data-bs-target="#navbar-menu">

            <i class="fa-solid fa-bars"></i>

        </button>

        <div id="navbar-menu" class="collapse navbar-collapse">

            <ul class="navbar-nav mx-auto">

                <!-- HOME -->
                <li class="nav-item">
                    <a href="{{ home }}" class="nav-link">Home</a>
                </li>

                <!-- SHOP -->
                <li class="nav-item dropdown">

                    <a href="{{ categories[0].href }}"
                       class="nav-link dropdown-toggle"
                       data-bs-toggle="dropdown">

                        Shop

                    </a>

                    <div class="dropdown-menu">

                      <div class="dropdown-inner">

    {% set total = categories|length %}
    {% set batch = (total / 3)|round(0, 'ceil') %}

    {% for column in categories|batch(batch) %}

        <ul class="list-unstyled mega-column">

            {% if loop.first %}
                <li>
                    <a href="{{ categories[0].href }}" class="dropdown-item fw-bold">
                        All Products
                    </a>
                </li>

                <li><hr class="dropdown-divider"></li>
            {% endif %}

            {% for category in column %}

                {% if category %}

                <li>
                    <a href="{{ category.href }}" class="dropdown-item">
                        {{ category.name }}
                    </a>
                </li>

                {% endif %}

            {% endfor %}

        </ul>

    {% endfor %}

</div>

                    </div>

                </li>

                <!-- ABOUT -->

                <li class="nav-item">

                    <a href="index.php?route=information/information&information_id=4"
                       class="nav-link">

                        About Us

                    </a>

                </li>

                <!-- OUR STORY -->

                <li class="nav-item">

                    <a href="#"
                       class="nav-link">

                        Our Story

                    </a>

                </li>

                <!-- WELLNESS -->

                <li class="nav-item">

                    <a href="#"
                       class="nav-link">

                        Wellness

                    </a>

                </li>

                <!-- BLOG -->

                <li class="nav-item">

                    <a href="#"
                       class="nav-link">

                        Blog

                    </a>

                </li>

                <!-- CONTACT -->

                <li class="nav-item">

                    <a href="{{ contact }}"
                       class="nav-link">

                        Contact Us

                    </a>

                </li>

            </ul>

        </div>

    </nav>

</div>
{% endif %}