[UI/UX] Add hover effect to sidebar navigation items

.bundle/config

@@ -1,3 +1,3 @@
 ---
-BUNDLE_PATH: "vendor/bundle"
+BUNDLE_PATH: "~/.gem"
 BUNDLE_FROZEN: "false"

Gemfile.lock

@@ -280,6 +280,7 @@ GEM
       concurrent-ruby (~> 1.0)
     unicode-display_width (1.8.0)
     uri (0.13.0)
+    wdm (0.2.0)
     webrick (1.9.2)
     yell (2.2.2)
 
@@ -294,6 +295,7 @@ DEPENDENCIES
   github-pages (= 232)
   html-proofer (~> 3.19.4)
   json
+  wdm (>= 0.1.1)
   webrick (~> 1.9)
 
 BUNDLED WITH

_sass/_colors.scss

@@ -10,6 +10,7 @@
   --nav-bg:            #f6fbfe;
   --nav-text:          #666666;
   --nav-selected:      #d9edf7;
+  --nav-hover:         #eaf4fb;
   --brand-color:       #f6fbfe;
   --page-header:       #888888;  
   --inline-code-color: #393318;
@@ -30,6 +31,7 @@
   --nav-bg:            #202225;
   --nav-text:          #cccccc;
   --nav-selected:      #535353;
+  --nav-hover:         #444649;
   --brand-color:       #000000;
   --page-header:       #999999;
   --inline-code-color: #FFFFFF;

navtree.css

@@ -39,6 +39,11 @@
   text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
 }
 
+#nav-tree .item:hover {
+  background-color: var(--nav-hover);
+  cursor: pointer;
+}
+
 #nav-tree img {
   margin:0px;
   padding:0px;
@@ -76,6 +81,7 @@
 #nav-tree .item {
   margin:0px;
   padding:0px;
+  cursor: pointer;
 }
 
 #nav-tree-disabled {

navtree.js

@@ -193,6 +193,14 @@ function newNode(o, po, text, link, childrenData, lastNode)
   node.itemDiv = document.createElement("div");
   node.itemDiv.className = "item";
 
+  node.itemDiv.style.cursor = "pointer";
+  node.itemDiv.onclick = function(e) {
+    if (e.target.classList.contains('arrow') || 
+        e.target.closest('.arrow')) return;
+    var a = node.itemDiv.querySelector("a");
+    if (a) a.click();
+  };
+
   node.labelSpan = document.createElement("span");
   node.labelSpan.className = "label";