Adding select menu

src/includes/mentor/components/header.pug

@@ -18,18 +18,23 @@
             )
             input.ico_droite.ico_search  
             
-            sib-link(next='mentor-account')
-              sib-display#user-account-picture(
-                  bind-user
-                  fields='account.picture',
-                  widget-account.picture='cs-account-picture'
-              )
-
-            sib-link(next='mentor-dashboard')
-                p Dashboard
-            sib-link(next='mentor-database')
-                p Resources database
-            sib-link(next='mentor-account')
-                p My account
-            sib-link.logout-button(next='mentor-dashboard')
-                p Logout
\ No newline at end of file
+            .dropdownWrapper
+                sib-display#user-account-picture.dropdownLabel(
+                    bind-user
+                    fields='account.picture',
+                    widget-account.picture='cs-account-picture'
+                )
+                div.dropdownPanel
+                    ul
+                        li
+                            sib-link(next='mentor-dashboard')
+                                p Dashboard
+                        li
+                            sib-link(next='mentor-database')
+                                p Resources database
+                        li
+                            sib-link(next='mentor-account')
+                                p My account
+                        li
+                            sib-link.logout-button(next='mentor-dashboard')
+                                p Logout
\ No newline at end of file

src/scripts/coopstarter.js

@@ -155,6 +155,19 @@ jQuery(document).ready(function($) {
   refreshList("mentor_profile_edition", "mentor_complementary");
   refreshList("mentor_profile_edition", "mentor_contact");
 
+  var header_dropdown = $('.dropdownWrapper'),
+      drop_choices   = header_dropdown.find('.dropdownLabel');
+  
+  drop_choices.on('click', function(e){
+    e.stopPropagation();
+    var element = $(this).parent();
+    element.find('.dropdownPanel').fadeToggle(500);
+  });
+
+  $("body").click(function(){
+    $('.dropdownPanel').hide(500);
+  });
+
   const logoutButtons = document.getElementsByClassName("logout-button");
   for (var i = 0; i < logoutButtons.length; i++) {
     logoutButtons[i].addEventListener("click", function() {

src/styles/index.scss

@@ -1342,4 +1342,56 @@ XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
 
 b, strong {
 	font-weight: bolder;
+}
+
+/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+XXXXXXXXXXXXXXXXXXXXXXXX HEADER DROPDOWNXXXXXXXXXXXXXXXXXXXX
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
+
+.dropdownWrapper {
+    display: inline-block;
+    padding: 0px;
+    position: relative;
+    border-radius: 3px;
+    text-align: center;
+}
+  
+.dropdownWrapper:hover img{ opacity: .5; }
+
+.dropdownLabel {
+    cursor: pointer;
+}
+
+.dropdownPanel {
+    position: absolute;
+    min-width: 150px;
+    background-color: #444C4D;
+    left: -100%;
+    top: 5px;
+    margin-top: 35px;
+    display: none;
+    z-index: 2;
+    ul {
+        padding: 0;
+        margin:0;
+        list-style: none; 
+    }
+    sib-link{
+        display: block;
+        padding: 10px 20px;
+        text-decoration: none;
+        color: white;
+        transition: .5s all ease-in;
+        cursor: pointer;
+        p {
+            margin: 0;
+        }
+    }
+    sib-link:hover{
+        background: #2D3132;
+    }
+    li:not(last-child){
+        border-bottom: 1px solid #5E696B;
+    }
 }
\ No newline at end of file