finalize the delayed dropdown and documents

ot_templating/Resources/Public/assets/script/main.js

@@ -1,6 +1,11 @@
 $(document).ready(function(){
 
     // ******* Navbars & dropdowns *******
+
+    // delay in ms before dropdown collapse after the cursor leave
+    var collapsingDelay = 400;
+
+    // hide the dropdown element and its children
     var hideDropdownsFor = function(elt, delay=0) {
         if (delay === 0) {
             elt.children('ul.dropdown-menu').removeClass('dropdown-displayed');
@@ -16,6 +21,7 @@ $(document).ready(function(){
         }
     }
 
+    // stop any delayed commands on elt and its children
     var stopDelayedHidingFor = function(elt) {
         elt.stop(true);
         elt.children('ul.dropdown-menu').stop(true);
@@ -23,19 +29,25 @@ $(document).ready(function(){
 
     $('.dropdown').on('mouseenter', function(e) {
 
+        // stop any delayed hiding on this since the cursor went back on it
         stopDelayedHidingFor($(this));
+
+        // hide every other dropdown in the page
         $('.dropdown.dropdown-displayed').not($(this).parents()).each(function() {
             hideDropdownsFor($(this));
         });
 
+        // display the dropdown
         dropdown = $(this).find('ul.dropdown-menu:first');
         if (dropdown.length !== 0) {
             $(this).addClass('dropdown-displayed');
             dropdown.addClass('dropdown-displayed');
             dropdown.show();
 
+            // if this is a second level dropdown
             if ($(this).parents('.dropdown').length !== 0) {
-                // second level dropdown
+
+                // move it on the right or left according to its current position
                 dropdown.removeClass('dropdown-left').removeClass('dropdown-right');
                 if (($(this).offset().left + $(this).width() + dropdown.width()) > $(window).width()) {
                     dropdown.addClass('dropdown-left');
@@ -44,14 +56,16 @@ $(document).ready(function(){
                 }
             }
         }
+
     }).on('mouseleave', function(e) {
         if ($(this).hasClass('delayed-collapsing')) {
-            hideDropdownsFor($(this), 800);
+            hideDropdownsFor($(this), collapsingDelay);
         } else {
             hideDropdownsFor($(this));
         }
     });
 
+
     // **** Login Pop-Up and Auth
     $('#login-btn').on('click', function(e) {
         e.preventDefault();

ot_templating/Resources/Public/assets/style/common/module/menu.scss

@@ -1,6 +1,7 @@
 
 $menu-background-color: $menu-background-color;
 $menu-background-color-hovered: $menu-background-color-hovered;
+$menu-background-color-current: $menu-background-color-current;
 $menu-font-color: $menu-font-color;
 $menu-font-color-hovered: $menu-font-color-hovered;
 $menu-dropdown-background-color: $menu-dropdown-background-color;
@@ -25,12 +26,17 @@ $submenu-item-height: 30px;
   background-color: $menu-background-color;
   padding: 0;
   align-items: center;
+  margin: 0 0 1em;
 }
 
 #menu li {
   height: 100%;
 }
 
+#menu li.active {
+  background-color: $menu-background-color-current;
+}
+
 #menu li a {
   display: flex;
   flex-direction: row;
@@ -45,12 +51,17 @@ $submenu-item-height: 30px;
   text-decoration: none;
 }
 
+#menu li.active a {
+  color: $menu-font-color-hovered;
+}
+
 #menu li.dropdown-displayed a {
   color: $menu-font-color-hovered;
 }
 
 #menu li a:hover {
   text-decoration: none;
+  color: $menu-font-color-hovered;
 }
 
 #menu .caret {
@@ -87,7 +98,7 @@ $submenu-item-height: 30px;
   background-color: $menu-dropdown-background-color-current;
 }
 
-#menu .dropdown-menu li.active a {
+#menu .dropdown-menu li.active > a {
   color: $menu-dropdown-font-color-current;
 }