<div class="navbar-fixed">
    <nav class="{{ MALT_BASE_COLOR }} role="navigation">
        <div class="container">
            <div class="nav-wrapper">
                <a id="logo-container" href="/" class="brand-logo">
                    {{ SITENAME }}
                </a>

                {% if MENUITEMS %}
                <ul class="right hide-on-med-and-down">
                    {% for name, url in MENUITEMS %}
                        {% if page is defined %}
                            {% set href = page.url %}
                        {% elif page_name is defined %}
                            {% set href = page_name %}
                        {% else %}
                            {% set href = None %}
                        {% endif %}
            
                        {% if is_list(url) %}
                            <ul id="dropdown{{loop.index}}" class="dropdown-content">
                                {% for subname, sublink in url %}
                                    <li><a href="{{ SITEURL }}/{{ sublink }}"> {{ subname }} </a></li>
                                {% endfor %} 
                                <!-- <li class="divider"></li> -->
                            </ul>
                            <li{% if href == url %}class="active"{% endif %}>
                                <a class="dropdown-button" href="#!" data-activates="dropdown{{loop.index}}">   
                                    {{ name }} <i class="material-icons right">arrow_drop_down</i>
                                </a>
                            </li>
                        {% else %}
                            <li {% if href == url %}class="active"{% endif %}><a href="{{ SITEURL }}/{{ url}}">{{ name }}</a></li>
                        {% endif %}

                    {% endfor %}
                    <!-- TODO: add support for materialize icons -->

                </ul>

                <ul id="nav-mobile" class="side-nav">
                    <li class="{{ MALT_BASE_COLOR }} lighten-1" id="nav-mobile-header">
                        <div class="row center">
                            <div class="col s12" id="nav-mobile-header-img">
                                <a href="/" alt="{{ SITENAME }}" title="{{ SITENAME }}">
                                    <img class="circle responsive-img valign z-depth-1" alt="{{ SITENAME }} Logo" title="{{ SITENAME }}" src="{{ SITEURL }}/{{ SITELOGO }}">
                                </a>
                            </div>
                            <div class="col s12" id="nav-mobile-header-text">
                                <span class="{{ MALT_BASE_COLOR }}-text text-lighten-5">{{ SITENAME }}</span>
                            </div>
                        </div>
                    </li>
                    {% for name, url in MENUITEMS %}
                    {% if page is defined %}
                        {% set href = page.url %}
                    {% elif page_name is defined %}
                        {% set href = page_name %}
                    {% else %}
                        {% set href = None %}
                    {% endif %}
                    <li {% if href == url %}class="active"{% endif %}><a href="{{ SITEURL }}/{{ url }}">{{ name }}</a></li>
                    {% endfor %}
                </ul>
                {% endif %}
                <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
            </div>
        </div>
    </nav>
</div>
