src/layouts/StickySideColumns.module.scss

@@ -82,3 +82,8 @@
     flex-grow: 1;
   }
 }
+
+.active {
+  background-color: $primary-main !important;
+  color: white !important;
+}

src/layouts/StickySideColumns.tsx

@@ -1,4 +1,10 @@
-import { PropsWithChildren, ReactNode, useRef, useState } from 'react'
+import {
+  PropsWithChildren,
+  ReactNode,
+  useEffect,
+  useRef,
+  useState
+} from 'react'
 
 import styles from './StickySideColumns.module.scss'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
@@ -14,13 +20,15 @@ interface StickySideColumnsProps {
   right?: ReactNode
 }
 
+const DEFAULT_TAB = 'nav-content'
+
 export const StickySideColumns = ({
   left,
   right,
   children
 }: PropsWithChildren<StickySideColumnsProps>) => {
   const ref = useRef<HTMLDivElement>(null)
-  const [tab, setTab] = useState('nav-content')
+  const [tab, setTab] = useState(DEFAULT_TAB)
   const handleNavClick = (id: string) => {
     setTab(id)
     const x = document.getElementById(id)?.offsetLeft
@@ -33,6 +41,10 @@ export const StickySideColumns = ({
   }
   const isActive = (id: string) => id === tab
 
+  useEffect(() => {
+    handleNavClick(DEFAULT_TAB)
+  }, [])
+
   return (
     <>
       <div className={styles.container} ref={ref}>