Responsiveness and tabs #179

Merged
enes merged 23 commits from 177-sticky-side-columns into staging 2024-09-05 07:30:55 +00:00
2 changed files with 19 additions and 2 deletions
Showing only changes of commit 6f7d4c9dcf - Show all commits

View File

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

View File

@ -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}>