diff --git a/src/header.pug b/src/header.pug index 2fe2110..43f8eb6 100644 --- a/src/header.pug +++ b/src/header.pug @@ -26,11 +26,24 @@ nav(role="user's functionalities menu") ul if (endpoints.uploads || (endpoints.get && endpoints.get.uploads)) && (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.users || (endpoints.get && endpoints.get.users)) - li + li.border-bottom solid-link.segment.padding(next='profile' data-trans='header.myProfile') - li + li.border-bottom solid-link.segment.padding(next='admin' data-trans='header.admin') - li + ul + if (endpoints.users || (endpoints.get && endpoints.get.users)) + solid-route(name='admin-communities') + li.segment.padding.text-normal + a.icon.icon-people.icon-color-third(data-trans='admin.menuRight.community') + if endpoints.circles || (endpoints.get && endpoints.get.circles) + solid-route(name='admin-circles') + li.segment.padding.text-normal + a.icon.icon-globe.icon-color-third(data-trans='admin.menuRight.circles') + if endpoints.projects || (endpoints.get && endpoints.get.projects) + solid-route(name='admin-projects') + li.segment.padding.text-normal + a.icon.icon-folder-alt.icon-color-third(data-trans='admin.menuRight.projects') + li.border-bottom solid-link.segment.padding(next='about' data-trans='header.about') button.segment.padding.text-bold.text-color-heading(role='log out' onclick="document.querySelector('sib-auth').logout();" data-trans='header.logOut') diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss index 0ae3bca..60711e8 100644 --- a/src/styles/base/header.scss +++ b/src/styles/base/header.scss @@ -394,20 +394,33 @@ solid-notifications { list-style: none; margin: 0; padding: 0; - + + solid-route { + display: block; + + &:hover a { + color: var(--color-secondary); + } + } + li { solid-link { display: block; - border-bottom: 1px solid #E4E8ED; /*margin-right: 0;*/ /*padding: 1.6rem 1.3rem;*/ + } + &:hover { - &:hover { + solid-link { color: var(--color-secondary); } } } + + .icon::before { + margin-right: 10px; + } } button { diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 4d7a79b..1e84825 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -111,6 +111,10 @@ } } +.border-bottom { + border-bottom: 1px solid #D6CECE; +} + .shadow { box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09); } @@ -123,10 +127,30 @@ background: white; } +.icon-color-primary::before { + color: var(--color-primary); +} + +.icon-color-secondary::before { + color: var(--color-secondary); +} + +.icon-color-third::before { + color: var(--color-third); +} + +.icon-color-heading::before { + color: var(--color-heading); +} + .text-bold { font-weight: 600; } +.text-normal { + font-weight: normal; +} + .text-uppercase { text-transform: uppercase; } diff --git a/src/styles/components/icons/icons.scss b/src/styles/components/icons/icons.scss index 1f5b34f..651b237 100644 --- a/src/styles/components/icons/icons.scss +++ b/src/styles/components/icons/icons.scss @@ -43,10 +43,6 @@ /* fix buttons height, for twitter bootstrap */ line-height: 1em; - /* Animation center compensation - margins should be symmetric */ - /* remove if not needed */ - margin-left: 0.2em; - /* you can be more comfortable with increased icons size */ /* font-size: 120%; */