Amam/navbar hover fix

src/index.html

@@ -8,6 +8,7 @@
     <meta http-equiv="Pragma" content="no-cache" />
     <meta http-equiv="Expires" content="0" />
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="Webtrader is an advanced trading platform that's fully-customisable according to your personal preferences with intuitive trading interface">
 
     <title>Binary.com : Webtrader</title>
 
@@ -32,7 +33,7 @@
     <link rel="icon" type="image/png" sizes="32x32" href="v<version>/lib/binary-style/src/images/favicons/favicon-32x32.png">
 
     <link rel="stylesheet" type="text/css" href="v<version>/lib/binary-style/binary.css">
-    <link rel="stylesheet" type="text/css" href="v<version>/index.css">
+    <link rel="preload" type="text/css" href="v<version>/index.css" as="style">
 
 </head>
 

src/main.html

@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="Webtrader is an advanced trading platform that's fully-customisable according to your personal preferences with intuitive trading interface">
     <title>Binary.com : Webtrader</title>
 
     <link rel="apple-touch-icon" sizes="57x57" href="lib/binary-style/src/images/favicons/apple-touch-icon-57x57.png">
@@ -60,7 +61,7 @@
     <noscript>
         <iframe src="//www.googletagmanager.com/ns.html?id=GTM-PDDC6F" height="0" width="0" style="display:none;visibility:hidden"></iframe>
     </noscript>
-    <script>
+    <script rel="preload">
         (function (w, d, s, l, i) {
             w[l] = w[l] || []; w[l].push({
                 'gtm.start':

src/navigation/navigation.es6

@@ -8,6 +8,13 @@ import workspace from '../workspace/workspace.js';
 import '../common/util';
 import 'css!navigation/navigation.css';
 
+const menu_selectors = [
+   '.trade',
+   '.instruments',
+   '.resources',
+   '.workspace',
+]
+
 const getType = (acc) => {
    let id = acc.loginid || acc.id;
    if(!acc || !id) return;
@@ -355,6 +362,29 @@ export const init = (callback) => {
    if (is_beta()) {
       root.find("a.config").closest('li').show();
    }
+
+   // Handle click navigation to show menu dialog
+   menu_selectors.forEach((selector) => {
+      const nav_selector = 'nav #nav-menu';
+      const dialog_selector = `${nav_selector} ${selector} > ul`;
+      const current_selector = `${nav_selector} ${selector}`;
+      const visible = {
+         'visibility': 'visible',
+         'opacity': 1
+      };
+      $(current_selector).click((e) => {
+            $(dialog_selector).toggle('fast',
+            () => {
+               $(dialog_selector).css(visible)
+            }
+         );
+      });
+      $(document).mouseup((e) => {
+         if (!$(current_selector).is(e.target) && $(current_selector).has(e.target).length === 0) {
+            $(dialog_selector).hide();
+         }
+      });
+   });
 }
 
 export default {

src/navigation/navigation.scss

@@ -40,12 +40,7 @@ nav {
             visibility: hidden;
             z-index: 999999;
             opacity: 0;
-            transition: visibility 0.5s, opacity 0.1s linear 0.1s;
-         }
-         &:hover > ul {
-            visibility: visible;
-            opacity: 1;
-            transition: visibility 0s 0.1s;
+            transition: visibility 0.2s;
          }
       }
      .resources {

src/trade/tradeMenu.es6

@@ -55,8 +55,6 @@ export const init = () => {
       liveapi.events.on('login', refresh_active_symbols);
       liveapi.events.on('logout', refresh_active_symbols);
    });
-   /* refresh menu on mouse leave */
-   const trade = $("#nav-menu").find(".trade").on('mouseleave', refresh_active_symbols);
 }
 
 export default  { init };