spee.ch/views/partials/topBar.handlebars

<div class="row-wide nav-bar">
    <div class="nav-bar-title-section">
        <a href="/"><span class="nav-bar-title">spee&lt;h</span></a><span class="nav-bar-title nav-bar-title--superscript">(beta)</span>
        <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>
            {{#if user}}
                <select type="text" class="select select--no-arrow nav-bar-link" onchange="toggleLogin(event)">
                    <option value="{{user.channelName}}:{{user.channelClaimId}}">@{{user.userName}}</option>
                    <option value="view">View</option>
                    <option value="logout">Logout</option>
                </select>
            {{else}}
                <a class="nav-bar-link" href="/login">Login</a>
            {{/if}}
        </div>
    </div>


</div>

<script type="text/javascript">
    function toggleLogin (event) {
        console.log(event);
        const selectedOption = event.target.selectedOptions[0].value;
        if (selectedOption === 'logout') {
            console.log('login');
            window.location.href = '/logout';
        } else if (selectedOption === 'view') {
            console.log('view channel');
            window.location.href = '/{{user.channelName}}:{{user.channelClaimId}}';
        }
    }
    // 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>