spee.ch/views/partials/topBar.handlebars
2017-10-09 18:29:40 -07:00

49 lines
No EOL
2.1 KiB
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>
<span class="nav-bar-subtitle">Open-source, decentralized image and video hosting.</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('log out');
// remove session cookies
// send logout request to server
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>