From 27b1ca261f5da40bcc8f590be081f2c017b1f040 Mon Sep 17 00:00:00 2001 From: Rudranshi Mittal Date: Fri, 27 Mar 2026 13:07:14 +0530 Subject: [PATCH 1/4] [UI/UX] Add nav-hover CSS variable for light and dark mode --- _sass/_colors.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/_sass/_colors.scss b/_sass/_colors.scss index 6866e884..00235fcf 100644 --- a/_sass/_colors.scss +++ b/_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; From 54e770cc2e0616b31c749b5da2580146be2b5929 Mon Sep 17 00:00:00 2001 From: Rudranshi Mittal Date: Fri, 27 Mar 2026 13:14:38 +0530 Subject: [PATCH 2/4] [UI/UX] Add hover effect to sidebar navigation items --- navtree.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/navtree.css b/navtree.css index f3fac956..676c554f 100644 --- a/navtree.css +++ b/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; From aedb4d127505a6d1952701f0c7c10bfe8ff7ad15 Mon Sep 17 00:00:00 2001 From: Rudranshi Mittal Date: Sat, 28 Mar 2026 00:10:35 +0530 Subject: [PATCH 3/4] [UI/UX] Make entire sidebar item container clickable with hover effect --- .bundle/config | 2 +- Gemfile.lock | 2 ++ navtree.css | 1 + navtree.js | 6 ++++++ 4 files changed, 10 insertions(+), 1 deletion(-) diff --git a/.bundle/config b/.bundle/config index ee5bb423..ac5c2402 100644 --- a/.bundle/config +++ b/.bundle/config @@ -1,3 +1,3 @@ --- -BUNDLE_PATH: "vendor/bundle" +BUNDLE_PATH: "~/.gem" BUNDLE_FROZEN: "false" diff --git a/Gemfile.lock b/Gemfile.lock index 4303aa08..5f0acd28 100644 --- a/Gemfile.lock +++ b/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 diff --git a/navtree.css b/navtree.css index 676c554f..c7c5f386 100644 --- a/navtree.css +++ b/navtree.css @@ -81,6 +81,7 @@ #nav-tree .item { margin:0px; padding:0px; + cursor: pointer; } #nav-tree-disabled { diff --git a/navtree.js b/navtree.js index 08d77360..7d05e3d3 100644 --- a/navtree.js +++ b/navtree.js @@ -193,6 +193,12 @@ 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() { + var a = node.itemDiv.querySelector("a"); + if (a) a.click(); + }; + node.labelSpan = document.createElement("span"); node.labelSpan.className = "label"; From 752e9e08504cf37de375344b2231c026de64e7fe Mon Sep 17 00:00:00 2001 From: Rudranshi Mittal Date: Sat, 28 Mar 2026 00:35:43 +0530 Subject: [PATCH 4/4] [UI/UX] Fix arrow toggle conflict with container click handler --- navtree.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/navtree.js b/navtree.js index 7d05e3d3..ebefaf93 100644 --- a/navtree.js +++ b/navtree.js @@ -194,7 +194,9 @@ function newNode(o, po, text, link, childrenData, lastNode) node.itemDiv.className = "item"; node.itemDiv.style.cursor = "pointer"; - node.itemDiv.onclick = function() { + 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(); };