<section class="menu">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <ul>
                    <li>
                        <a class="{{ activeJournalMenu == 'home' ? 'active':''}}" href="{{ absolute_url('/') }}">Home</a>
                    </li>

                    {% for item in menu %}
                        {% if item.submenu|length > 0 %}
                            <li class="dropdown">
                                <a class="{{ activeJournalMenu == item.url or activeJournalMenu in item.submenu|keys ? 'active':''}}" href="{{ absolute_url('/') }}{{item.url}}">
                                    {{item.title}}
                                    <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 490.656 490.656" style="enable-background:new 0 0 490.656 490.656;" xml:space="preserve">
                                        <g>
                                            <g>
                                                <path d="M487.536,120.445c-4.16-4.16-10.923-4.16-15.083,0L245.339,347.581L18.203,120.467c-4.16-4.16-10.923-4.16-15.083,0
                                                                                              c-4.16,4.16-4.16,10.923,0,15.083l234.667,234.667c2.091,2.069,4.821,3.115,7.552,3.115s5.461-1.045,7.531-3.136l234.667-234.667
                                                                                              C491.696,131.368,491.696,124.605,487.536,120.445z"/>
                                            </g>
                                        </g>
                                        <g></g>
                                        <g></g>
                                        <g></g>
                                        <g></g>
                                        <g></g>
                                        <g></g>
                                        <g></g>
                                        <g></g>
                                        <g></g>
                                        <g></g>
                                        <g></g>
                                        <g></g>
                                        <g></g>
                                        <g></g>
                                        <g></g>
                                    </svg>
                                </a>
                                <ul class="menu">
                                    {% for subItem in item.submenu|keys %}
                                        <li>
                                            <a class="{{ activeJournalMenu == subItem ? 'active':''}}" href="{{ absolute_url('/') }}{{subItem}}">{{item.submenu[subItem]}}</a>
                                        </li>
                                    {% endfor %}
                                </ul>
                            </li>
                        {% else %}
                            <li>
                                <a class="{{ activeJournalMenu == item.url ? 'active':''}}" href="{{ absolute_url('/') }}{{item.url}}">{{item.title}}</a>
                            </li>
                        {% endif %}
                    {% endfor %}
                    <li>
                        <a class="{{ activeJournalMenu == 'table-of-contents' ? 'active':''}}" href="{{ absolute_url('/table-of-contents') }}">Table of Contents</a>
                    </li>
                    <li>
                        <a class="{{ activeJournalMenu == 'manuscripts' ? 'active':''}}" href="{{ absolute_url('/manuscripts') }}">Submit Manuscript</a>
                    </li>
                    <li>
                        <a class="{{ activeJournalMenu == 'article-processing-charges' ? 'active':''}}" href="{{ absolute_url('/article-processing-charges') }}">Article Processing Charges</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>