feature: header: user panel

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')
 

src/styles/base/header.scss

@@ -395,19 +395,32 @@ solid-notifications {
         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 {

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;
 }

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%; */