diff --git a/package-lock.json b/package-lock.json
index 7c213f011a27255dc0fd028a00f53896973eca5b..ef023a005b9229f6163b511641ff4a326a9fb222 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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
}
}
},
diff --git a/src/menu.pug b/src/menu.pug
index 070d94f496620f8e2b869890fcbc91564c6149a2..99f2fd107eb7e501bddadc03b66c8b09e4b761e4 100644
--- a/src/menu.pug
+++ b/src/menu.pug
@@ -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
diff --git a/src/scripts/hd-app.js b/src/scripts/hd-app.js
index 9d3c0151b1d815154ac33b93d4b0a6701870e3f4..1fe90ce18b88541ffd482f28f7814c8a955e0f09 100644
--- a/src/scripts/hd-app.js
+++ b/src/scripts/hd-app.js
@@ -1,14 +1,14 @@
-document.addEventListener("DOMContentLoaded", function(event) {
+document.addEventListener("DOMContentLoaded", function (event) {
// Constants declaration
- const navBar = document.querySelector("#navbar");
- const searchBar = document.querySelector("#search-bar");
- const searchView = document.querySelector("#search-view");
- const searchInput = searchBar.querySelector("#search-input");
- const btnToggle = document.querySelector("#button-toggle");
+ const navBar = document.querySelector("#navbar");
+ const searchBar = document.querySelector("#search-bar");
+ const searchView = document.querySelector("#search-view");
+ const searchInput = searchBar.querySelector("#search-input");
+ const btnToggle = document.querySelector("#button-toggle");
// Shortcuts
- window.addEventListener("keydown", function(e) {
+ window.addEventListener("keydown", function (e) {
// CTRL + K triggers the search feature
if ((e.keyCode == 75 || e.keyCode == 80) && (e.ctrlKey === true || e.metaKey === true)) {
e.preventDefault();
@@ -34,7 +34,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
navBar.classList.remove("search-mode");
searchView.classList.remove("search-mode");
}
-
+
function emptySearchBar(e) {
searchInput.value = '';
openSearchBar();
@@ -55,7 +55,9 @@ document.addEventListener("DOMContentLoaded", function(event) {
e.stopPropagation();
});
- window.addEventListener('click', e=>{
+ window.addEventListener('click', e => {
navBar.classList.remove('open');
});
+
+
});
diff --git a/src/scripts/index.js b/src/scripts/index.js
index 0f286432df82991f845c8a1b997662d8425d0638..d15e55f3e356818aefa7b83095cfc4e22ae21610 100644
--- a/src/scripts/index.js
+++ b/src/scripts/index.js
@@ -1,6 +1,7 @@
-document.addEventListener('DOMContentLoaded', function(event) {
+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 => {
@@ -13,11 +14,11 @@ document.addEventListener('DOMContentLoaded', function(event) {
});
function resize() {
- setTimeout(()=>
- Array.from(document.querySelectorAll('.chat-view')).forEach(elm => {
- if(!elm.offsetParent) return;
- elm.style.setProperty('--pos-top', elm.offsetTop + 'px');
- }));
+ setTimeout(() =>
+ Array.from(document.querySelectorAll('.chat-view')).forEach(elm => {
+ if (!elm.offsetParent) return;
+ elm.style.setProperty('--pos-top', elm.offsetTop + 'px');
+ }));
}
window.addEventListener('resize', resize);
window.addEventListener('navigate', resize);
@@ -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');
+ });
+ });
+
});
diff --git a/src/styles/menu.scss b/src/styles/menu.scss
index af9ad2db0993c1d84ac455251b9dbe67f1276214..bc7b8ec8df1b0f9ad73f458a01b94555f5387ffe 100644
--- a/src/styles/menu.scss
+++ b/src/styles/menu.scss
@@ -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 {
+ display: none;
+ }
+ .menu-chevron {
+ transform: rotate(180deg);
+ }
+ }
+ }
+
+ .divider {
+ height: 1px;
+ background-color: $color-grey-light3;
+ }
+
.sub-menu {
- padding-left: 2em;
+ 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;
}
}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 1fc8a299b34872408445ab76a6264215c8adcd7a..f88f4ef01951d3b77f2ca7d52d59a49492808616 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -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;