Hightlight sidebar

src/App/App.css

@@ -74,6 +74,10 @@ html{
   display: none;
 }
 
+.scrolllink span{
+  color: var(--background) !important;
+}
+
 .small-row{
   --bs-gutter-x: 1.5rem;
   --bs-gutter-y: 0;

src/components/ScrollLink.tsx

@@ -36,8 +36,8 @@ export const ScrollLink: React.FC<ScrollLinkProps> = ({ targetId, label }) => {
     };
 
     return (
-        <a href={`#${targetId}`} onClick={handleClick}>
-            {label}
+        <a className="scrolllink" href={`#${targetId}`} onClick={handleClick}>
+            <span>{label}</span>
         </a>
     );
 };

src/utils/Highlight-functions.ts

 export function NewHighlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitle: HTMLElement | null}){
-    let TopDistance = 150; 
+    let TopDistance = 170; 
    /*  console.log("Starting highlight check...")
     console.log("here come el...")
     console.log(el)
@@ -10,12 +10,12 @@ export function NewHighlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitl
         //console.log(el)
         // console.log(el.getBoundingClientRect()) 
         if (el.getBoundingClientRect().top < TopDistance + 1 && el.getBoundingClientRect().bottom > TopDistance){
-            subtitle.style.color = "#F57D22";
+            subtitle.style.color = "white";
             subtitle.style.backgroundColor = "rgb(133, 15, 120, 0.8)";
             subtitle.style.borderColor = "#850F78"; 
             subtitle.style.marginLeft = "5px"; 
             subtitle.style.paddingRight = "5px";
-            subtitle.style.fontWeight = "900";
+            subtitle.style.fontWeight = "700";
 
 /*                 console.log("subtitle: ",subtitle)
             console.log("style: ", subtitle.style)
@@ -74,12 +74,13 @@ export function NewHighlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitl
  */
 
   export function Highlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitle: HTMLElement | null}){
-    let TopDistance = 150; 
+    let TopDistance = 170; 
     if (el != null && subtitle != null){
         //console.log("Highlighting Element: ", el, "Subtitle: ", subtitle);
         //console.log(`Element position: top=${el.getBoundingClientRect().top}, bottom=${el.getBoundingClientRect().bottom}`);
         if (el.getBoundingClientRect().top < TopDistance + 1 && el.getBoundingClientRect().bottom > TopDistance){
             (subtitle.childNodes[0] as HTMLElement).classList.add("active-sideitem");
+            subtitle.style.fontWeight = "900";
             if(subtitle.childNodes[0].childNodes[1] != undefined){ 
                 (subtitle.childNodes[0].childNodes[1] as HTMLElement).style.display = "block";
                // console.log(`subtitle.childNodes[0].textContent ${subtitle.childNodes[0].textContent}`)
@@ -87,6 +88,7 @@ export function NewHighlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitl
             }
         } else {
             (subtitle.childNodes[0] as HTMLElement).classList.remove("active-sideitem");
+            subtitle.style.fontWeight = "normal";
             if(subtitle.childNodes[0] != undefined){
                  (subtitle.childNodes[0] as HTMLElement).classList.remove("active-sideitem");
                  if(subtitle.childNodes[0].childNodes[1] != undefined){