From 6072f8bc557ff06cf2efebfd31689888bd31580b Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Thu, 7 Mar 2024 13:15:02 +0200
Subject: [PATCH] feat(left sidebar): implement navigation

---
 src/components/General/LeftSidebar/LeftSidebar.tsx        | 1 +
 .../General/LeftSidebar/LeftSidebarIconButton.tsx         | 8 +++++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/General/LeftSidebar/LeftSidebar.tsx b/src/components/General/LeftSidebar/LeftSidebar.tsx
index 22aca326..bbc3131b 100644
--- a/src/components/General/LeftSidebar/LeftSidebar.tsx
+++ b/src/components/General/LeftSidebar/LeftSidebar.tsx
@@ -58,6 +58,7 @@ const LeftSidebar = () => {
           isSelected={button.isSelected}
           isDisabled={button.isDisabled}
           id={button.id}
+          path={button.path}
         />
       ))}
     </YStack>
diff --git a/src/components/General/LeftSidebar/LeftSidebarIconButton.tsx b/src/components/General/LeftSidebar/LeftSidebarIconButton.tsx
index 3397f616..6e12c397 100644
--- a/src/components/General/LeftSidebar/LeftSidebarIconButton.tsx
+++ b/src/components/General/LeftSidebar/LeftSidebarIconButton.tsx
@@ -1,6 +1,7 @@
 import { IconButton } from '@status-im/components'
 import { useDispatch } from 'react-redux'
 import { Stack } from 'tamagui'
+import { useNavigate } from 'react-router'
 
 import { toggleButtonSelection } from '../../../redux/LeftSidebar/slice'
 
@@ -10,6 +11,7 @@ type IconButtonWithDotProps = {
   isSelected: boolean
   isDisabled?: boolean
   id: string
+  path: string
 }
 
 const LeftSidebarIconButton = ({
@@ -18,11 +20,15 @@ const LeftSidebarIconButton = ({
   isSelected,
   isDisabled,
   id,
+  path,
 }: IconButtonWithDotProps) => {
   const dispatch = useDispatch()
+  const navigate = useNavigate()
 
-  const onClickHandler = () =>
+  const onClickHandler = () => {
     isDisabled ? null : dispatch(toggleButtonSelection(id))
+    navigate(path)
+  }
 
   return (
     <Stack style={{ position: 'relative', display: 'inline-block' }}>