<!-- Navigation -->
<nav class="navbar navbar-expand-lg fixed-top navbar-dark">
    <div class="container topnavlinks">
        <a class="navbar-brand fas fa-home fa-lg" href="index.html">&nbsp;<span class="projectTitle"> {{site.topnav_title}}</span></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto mt-2 mt-lg-0"></ul>
            <ul class="navbar-nav">
                <!-- toggle sidebar button -->
                <li class="nav-item"><a id="tg-sb-link" class="nav-link" href="#"><i id="tg-sb-icon" class="fas fa-toggle-on"></i> Nav</a></li>
                <!-- entries without drop-downs appear here -->
                {% for entry in site.data.topnav.topnav %}
                    {% for item in entry.items %}
                        {% if item.external_url %}
                            <li class="nav-item"><a class="nav-link" href="{{item.external_url}}" target="_blank">{{item.title}}</a></li>
                        {% elsif page.url contains item.url %}
                            <li class="nav-item active"><a class="nav-link" href="{{item.url | remove: "/"}}">{{item.title}}</a></li>
                        {% else %}
                            <li class="nav-item"><a class="nav-link" href="{{item.url | remove: "/"}}">{{item.title}}</a></li>
                        {% endif %}
                    {% endfor %}
                {% endfor %}
                <!-- entries with drop-downs appear here -->
                <!-- conditional logic to control which topnav appears for the audience defined in the configuration file.-->
                {% for entry in site.data.topnav.topnav_dropdowns %}
                    {% for folder in entry.folders %}
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ folder.title }}<b class="caret"></b></a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                {% for folderitem in folder.folderitems %}
                                    {% if folderitem.external_url %}
                                        <a class="dropdown-item" href="{{folderitem.external_url}}" target="_blank">{{folderitem.title}}</a>
                                    {% elsif page.url contains folderitem.url %}
                                        <a class="dropdown-item dropdownActive" href="{{folderitem.url |  remove: "/"}}">{{folderitem.title}}</a>
                                    {% else %}
                                        <a class="dropdown-item" href="{{folderitem.url | remove: "/"}}">{{folderitem.title}}</a>
                                    {% endif %}
                                {% endfor %}
                            </div>
                        </li>
                    {% endfor %}
                {% endfor %}
            </ul>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="{{site.data.strings.search_placeholder_text}}" id="search-input">
                <ul id="results-container"></ul>
            </form>
        </div>
    </div>
</nav>
