feat(left sidebar): implement navigation
This commit is contained in:
parent
17d5983490
commit
6072f8bc55
|
@ -58,6 +58,7 @@ const LeftSidebar = () => {
|
||||||
isSelected={button.isSelected}
|
isSelected={button.isSelected}
|
||||||
isDisabled={button.isDisabled}
|
isDisabled={button.isDisabled}
|
||||||
id={button.id}
|
id={button.id}
|
||||||
|
path={button.path}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</YStack>
|
</YStack>
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import { IconButton } from '@status-im/components'
|
import { IconButton } from '@status-im/components'
|
||||||
import { useDispatch } from 'react-redux'
|
import { useDispatch } from 'react-redux'
|
||||||
import { Stack } from 'tamagui'
|
import { Stack } from 'tamagui'
|
||||||
|
import { useNavigate } from 'react-router'
|
||||||
|
|
||||||
import { toggleButtonSelection } from '../../../redux/LeftSidebar/slice'
|
import { toggleButtonSelection } from '../../../redux/LeftSidebar/slice'
|
||||||
|
|
||||||
|
@ -10,6 +11,7 @@ type IconButtonWithDotProps = {
|
||||||
isSelected: boolean
|
isSelected: boolean
|
||||||
isDisabled?: boolean
|
isDisabled?: boolean
|
||||||
id: string
|
id: string
|
||||||
|
path: string
|
||||||
}
|
}
|
||||||
|
|
||||||
const LeftSidebarIconButton = ({
|
const LeftSidebarIconButton = ({
|
||||||
|
@ -18,11 +20,15 @@ const LeftSidebarIconButton = ({
|
||||||
isSelected,
|
isSelected,
|
||||||
isDisabled,
|
isDisabled,
|
||||||
id,
|
id,
|
||||||
|
path,
|
||||||
}: IconButtonWithDotProps) => {
|
}: IconButtonWithDotProps) => {
|
||||||
const dispatch = useDispatch()
|
const dispatch = useDispatch()
|
||||||
|
const navigate = useNavigate()
|
||||||
|
|
||||||
const onClickHandler = () =>
|
const onClickHandler = () => {
|
||||||
isDisabled ? null : dispatch(toggleButtonSelection(id))
|
isDisabled ? null : dispatch(toggleButtonSelection(id))
|
||||||
|
navigate(path)
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Stack style={{ position: 'relative', display: 'inline-block' }}>
|
<Stack style={{ position: 'relative', display: 'inline-block' }}>
|
||||||
|
|
Loading…
Reference in New Issue