Merge branch 'gm-side-menu'
This commit is contained in:
commit
5caca218a8
13
package-lock.json
generated
13
package-lock.json
generated
@ -2597,7 +2597,8 @@
|
|||||||
"ansi-regex": {
|
"ansi-regex": {
|
||||||
"version": "2.1.1",
|
"version": "2.1.1",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"aproba": {
|
"aproba": {
|
||||||
"version": "1.2.0",
|
"version": "1.2.0",
|
||||||
@ -3012,7 +3013,8 @@
|
|||||||
"safe-buffer": {
|
"safe-buffer": {
|
||||||
"version": "5.1.1",
|
"version": "5.1.1",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"safer-buffer": {
|
"safer-buffer": {
|
||||||
"version": "2.1.2",
|
"version": "2.1.2",
|
||||||
@ -3068,6 +3070,7 @@
|
|||||||
"version": "3.0.1",
|
"version": "3.0.1",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"ansi-regex": "2.1.1"
|
"ansi-regex": "2.1.1"
|
||||||
}
|
}
|
||||||
@ -3111,12 +3114,14 @@
|
|||||||
"wrappy": {
|
"wrappy": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"yallist": {
|
"yallist": {
|
||||||
"version": "3.0.2",
|
"version": "3.0.2",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
18
src/menu.pug
18
src/menu.pug
@ -2,19 +2,22 @@ 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-notification
|
div.menu-chevron
|
||||||
|
div.menu-icon.icon-arrow-down
|
||||||
div.menu-label Projects
|
div.menu-label Projects
|
||||||
div.menu-icon.icon-folder-alt
|
div.menu-icon.icon-folder-alt
|
||||||
sib-route(hidden,name='project', id-prefix=`${sdn}/projects/`)
|
sib-route(hidden,name='project', id-prefix=`${sdn}/projects/`)
|
||||||
@ -24,11 +27,13 @@ nav#navbar
|
|||||||
data-fields='name',
|
data-fields='name',
|
||||||
next='project'
|
next='project'
|
||||||
)
|
)
|
||||||
div
|
div.divider
|
||||||
|
div.menu-wrapper
|
||||||
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-bubbles
|
div.menu-icon.icon-globe
|
||||||
sib-route(hidden, name='group', id-prefix=`${sdn}/channels/`)
|
sib-route(hidden, name='group', id-prefix=`${sdn}/channels/`)
|
||||||
div.sub-menu
|
div.sub-menu
|
||||||
sib-display(
|
sib-display(
|
||||||
@ -36,3 +41,4 @@ nav#navbar
|
|||||||
data-fields='name',
|
data-fields='name',
|
||||||
next='group'
|
next='group'
|
||||||
)
|
)
|
||||||
|
div.divider
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
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");
|
||||||
@ -8,7 +8,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
|
|||||||
|
|
||||||
|
|
||||||
// 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');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
});
|
});
|
||||||
|
@ -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,9 +14,9 @@ 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');
|
||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
@ -25,4 +26,13 @@ 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 => {
|
||||||
|
menuWrapper.classList.toggle('is-closed');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
@ -11,9 +11,10 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-grow: 0;
|
flex-grow: 0;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
flex-basis: 17em;
|
flex-basis: 16em;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
&.open {
|
&.open {
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
@ -40,10 +41,29 @@ sib-router {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
|
.menu-wrapper {
|
||||||
|
&.is-closed {
|
||||||
.sub-menu {
|
.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{
|
div{
|
||||||
padding-bottom: 1em;
|
color: $color-grey-mid;
|
||||||
|
padding-bottom: 0.7em;
|
||||||
|
font-size: 15px;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -60,18 +80,18 @@ sib-router {
|
|||||||
|
|
||||||
&[active] {
|
&[active] {
|
||||||
background-color: $color-yellow-light;
|
background-color: $color-yellow-light;
|
||||||
color: $color-black;
|
color: $color-purple-dark;
|
||||||
font-weight: normal;
|
|
||||||
|
|
||||||
.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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-notification > div {
|
.menu-notification > div {
|
||||||
background-color: $color-purple-dark;
|
background-color: $color-purple-dark;
|
||||||
color: $color-yellow-light;
|
color: $color-yellow-light;
|
||||||
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -84,6 +104,7 @@ sib-router {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
font-size: 11px;
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
width: 1.9em;
|
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 {
|
.menu-label {
|
||||||
//flex-basis: 8em;
|
//flex-basis: 8em;
|
||||||
width: 8em;
|
width: 8em;
|
||||||
@ -106,6 +145,9 @@ sib-router {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.17px;
|
||||||
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-notification {
|
.menu-notification {
|
||||||
@ -123,10 +165,11 @@ sib-router {
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 1.5em;
|
width: 1.7em;
|
||||||
height: 1.5em;
|
height: 1.7em;
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
background-color: $color-yellow-light;
|
background-color: $color-yellow-light;
|
||||||
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -2,6 +2,8 @@
|
|||||||
$color-white: #fff;
|
$color-white: #fff;
|
||||||
$color-black: #36383b;
|
$color-black: #36383b;
|
||||||
$color-grey: #898f95;
|
$color-grey: #898f95;
|
||||||
|
$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;
|
||||||
|
Loading…
Reference in New Issue
Block a user