spee.ch/views/partials/navBar.handlebars

<div class="row row--wide nav-bar">
    <div class="nav-bar-title-section row row--padded row--short">
        <div class="nav-bar-title">
            <a href="/"><img class="nav-bar-logo" src="/assets/img/logo.gif" alt="spee.ch"/></a>
            <span class="nav-bar-title nav-bar-title--tagline">Open-source, decentralized image and video sharing.</span>
        </div>
        <div class="nav-bar-link-section">
            <a class="nav-bar-link" href="/">Upload</a>
            <a class="nav-bar-link" href="/popular">Popular</a>
            <a class="nav-bar-link" href="/about">About</a>
            <select type="text" id="nav-bar-channel-select" class="select select--no-arrow nav-bar-link" onchange="toggleNavBarSelection(event.target.selectedOptions[0].value)" {{#unless user}}style="display:none"{{/unless}}>
                <option id="nav-bar-channel-select-channel-option">@{{user.userName}}</option>
                <option value="VIEW">View</option>
                <option value="LOGOUT">Logout</option>
            </select>
            <a id="nav-bar-login-link" class="nav-bar-link" href="/login" {{#if user}}style="display:none"{{/if}}>Channel</a>
        </div>
    </div>
</div>

<script type="text/javascript">
   // highlight the link for the current page
   const navBarLinks = document.getElementsByClassName('nav-bar-link');
   for (let i = 0; i < navBarLinks.length; i++){
       const link = navBarLinks[i];
       if (link.href == window.location.href) {
           link.setAttribute('class', 'nav-bar-link nav-bar-link--active');
       } else if (`/${link.value}` === window.location.pathname) {
           link.setAttribute('class', 'select select--no-arrow nav-bar-link nav-bar-link--active');
        }
   }
</script>