SideBar Component
The side bar is used to travel through the 3 main routes: /
, /stock
, /favorites
. All three have their own icon. The selectedIndex
is determined based off the route the user is currently on. The selected index is then styled appropriately to have a green circle around it. The bar is rendered with <aside/>
and fixed as well so it scrolls with the screen too. When one of the buttons is clicked the browser navigates to the associated route. Lastly the button clicking is also animated using framer-motion
’s spring animation.