From 94699ed010a4a803842e49321af6d1fbf197ac76 Mon Sep 17 00:00:00 2001
From: Charl Ritter <charl.ritter@spandigital.com>
Date: Wed, 24 Jul 2024 16:44:01 +0200
Subject: [PATCH 1/2] Change sidenav to highlight first and not last item if
 content smaller than screensize

---
 CHANGELOG.md           |  6 +++++-
 src/util/scroll-spy.js | 28 +++-------------------------
 2 files changed, 8 insertions(+), 26 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 82443d9..ac6d10a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,4 +4,8 @@
 
 ## 2024-01-10
 ### Updates
-- Added the Github team as the code owners @CharlRitterDev  https://spandigital.atlassian.net/browse/PRSDM-4891
+- Added the Github team as the code owners. @CharlRitterDev https://spandigital.atlassian.net/browse/PRSDM-4891
+-
+## 2024-07-24
+### Updates
+- Change sidenav to highlight first and not last item if content smaller than screensize. @CharlRitterDev
diff --git a/src/util/scroll-spy.js b/src/util/scroll-spy.js
index 32bcb82..fcba6b3 100755
--- a/src/util/scroll-spy.js
+++ b/src/util/scroll-spy.js
@@ -31,8 +31,7 @@
 		// Event support
 		events: true,
 
-        attribute: 'href' 
-
+		attribute: 'href'
 	};
 
 
@@ -156,26 +155,6 @@
 		return parseInt(bounds.top, 10) <= offset;
 	};
 
-	/**
-	 * Check if at the bottom of the viewport
-	 * @return {Boolean} If true, page is at the bottom of the viewport
-	 */
-	var isAtBottom = function () {
-		if (window.innerHeight + window.pageYOffset >= getDocumentHeight()) return true;
-		return false;
-	};
-
-	/**
-	 * Check if the last item should be used (even if not at the top of the page)
-	 * @param  {Object} item     The last item
-	 * @param  {Object} settings The settings for this instantiation
-	 * @return {Boolean}         If true, use the last item
-	 */
-	var useLastItem = function (item, settings) {
-		if (isAtBottom() && isInView(item.content, settings, true)) return true;
-		return false;
-	};
-
 	/**
 	 * Get the active content
 	 * @param  {Array}  contents The content areas
@@ -183,11 +162,11 @@
 	 * @return {Object}          The content area and matching navigation link
 	 */
 	var getActive = function (contents, settings) {
-		var last = contents[contents.length-1];
-		if (useLastItem(last, settings)) return last;
 		for (var i = contents.length - 1; i >= 0; i--) {
 			if (isInView(contents[i].content, settings)) return contents[i];
 		}
+
+		return contents[0];
 	};
 
 	/**
@@ -334,7 +313,6 @@
 
 				// Get the content for the nav item
                 const target = item.getAttribute(options.attribute)
-
 				const id = decodeURIComponent(target?.substr(1));
 				var content = document.getElementById(id);
 				if (!content || content.tagName !== 'DIV') return;

From 908cf208357284ae71388ff49622566c29612593 Mon Sep 17 00:00:00 2001
From: Charl Ritter <charl.ritter@spandigital.com>
Date: Thu, 25 Jul 2024 10:55:32 +0200
Subject: [PATCH 2/2] try again

---
 src/util/scroll-spy.js | 36 +++++++++++++++++++++---------------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/util/scroll-spy.js b/src/util/scroll-spy.js
index fcba6b3..0a4fd93 100755
--- a/src/util/scroll-spy.js
+++ b/src/util/scroll-spy.js
@@ -126,19 +126,6 @@
 
 	};
 
-	/**
-	 * Get the document element's height
-	 * @private
-	 * @returns {Number}
-	 */
-	var getDocumentHeight = function () {
-		return Math.max(
-			document.body.scrollHeight, document.documentElement.scrollHeight,
-			document.body.offsetHeight, document.documentElement.offsetHeight,
-			document.body.clientHeight, document.documentElement.clientHeight
-		);
-	};
-
 	/**
 	 * Determine if an element is in view
 	 * @param  {Node}    elem     The element
@@ -155,6 +142,25 @@
 		return parseInt(bounds.top, 10) <= offset;
 	};
 
+	/**
+	 * Check if at the top of the viewport
+	 * @return {Boolean} If true, page is at the bottom of the viewport
+	 */
+	var isAtTop = function () {
+		return window.pageYOffset === 0;
+	};
+
+	/**
+	 * Check if the first item should be used (even if not at the top of the page)
+	 * @param  {Object} item     The first item
+	 * @param  {Object} settings The settings for this instantiation
+	 * @return {Boolean}         If true, use the first item
+	 */
+	var useFirstItem = function (item, settings) {
+		if (isAtTop() && isInView(item.content, settings, true)) return true;
+		return false;
+	};
+
 	/**
 	 * Get the active content
 	 * @param  {Array}  contents The content areas
@@ -162,11 +168,11 @@
 	 * @return {Object}          The content area and matching navigation link
 	 */
 	var getActive = function (contents, settings) {
+		var first = contents[0];
+		if (useFirstItem(first, settings)) return first;
 		for (var i = contents.length - 1; i >= 0; i--) {
 			if (isInView(contents[i].content, settings)) return contents[i];
 		}
-
-		return contents[0];
 	};
 
 	/**