Add hover state for sidebar items

Author: janhavitupe

_sass/_colors.scss

@@ -10,6 +10,7 @@
   --nav-bg:            #f6fbfe;
   --nav-text:          #666666;
   --nav-selected:      #d9edf7;
+  --nav-hover:         #eef6fb;
   --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:         #3a3d42;
   --brand-color:       #000000;
   --page-header:       #999999;
   --inline-code-color: #FFFFFF;

_sass/_dark-mode.scss

@@ -41,6 +41,10 @@ h4 {
     background-color: var(--nav-selected) !important;
 }
 
+#nav-tree .item:not(.selected):hover {
+    background-color: var(--nav-hover) !important;
+}
+
 #nav-tree .selected a {
     color: var(--content-color) !important;
     text-shadow: none !important;

navtree.css

@@ -39,6 +39,10 @@
   text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
 }
 
+#nav-tree .item:not(.selected):hover {
+  background-color: var(--nav-hover, #eef6fb);
+}
+
 #nav-tree img {
   margin:0px;
   padding:0px;