f09f3663d6
* [WebHost] Unify styles for popover and mobile menus. Adjust popover menu to function the same as the mobile menu, and toggle via JS. * Remove class `first-link` in favor of CSS `:first-child`. * Adjust mobile menu link font size and padding. Change wording of popover trigger text. Add border-right to popover menu. Change "Upload Host File" to "Host Game" * Change mobile menu text to "Host Game"
41 lines
1.2 KiB
JavaScript
41 lines
1.2 KiB
JavaScript
window.addEventListener('load', () => {
|
|
// Mobile menu handling
|
|
const menuButton = document.getElementById('base-header-mobile-menu-button');
|
|
const mobileMenu = document.getElementById('base-header-mobile-menu');
|
|
|
|
menuButton.addEventListener('click', (evt) => {
|
|
evt.preventDefault();
|
|
evt.stopPropagation();
|
|
|
|
if (!mobileMenu.style.display || mobileMenu.style.display === 'none') {
|
|
return mobileMenu.style.display = 'flex';
|
|
}
|
|
|
|
mobileMenu.style.display = 'none';
|
|
});
|
|
|
|
window.addEventListener('resize', () => {
|
|
mobileMenu.style.display = 'none';
|
|
});
|
|
|
|
// Popover handling
|
|
const popoverText = document.getElementById('base-header-popover-text');
|
|
const popoverMenu = document.getElementById('base-header-popover-menu');
|
|
|
|
popoverText.addEventListener('click', (evt) => {
|
|
evt.preventDefault();
|
|
evt.stopPropagation();
|
|
|
|
if (!popoverMenu.style.display || popoverMenu.style.display === 'none') {
|
|
return popoverMenu.style.display = 'flex';
|
|
}
|
|
|
|
popoverMenu.style.display = 'none';
|
|
});
|
|
|
|
document.body.addEventListener('click', () => {
|
|
mobileMenu.style.display = 'none';
|
|
popoverMenu.style.display = 'none';
|
|
});
|
|
});
|