fix(mobile): active tab default state and styling
This commit is contained in:
parent
d9be05165f
commit
6f7d4c9dcf
@ -82,3 +82,8 @@
|
|||||||
flex-grow: 1;
|
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 styles from './StickySideColumns.module.scss'
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||||
@ -14,13 +20,15 @@ interface StickySideColumnsProps {
|
|||||||
right?: ReactNode
|
right?: ReactNode
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const DEFAULT_TAB = 'nav-content'
|
||||||
|
|
||||||
export const StickySideColumns = ({
|
export const StickySideColumns = ({
|
||||||
left,
|
left,
|
||||||
right,
|
right,
|
||||||
children
|
children
|
||||||
}: PropsWithChildren<StickySideColumnsProps>) => {
|
}: PropsWithChildren<StickySideColumnsProps>) => {
|
||||||
const ref = useRef<HTMLDivElement>(null)
|
const ref = useRef<HTMLDivElement>(null)
|
||||||
const [tab, setTab] = useState('nav-content')
|
const [tab, setTab] = useState(DEFAULT_TAB)
|
||||||
const handleNavClick = (id: string) => {
|
const handleNavClick = (id: string) => {
|
||||||
setTab(id)
|
setTab(id)
|
||||||
const x = document.getElementById(id)?.offsetLeft
|
const x = document.getElementById(id)?.offsetLeft
|
||||||
@ -33,6 +41,10 @@ export const StickySideColumns = ({
|
|||||||
}
|
}
|
||||||
const isActive = (id: string) => id === tab
|
const isActive = (id: string) => id === tab
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
handleNavClick(DEFAULT_TAB)
|
||||||
|
}, [])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className={styles.container} ref={ref}>
|
<div className={styles.container} ref={ref}>
|
||||||
|
Loading…
Reference in New Issue
Block a user