From f87682a5f75777ec151bd6054cd660e3940bb8e8 Mon Sep 17 00:00:00 2001
From: Greggman <github@greggman.com>
Date: Mon, 3 Jan 2022 15:42:34 -0800
Subject: [PATCH] fix link highlighting in manual (#23113)

---
 manual/index.html | 39 +++++++++++++++++++++++++++++----------
 1 file changed, 29 insertions(+), 10 deletions(-)

diff --git a/manual/index.html b/manual/index.html
index 2d730a6e943caa..1c70602b9b6c42 100644
--- a/manual/index.html
+++ b/manual/index.html
@@ -151,7 +151,12 @@ <h1><a href="https://threejs.org">three.js</a></h1>
 
 			// Activate content and title change on browser navigation
 
-			window.onpopstate = createNewIframe;
+			window.onpopstate = function() {
+
+				updateNavigation();
+				createNewIframe();
+
+			}
 
 			// Create the navigation panel and configure the iframe
 
@@ -189,14 +194,7 @@ <h1><a href="https://threejs.org">three.js</a></h1>
 				window.location.hash = pageURL;
 				panel.classList.remove( 'open' );
 
-
-				content.querySelectorAll( 'a' ).forEach( function ( item ) {
-
-					item.classList.remove( 'selected' );
-
-				} );
-
-				link.classList.add( 'selected' );
+				updateNavigation();
 
 			} );
 
@@ -224,7 +222,7 @@ <h1><a href="https://threejs.org">three.js</a></h1>
 			}
 
 			const categories = list[ language ];
-			const selectedPage = window.location.hash.substring( 1 );
+			const selectedPage = window.location.hash.substring( 1 ).replace( /\.html$/, '' );
 
 			for ( const category in categories ) {
 
@@ -286,6 +284,26 @@ <h1><a href="https://threejs.org">three.js</a></h1>
 
 		}
 
+		function updateNavigation() {
+
+			const selectedPage = window.location.hash.substring( 1 ).replace( /\.html$/, '' );
+
+			content.querySelectorAll( 'a' ).forEach( function ( item ) {
+
+				if ( item.href.includes( selectedPage ) ) {
+
+					item.classList.add( 'selected' );
+
+				} else {
+
+					item.classList.remove( 'selected' );
+
+				}
+
+			} );
+
+		}
+
 		// Auto change language url. If a reader open a document in English, when he click "zh", the document he read will auto change into Chinese version
 
 		function autoChangeUrlLanguage( language ) {
@@ -430,6 +448,7 @@ <h1><a href="https://threejs.org">three.js</a></h1>
 					} else {
 
 						window.location.hash = newHash;
+						updateNavigation();
 						createNewIframe();
 
 					}