From 6562f1f727d13179025a8bb31715d2bf71dba86e Mon Sep 17 00:00:00 2001
From: Chocobozzz <florian.bigard@gmail.com>
Date: Fri, 21 Apr 2017 16:51:03 +0200
Subject: [PATCH] Client: add titles to menu blocks

---
 .../app/core/menu/menu-admin.component.scss    | 18 +++++++++++++++---
 client/src/app/core/menu/menu.component.html   | 10 ++++++++--
 client/src/sass/_variables.scss                |  3 +++
 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;