autonomic-cooperative/hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'gm-side-menu'

Browse Source
This commit is contained in:
Gaelle Morin 2018-12-06 11:08:12 +01:00
commit 5caca218a8
6 changed files with 101 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
package-lock.json generated
View File

@ -2597,7 +2597,8 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"aproba": {
"version": "1.2.0",
@ -3012,7 +3013,8 @@
"safe-buffer": {
"version": "5.1.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"safer-buffer": {
"version": "2.1.2",
@ -3068,6 +3070,7 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "2.1.1"
}
@ -3111,12 +3114,14 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"yallist": {
"version": "3.0.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
}
}
},

18
src/menu.pug
View File

@ -2,19 +2,22 @@ nav#navbar
sib-router#navbar-router(default-route='members')
sib-route.menu(name='members')
div.menu-notification
div 1
div 0
div.menu-label Members
div.menu-icon.icon-people
sib-route.menu(hidden, name='member', id-prefix=`${sdn}/members/`)
div.divider
sib-route.menu(name='job-offers')
div.menu-notification
div 2
div.menu-label Job offers
div.menu-icon.icon-briefcase
sib-route(hidden, name='job-offer-create')
div
div.divider
div.menu-wrapper
div.menu
div.menu-notification
div.menu-chevron
div.menu-icon.icon-arrow-down
div.menu-label Projects
div.menu-icon.icon-folder-alt
sib-route(hidden,name='project', id-prefix=`${sdn}/projects/`)
@ -24,11 +27,13 @@ nav#navbar
data-fields='name',
next='project'
)
div
div.divider
div.menu-wrapper
div.menu
div.menu-notification
div.menu-chevron
div.menu-icon.icon-arrow-down
div.menu-label Groups
div.menu-icon.icon-bubbles
div.menu-icon.icon-globe
sib-route(hidden, name='group', id-prefix=`${sdn}/channels/`)
div.sub-menu
sib-display(
@ -36,3 +41,4 @@ nav#navbar
data-fields='name',
next='group'
)
div.divider

2
src/scripts/hd-app.js
View File

@ -58,4 +58,6 @@ document.addEventListener("DOMContentLoaded", function(event) {
window.addEventListener('click', e => {
navBar.classList.remove('open');
});
});

10
src/scripts/index.js
View File

@ -1,6 +1,7 @@
document.addEventListener('DOMContentLoaded', function (event) {
const navBar = document.querySelector('#navbar');
const btnToggle = document.querySelector('#button-toggle');
const menuWrappers = Array.from(document.querySelectorAll('.menu-wrapper'));
if (!navBar || !btnToggle) return;
btnToggle.addEventListener('click', e => {
@ -25,4 +26,13 @@ document.addEventListener('DOMContentLoaded', function(event) {
document.addEventListener('load', resize);
document.addEventListener('WebComponentsReady', resize);
resize();
// Toggle sub-menus
menuWrappers.forEach(menuWrapper => {
const menu = menuWrapper.querySelector('.menu');
menu.addEventListener('click', e => {
menuWrapper.classList.toggle('is-closed');
});
});
});

59
src/styles/menu.scss
View File

@ -11,9 +11,10 @@
display: flex;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 17em;
flex-basis: 16em;
overflow: hidden;
flex-direction: column;
font-size: 16px;
&.open {
transform: translateX(0);
@ -40,10 +41,29 @@ sib-router {
display: flex;
flex-direction: column;
.menu-wrapper {
&.is-closed {
.sub-menu {
padding-left: 2em;
display: none;
}
.menu-chevron {
transform: rotate(180deg);
}
}
}
.divider {
height: 1px;
background-color: $color-grey-light3;
}
.sub-menu {
padding-left: 1.8em;
div{
padding-bottom: 1em;
color: $color-grey-mid;
padding-bottom: 0.7em;
font-size: 15px;
cursor: pointer;
}
}
@ -60,18 +80,18 @@ sib-router {
&[active] {
background-color: $color-yellow-light;
color: $color-black;
font-weight: normal;
color: $color-purple-dark;
.menu-icon:before {
background-color: $color-purple-dark;
color: $color-yellow-light;
color: $color-white;
// transform: perspective(1000px) translateZ(1px) scale(0.8);
}
.menu-notification > div {
background-color: $color-purple-dark;
color: $color-yellow-light;
font-size: 12px;
}
}
@ -84,6 +104,7 @@ sib-router {
align-items: center;
display: flex;
flex-direction: column;
font-size: 11px;
&:before {
width: 1.9em;
@ -97,6 +118,24 @@ sib-router {
}
}
.menu-chevron {
width: 2em;
flex-shrink: 0;
flex-grow: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
> div {
color: $color-grey-mid;
display: flex;
justify-content: center;
align-items: center;
font-size: 11px;
}
}
.menu-label {
//flex-basis: 8em;
width: 8em;
@ -106,6 +145,9 @@ sib-router {
display: flex;
flex-direction: column;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.17px;
font-size: 16px;
}
.menu-notification {
@ -123,10 +165,11 @@ sib-router {
display: flex;
justify-content: center;
align-items: center;
width: 1.5em;
height: 1.5em;
width: 1.7em;
height: 1.7em;
border-radius: 100%;
background-color: $color-yellow-light;
font-size: 12px;
}
}

2
src/styles/variables.scss
View File

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