49 lines
1.1 KiB
JavaScript
49 lines
1.1 KiB
JavaScript
const html = require('choo/html');
|
|
const assets = require('../../../common/assets');
|
|
|
|
// eslint-disable-next-line no-unused-vars
|
|
module.exports = function(state) {
|
|
const notLoggedInMenu = html`
|
|
<ul class="account_dropdown"
|
|
tabindex="-1"
|
|
>
|
|
<li>
|
|
<a class=account_dropdown__link>${state.translate(
|
|
'accountMenuOption'
|
|
)}</a>
|
|
</li>
|
|
<li>
|
|
<a href="/signin"
|
|
class=account_dropdown__link>${state.translate(
|
|
'signInMenuOption'
|
|
)}</a>
|
|
</li>
|
|
</ul>
|
|
`;
|
|
|
|
return html`
|
|
<div class="account">
|
|
<img
|
|
src="${assets.get('user.svg')}"
|
|
onclick=${avatarClick}
|
|
alt="account"/>
|
|
${notLoggedInMenu}
|
|
</div>`;
|
|
|
|
function avatarClick(event) {
|
|
event.preventDefault();
|
|
const dropdown = document.querySelector('.account_dropdown');
|
|
dropdown.classList.toggle('visible');
|
|
dropdown.focus();
|
|
}
|
|
|
|
//the onblur trick makes links unclickable wtf
|
|
/*
|
|
function hideMenu(event) {
|
|
event.stopPropagation();
|
|
const dropdown = document.querySelector('.account_dropdown');
|
|
dropdown.classList.remove('visible');
|
|
}
|
|
*/
|
|
};
|