diff --git a/src/menu.pug b/src/menu.pug index 070d94f..90c8e1f 100644 --- a/src/menu.pug +++ b/src/menu.pug @@ -14,7 +14,8 @@ nav#navbar sib-route(hidden, name='job-offer-create') div 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/`) @@ -28,7 +29,7 @@ nav#navbar div.menu div.menu-notification 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( diff --git a/src/styles/menu.scss b/src/styles/menu.scss index af9ad2d..7a9942e 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); @@ -41,9 +42,10 @@ sib-router { flex-direction: column; .sub-menu { - padding-left: 2em; + padding-left: 1.9em; div{ - padding-bottom: 1em; + color: $color-grey-mid; + padding-bottom: 0.7em; } } @@ -60,8 +62,7 @@ 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; @@ -72,6 +73,7 @@ sib-router { .menu-notification > div { background-color: $color-purple-dark; color: $color-yellow-light; + font-size: 14px; } } @@ -84,6 +86,7 @@ sib-router { align-items: center; display: flex; flex-direction: column; + font-size: 12px; &:before { width: 1.9em; @@ -97,6 +100,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: 12px; + } + } + .menu-label { //flex-basis: 8em; width: 8em; @@ -106,6 +127,8 @@ sib-router { display: flex; flex-direction: column; text-transform: uppercase; + font-weight: 600; + padding-left: 10px; } .menu-notification { @@ -123,10 +146,11 @@ sib-router { display: flex; justify-content: center; align-items: center; - width: 1.5em; - height: 1.5em; + width: 1.6em; + height: 1.6em; border-radius: 100%; background-color: $color-yellow-light; + font-size: 14px; } } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 1fc8a29..81e787c 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -2,6 +2,7 @@ $color-white: #fff; $color-black: #36383b; $color-grey: #898f95; +$color-grey-mid: #abaaba; $color-grey-light2: #d8d8d8; $color-grey-light: #f0f3f6; $color-yellow: #ffb700;