Client: add titles to menu blocks

3 files changed, 26 insertions, 5 deletions

diff --git a/client/src/app/core/menu/menu-admin.component.scss b/client/src/app/core/menu/menu-admin.component.scss
index 04403950e..5881475f1 100644
--- a/client/src/app/core/menu/menu-admin.component.scss
+++ b/client/src/app/core/menu/menu-admin.component.scss
@@ -1,13 +1,25 @@
 menu {
   background-color: $black-background;
-  padding: 20px;
+  padding: 25px;
   margin: 0;
   height: 100%;
 
+  .panel-block {
+    margin-bottom: 15px;
+  }
+
+  .block-title {
+    text-transform: uppercase;
+    font-weight: bold;
+    color: $menu-color-block;
+    margin-bottom: 10px;
+  }
+
   a {
     display: block;
+    margin-left: 5px;
     height: 30px;
-    color: #9cabb8;
+    color: $menu-color-link;
     cursor: pointer;
     transition: color 0.3s;
 
@@ -17,7 +29,7 @@ menu {
     }
 
     .glyphicon {
-      margin-right: 20px;
+      margin-right: 15px;
     }
 
     &:hover, &.active {
diff --git a/client/src/app/core/menu/menu.component.html b/client/src/app/core/menu/menu.component.html
index 0b093882f..63a1c03c5 100644
--- a/client/src/app/core/menu/menu.component.html
+++ b/client/src/app/core/menu/menu.component.html
@@ -1,5 +1,7 @@
 <menu>
   <div class="panel-block">
+    <div class="block-title">Account</div>
+
     <div id="panel-user-login" class="panel-button">
       <a *ngIf="!isLoggedIn" routerLink="/login" routerLinkActive="active">
         <span class="hidden-xs glyphicon glyphicon-log-in"></span>
@@ -24,6 +26,8 @@
   </div>
 
   <div class="panel-block">
+    <div class="block-title">Videos</div>
+
     <a routerLink="/videos/list" routerLinkActive="active">
       <span class="hidden-xs glyphicon glyphicon-list"></span>
       See videos
@@ -35,8 +39,10 @@
     </a>
   </div>
 
-  <div class="panel-block">
-    <a *ngIf="isUserAdmin()" routerLink="/admin" routerLinkActive="active">
+  <div *ngIf="isUserAdmin()" class="panel-block">
+    <div class="block-title">Other</div>
+
+    <a routerLink="/admin" routerLinkActive="active">
       <span class="hidden-xs glyphicon glyphicon-cog"></span>
       Administration
     </a>
diff --git a/client/src/sass/_variables.scss b/client/src/sass/_variables.scss
index 1b91434ba..d89fbb5e0 100644
--- a/client/src/sass/_variables.scss
+++ b/client/src/sass/_variables.scss
@@ -3,6 +3,9 @@ $grey-color: #555;
 $black-background: #1d2125;
 $grey-background: #f6f2f2;
 
+$menu-color-link: #9cabb8;
+$menu-color-block: #686f77;
+
 $header-height: 65px;
 $header-border-color: #e9eff6;