Skip to content

Instantly share code, notes, and snippets.

@kazzkiq
Created April 7, 2017 02:43
Show Gist options
  • Save kazzkiq/44cd30e920cabf471593282b892029a3 to your computer and use it in GitHub Desktop.
Save kazzkiq/44cd30e920cabf471593282b892029a3 to your computer and use it in GitHub Desktop.
Discourse topbar menu
(function (window) {
'use strict';
const MOBILE_WIDTH_LIMIT = 768;
const MENU_BAR_HEIGHT = 45;
let headerElement = document.querySelector('.docked .d-header') || false;
let menuElement;
function hideOnMobile () {
if(window.innerWidth <= MOBILE_WIDTH_LIMIT) {
menuElement.style.display = 'none';
pushTopBar(0);
window.scrollTo(0, +window.scrollY + 1); // Force topbar component to repaint properly
} else {
if(menuElement.style.display !== 'flex') {
menuElement.style.display = 'flex';
pushTopBar(MENU_BAR_HEIGHT);
window.scrollTo(0, +window.scrollY + 1); // Force topbar component to repaint properly
}
}
}
function createMenuBar () {
menuElement = document.createElement('DIV');
menuElement.id = 'ppc-custom-menubar';
menuElement.innerHTML = `
<style>
#ppc-custom-menubar {
position: fixed;
top: 0;
left: 0;
width: 100%;
min-height: ${MENU_BAR_HEIGHT}px;
display: flex;
align-items: center;
justify-content: center;
background: #f8f8f8;
}
#ppc-custom-menubar ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
#ppc-custom-menubar ul li a {
display: block;
padding: 10px 20px;
font-size: 16px;
margin: 0 10px;
color: #40b058;
box-shadow: 0 2px 0 rgba(0,0,0,0);
transition: box-shadow 0.3s linear;
}
#ppc-custom-menubar ul li a:hover {
box-shadow: 0 2px 0 #40b058;
}
</style>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>`;
document.body.appendChild(menuElement);
}
function pushTopBar (amount) {
amount = amount + 'px';
if(headerElement) {
//headerElement.style.marginTop = amount;
document.body.style.marginTop = amount;
}
}
function runBar () {
pushTopBar(MENU_BAR_HEIGHT);
createMenuBar();
window.onresize = hideOnMobile;
window.scrollTo(0, 1); // Force topbar component to repaint properly
}
return runBar();
})(window)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment