Add a hover effect on left menu links (#418) (#425)

I:
- removed the `margin-left` on the `.panel-block` to put it on the children
instead
- squashed the `margin-bottom` of the links into their `height` (and rounded it
to 40px, feel free to correct me)
- centered vertically the content of the links
- added the `background-color` change on hover for the links

I put the same color as the `.logged-in-block`. Maybe it should be externalized
as a SCSS variable?

I also added a CSS transition. Is it alright?

diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index da5a581a147ca0335956dd62e4af55384440d92e..c36a7aa36c89590780d9f2bf9c6a96eb88c3fbab 100644 (file)
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -91,22 +91,27 @@ menu {
     font-weight: $font-bold; // Bold
     font-size: 13px;
     margin-bottom: 25px;
+    margin-left: 26px;
   }
 
   .panel-block {
     margin-bottom: 45px;
-    margin-left: 26px;
 
     a {
       display: flex;
+      align-items: center;
+      padding-left: 26px;
       color: $menu-color;
       cursor: pointer;
-      height: 22px;
-      line-height: 22px;
+      height: 40px;
       font-size: 16px;
-      margin-bottom: 15px;
+      transition: background-color .1s ease-in-out;
       @include disable-default-a-behaviour;
 
+      &:hover {
+        background-color: rgba(255, 255, 255, 0.15);
+      }
+
       .icon {
         @include icon(22px);