NAVIGATION

nav.ejs

<nav class="nav has-shadow" style="background-color:rgba(0,0,0,0.29)">
    <div class="container">
        <div class="nav-left">
            <a class="nav-item is-brand" href="https://discordapp.com/invite/JJAy6qw">
                <img src="/img/icon.png" alt="Logo" style="border-radius: 4px;"> &nbsp;
                <span>TerraBite</span>
            </a>
        </div>
        <div class="nav-center">
            <a class="nav-item" href="https://discordapp.com/invite/JJAy6qw">
                <span class="icon">
                    <i class="fa socicon-discord" aria-hidden="true"></i>
                </span>
            </a>
            <a class="nav-item" href="wip">
                <span class="icon">
                    <i class="fa fa-check" aria-hidden="true"></i>
                </span>
            </a>
            <a class="nav-item" href="https://github.com/TerraBite-Development-Team/TerraBite">
                <span class="icon">
                    <i class="fa fa-github" style="padding-top: 2px;" aria-hidden="true"></i>
                </span>
            </a>
        </div>
        <div class="nav-right nav-menu" id="nav-menu">
            <a class="nav-item" id="nav-" href="/">
                Home
            </a>
            <a class="nav-item" href="wip" id="nav-docs">
                Documentation
            </a>
            <a class="nav-item" href="blog" id="nav-blog">
                Blog
            </a>
            <% if(authUser) { %>
            <a id="nav-dashboard" class="nav-item is-tab is-active" href="/wip" title="Go to dashboard">
                <img class="image is-16x16" src="<%= authUser.avatar %>" style="border-radius: 100%;" alt="<%= authUser.id %>">
                &nbsp;
                <span><%= authUser.username %></span>
            </a>
            <% } else { %>
            <p class="nav-item control has-addons">
                <a class="button is-white is-outlined" href="/add">
                <span class="icon is-small">
                    <i class="fa fa-plus"></i>
                </span>
                    <span>Add</span>
                </a>
                <a class="button is-info is-outlined" href="<%= support %>" style="margin-left: 0px;">
                <span class="icon is-small">
                    <i class="fa fa-handshake-o"></i>
                </span>
                    <span>Support</span>
                </a>
            </p>
            <% } %>
        </div>
        <span class="nav-toggle" id="nav-toggle">
            <span></span>
            <span></span>
            <span></span>
        </span>
    </div>
</nav>
<script>
    var currentPage = window.location.pathname.split("/")[1];
    var currentNavItem = $("#nav-" + currentPage);
    if(currentNavItem) {
        currentNavItem.addClass("is-active is-tab");
    }
</script>