From 6f7d4c9dcfb696264f67db11a3a83a3c52ac0103 Mon Sep 17 00:00:00 2001
From: enes <mulahasanovic@outlook.com>
Date: Fri, 30 Aug 2024 10:57:51 +0200
Subject: [PATCH] fix(mobile): active tab default state and styling

---
 src/layouts/StickySideColumns.module.scss |  5 +++++
 src/layouts/StickySideColumns.tsx         | 16 ++++++++++++++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/layouts/StickySideColumns.module.scss b/src/layouts/StickySideColumns.module.scss
index 6a16522..212e281 100644
--- a/src/layouts/StickySideColumns.module.scss
+++ b/src/layouts/StickySideColumns.module.scss
@@ -82,3 +82,8 @@
     flex-grow: 1;
   }
 }
+
+.active {
+  background-color: $primary-main !important;
+  color: white !important;
+}
diff --git a/src/layouts/StickySideColumns.tsx b/src/layouts/StickySideColumns.tsx
index 493a97e..43561de 100644
--- a/src/layouts/StickySideColumns.tsx
+++ b/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}>