Client: add titles to menu blocks

2 files changed, 23 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>