fix(mobile): active tab default state and styling
This commit is contained in:
parent
d9be05165f
commit
6f7d4c9dcf
@ -82,3 +82,8 @@
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: $primary-main !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
@ -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}>
|
||||
|
Loading…
Reference in New Issue
Block a user