sub-menus can be closed and opened + divider added

This commit is contained in:
Gaelle Morin 2018-12-03 19:49:32 +01:00
parent 291822bbeb
commit 0837257b1d
5 changed files with 52 additions and 20 deletions

View File

@ -2,17 +2,19 @@ nav#navbar
sib-router#navbar-router(default-route='members') sib-router#navbar-router(default-route='members')
sib-route.menu(name='members') sib-route.menu(name='members')
div.menu-notification div.menu-notification
div 1 div 0
div.menu-label Members div.menu-label Members
div.menu-icon.icon-people div.menu-icon.icon-people
sib-route.menu(hidden, name='member', id-prefix=`${sdn}/members/`) sib-route.menu(hidden, name='member', id-prefix=`${sdn}/members/`)
div.divider
sib-route.menu(name='job-offers') sib-route.menu(name='job-offers')
div.menu-notification div.menu-notification
div 2 div 2
div.menu-label Job offers div.menu-label Job offers
div.menu-icon.icon-briefcase div.menu-icon.icon-briefcase
sib-route(hidden, name='job-offer-create') sib-route(hidden, name='job-offer-create')
div div.divider
div.menu-wrapper
div.menu div.menu
div.menu-chevron div.menu-chevron
div.menu-icon.icon-arrow-down div.menu-icon.icon-arrow-down
@ -25,9 +27,11 @@ nav#navbar
data-fields='name', data-fields='name',
next='project' next='project'
) )
div div.divider
div.menu-wrapper.is-open
div.menu div.menu
div.menu-notification div.menu-chevron
div.menu-icon.icon-arrow-down
div.menu-label Groups div.menu-label Groups
div.menu-icon.icon-globe div.menu-icon.icon-globe
sib-route(hidden, name='group', id-prefix=`${sdn}/channels/`) sib-route(hidden, name='group', id-prefix=`${sdn}/channels/`)
@ -37,3 +41,4 @@ nav#navbar
data-fields='name', data-fields='name',
next='group' next='group'
) )
div.divider

View File

@ -1,14 +1,14 @@
document.addEventListener("DOMContentLoaded", function(event) { document.addEventListener("DOMContentLoaded", function (event) {
// Constants declaration // Constants declaration
const navBar = document.querySelector("#navbar"); const navBar = document.querySelector("#navbar");
const searchBar = document.querySelector("#search-bar"); const searchBar = document.querySelector("#search-bar");
const searchView = document.querySelector("#search-view"); const searchView = document.querySelector("#search-view");
const searchInput = searchBar.querySelector("#search-input"); const searchInput = searchBar.querySelector("#search-input");
const btnToggle = document.querySelector("#button-toggle"); const btnToggle = document.querySelector("#button-toggle");
// Shortcuts // Shortcuts
window.addEventListener("keydown", function(e) { window.addEventListener("keydown", function (e) {
// CTRL + K triggers the search feature // CTRL + K triggers the search feature
if ((e.keyCode == 75 || e.keyCode == 80) && (e.ctrlKey === true || e.metaKey === true)) { if ((e.keyCode == 75 || e.keyCode == 80) && (e.ctrlKey === true || e.metaKey === true)) {
e.preventDefault(); e.preventDefault();
@ -55,7 +55,9 @@ document.addEventListener("DOMContentLoaded", function(event) {
e.stopPropagation(); e.stopPropagation();
}); });
window.addEventListener('click', e=>{ window.addEventListener('click', e => {
navBar.classList.remove('open'); navBar.classList.remove('open');
}); });
}); });

View File

@ -1,6 +1,7 @@
document.addEventListener('DOMContentLoaded', function(event) { document.addEventListener('DOMContentLoaded', function (event) {
const navBar = document.querySelector('#navbar'); const navBar = document.querySelector('#navbar');
const btnToggle = document.querySelector('#button-toggle'); const btnToggle = document.querySelector('#button-toggle');
const menuWrappers = Array.from(document.querySelectorAll('.menu-wrapper'));
if (!navBar || !btnToggle) return; if (!navBar || !btnToggle) return;
btnToggle.addEventListener('click', e => { btnToggle.addEventListener('click', e => {
@ -13,11 +14,11 @@ document.addEventListener('DOMContentLoaded', function(event) {
}); });
function resize() { function resize() {
setTimeout(()=> setTimeout(() =>
Array.from(document.querySelectorAll('.chat-view')).forEach(elm => { Array.from(document.querySelectorAll('.chat-view')).forEach(elm => {
if(!elm.offsetParent) return; if (!elm.offsetParent) return;
elm.style.setProperty('--pos-top', elm.offsetTop + 'px'); elm.style.setProperty('--pos-top', elm.offsetTop + 'px');
})); }));
} }
window.addEventListener('resize', resize); window.addEventListener('resize', resize);
window.addEventListener('navigate', resize); window.addEventListener('navigate', resize);
@ -25,4 +26,14 @@ document.addEventListener('DOMContentLoaded', function(event) {
document.addEventListener('load', resize); document.addEventListener('load', resize);
document.addEventListener('WebComponentsReady', resize); document.addEventListener('WebComponentsReady', resize);
resize(); resize();
// Toggle sub-menus
menuWrappers.forEach(menuWrapper => {
const menu = menuWrapper.querySelector('.menu');
menu.addEventListener('click', e => {
console.log(menuWrapper);
menuWrapper.classList.toggle('is-closed');
});
});
}); });

View File

@ -41,6 +41,19 @@ sib-router {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.menu-wrapper {
&.is-closed {
.sub-menu {
display: none;
}
}
}
.divider {
height: 1px;
background-color: $color-grey-light3;
}
.sub-menu { .sub-menu {
padding-left: 1.9em; padding-left: 1.9em;
div{ div{
@ -66,7 +79,7 @@ sib-router {
.menu-icon:before { .menu-icon:before {
background-color: $color-purple-dark; background-color: $color-purple-dark;
color: $color-yellow-light; color: $color-white;
// transform: perspective(1000px) translateZ(1px) scale(0.8); // transform: perspective(1000px) translateZ(1px) scale(0.8);
} }

View File

@ -3,6 +3,7 @@ $color-white: #fff;
$color-black: #36383b; $color-black: #36383b;
$color-grey: #898f95; $color-grey: #898f95;
$color-grey-mid: #abaaba; $color-grey-mid: #abaaba;
$color-grey-light3: hsla(59, 13%, 86%, 0.2);
$color-grey-light2: #d8d8d8; $color-grey-light2: #d8d8d8;
$color-grey-light: #f0f3f6; $color-grey-light: #f0f3f6;
$color-yellow: #ffb700; $color-yellow: #ffb700;