Account menu on header

app/assets/images/icons/account-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><g stroke="#4393F3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M18.938 20.625C17.055 22.127 14.6 23.084 12 23.084c-2.614 0-5.015-.954-6.902-2.476l-.1-.943v-.831c0-2.33 4.67-3.5 7.002-3.5 2.33 0 6.999 1.17 6.999 3.5V20l-.063.625zM12 11.333a2.989 2.989 0 0 0 2.995-2.999c0-1.66-1.332-3-2.995-3a2.998 2.998 0 0 0-3.005 3A2.997 2.997 0 0 0 12 11.333z"/><path d="M23 12c0 6.075-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1s11 4.925 11 11z"/></g><path d="M0 0h24v24H0z"/></g></svg>

app/assets/images/icons/sign-out.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"/><g stroke="#4393F3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M13 12H3m6.438 4.242L13.68 12 9.437 7.757"/><path d="M3 16v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5c0-1.1-.901-2-2-2H5c-1.099 0-2 .9-2 2v3"/></g></g></svg>

app/assets/javascripts/new_design/header.js

@@ -0,0 +1,10 @@
+window.TPS = window.TPS || {};
+
+$(document).on("click", "body", function () {
+  $(".header-menu").removeClass("open fade-in-down");
+});
+
+TPS.toggleHeaderMenu = function(event) {
+  event.stopPropagation();
+  $(".header-menu").toggleClass("open fade-in-down");
+}

app/assets/stylesheets/new_design/_placeholders.scss

@@ -19,3 +19,8 @@
   max-width: $page-width + 2 * $default-padding;
   margin: 0 auto;
 }
+
+%animation {
+  animation-fill-mode: forwards;
+  animation-duration: 0.3s;
+}

app/assets/stylesheets/new_design/animations.scss

@@ -0,0 +1,18 @@
+@import "placeholders";
+
+@keyframes fade-in-down {
+  0% {
+    opacity: 0;
+    margin-top: -10px;
+  }
+
+  100% {
+    opacity: 1;
+    margin-top: 0;
+  }
+}
+
+.fade-in-down {
+  @extend %animation;
+  animation-name: fade-in-down;
+}

app/assets/stylesheets/new_design/new_header.scss

@@ -28,7 +28,7 @@
   align-items: center;
   height: 100%;
 
-  li {
+  > li {
     @include horizontal-padding(8px);
 
     &:last-child {
@@ -54,6 +54,68 @@
     cursor: pointer;
     position: absolute;
     right: 0;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+}
+
+.header-menu-opener {
+  position: relative;
+
+  img {
+    cursor: pointer;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+}
+
+.header-menu {
+  display: none;
+  position: absolute;
+  right: 0;
+  top: 34px;
+  font-size: 14px;
+  background: #FFFFFF;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  border: 1px solid $border-grey;
+  min-width: 270px;
+  max-width: 340px;
+
+  &.open {
+    display: block;
+  }
+
+  li {
+    border-bottom: 1px solid $border-grey;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .menu-item {
+      align-items: center;
+      padding: 14px;
+      color: $grey;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      img {
+        margin-right: 14px;
+      }
+    }
+
+    .menu-link {
+      display: flex;
+      color: $black;
+
+      &:hover {
+        background: $light-grey;
+      }
+    }
   }
 }
 

app/helpers/application_helper.rb

@@ -5,4 +5,10 @@ module ApplicationHelper
     when "alert" then "alert-danger"
     end
   end
+
+  def current_email
+    current_user.try(:email) ||
+      current_gestionnaire.try(:email) ||
+      current_administrateur.try(:email)
+  end
 end

app/views/layouts/_new_header.haml

@@ -11,6 +11,17 @@
               = text_field_tag "q", "#{@search_terms unless @search_terms.nil?}", placeholder: "Rechercher"
               %button{ title: "Rechercher" }
                 = image_tag "icons/search-blue.svg"
+        %li
+          .header-menu-opener
+            = image_tag "icons/account-circle.svg", onclick: "javascript:TPS.toggleHeaderMenu(event);", title: "Mon compte"
+            %ul.header-menu
+              %li
+                .menu-item{ title: current_email }
+                  = current_email
+              %li
+                = link_to destroy_user_session_path, method: :delete, class: "menu-item menu-link" do
+                  = image_tag "icons/sign-out.svg"
+                  Se déconnecter
 
       - elsif request.path != new_user_session_path
         %li