fixed on scroll to highlight menu item

css/scss/layout/_base.scss

@@ -148,13 +148,13 @@ ul {
 		list-style: none;
 		padding: 0;
 		margin: 0;
-		transition: all .3s;
+		transition: all 0.3s;
 		position: fixed;
 		background: var(--c-primary);
 		z-index: 9;
 		height: 100%;
 		padding: 16px;
-		&-wrap{
+		&-wrap {
 			height: 100%;
 			overflow-y: scroll;
 			padding-bottom: 80px;
@@ -175,10 +175,24 @@ ul {
 		&-in {
 			border-left: 1px solid var(--c-placeholder);
 			margin-left: 20px;
-			&-item{
-				.main-content__nav-link{
+			&-item {
+				.main-content__nav-link {
 					padding: 5px 10px;
 				}
+
+				&--active {
+					ul {
+						display: block;
+					}
+				}
+				&--active > .main-content__nav-link {
+					color: var(--c-primary-hover);
+					font-weight: 550;
+
+					// &:hover {
+					// 	font-weight: normal;
+					// }
+				}
 			}
 			&--none {
 				display: none;
@@ -226,7 +240,7 @@ ul {
 		flex: 1;
 		padding: 20px 20px 20px 270px;
 		@media (max-width: 768px) {
-			padding: 15px
+			padding: 15px;
 		}
 	}
 
@@ -268,7 +282,7 @@ ul {
 	z-index: 99;
 	cursor: pointer;
 	transition: all 0.3s;
-	svg{
+	svg {
 		width: 50px;
 		height: 50px;
 	}

js/index.js

@@ -3,18 +3,21 @@ const toggleClass = (id, className) => {
 	if (element) {
 		element.classList.toggle(className);
 	} else {
-		console.error('Element with ID ' + id + ' not found.');
+		console.error("Element with ID " + id + " not found.");
 	}
-}
+};
+
 const sidebar = {};
 document.addEventListener("DOMContentLoaded", function () {
 	/* ACCARDION CODE */
 	const accordionButtons = document.querySelectorAll(".accordion-button");
 
-	accordionButtons.forEach(button => {
+	accordionButtons.forEach((button) => {
 		button.addEventListener("click", function () {
 			const content = this.nextElementSibling;
-			const activeContent = document.querySelector(".accordion-content[style]");
+			const activeContent = document.querySelector(
+				".accordion-content[style]"
+			);
 
 			if (activeContent && activeContent !== content) {
 				activeContent.style.maxHeight = null;
@@ -33,29 +36,90 @@ document.addEventListener("DOMContentLoaded", function () {
 
 	/* Sidebar active menu, hide menu items */
 	const items = document.querySelectorAll(".main-content__nav-item");
+	const _subitem = {};
 	for (const item of items) {
-		if (item.getAttribute('item-url') === location.pathname) {
-			item.classList.add('main-content__nav-item--active');
+		if (item.getAttribute("item-url") === location.pathname) {
+			item.classList.add("main-content__nav-item--active");
+
 			sidebar.item = item;
+
+			if (item.children.length > 1 && item.children[1].children.length) {
+				item.children[1].children[0].classList.add(
+					"main-content__nav-in-item--active"
+				);
+
+				for (const subitem of item.children[1].children) {
+					if (
+						subitem.children.length &&
+						subitem.children[0].href &&
+						subitem.children[0].href.split("#").length > 1
+					) {
+						_subitem[subitem.children[0].href.split("#")[1]] =
+							subitem;
+					}
+				}
+			}
 		}
 	}
+	const itemBlocks = document.querySelectorAll(".item-block");
+	if (!itemBlocks.length) {
+		return;
+	}
+
+	itemBlocks[0].focused = true;
+
+	const start = itemBlocks[0].offsetTop;
+
+	const setItemBlock = (itemBlock) => {
+		for (const _itemBlock of itemBlocks) {
+			_itemBlock.focused = false;
+		}
+
+		for (const subitem in _subitem) {
+			_subitem[subitem].classList.remove(
+				"main-content__nav-in-item--active"
+			);
+		}
+
+		itemBlock.focused = true;
+
+		if (_subitem[itemBlock.id]) {
+			_subitem[itemBlock.id].classList.add(
+				"main-content__nav-in-item--active"
+			);
+		}
+	};
+	window.onscroll = function () {
+		for (const itemBlock of itemBlocks) {
+			const startPoint = itemBlock.offsetTop - start;
+			const endPoint = startPoint + itemBlock.offsetHeight;
+
+			if (window.scrollY >= startPoint && window.scrollY < endPoint) {
+				if (!itemBlock.focused) {
+					setItemBlock(itemBlock);
+				}
+
+				break;
+			}
+		}
+	};
 });
 
-document.addEventListener('DOMContentLoaded', function () {
-	const goTopButton = document.querySelector('.goTop');
+document.addEventListener("DOMContentLoaded", function () {
+	const goTopButton = document.querySelector(".goTop");
 
-	goTopButton.addEventListener('click', function () {
+	goTopButton.addEventListener("click", function () {
 		window.scrollTo({
 			top: 0,
-			behavior: 'smooth'
+			behavior: "smooth",
 		});
 	});
 });
 
-const burgerWrap = document.querySelector('.burger-wrap');
+const burgerWrap = document.querySelector(".burger-wrap");
 
-const burger = document.querySelector('.burger');
+const burger = document.querySelector(".burger");
 
-burgerWrap.addEventListener('click', () => {
-	burger.classList.toggle('burger--close');
+burgerWrap.addEventListener("click", () => {
+	burger.classList.toggle("burger--close");
 });