import { NavLink, useLocation } from 'react-router-dom' //own hook const useIsFocused = () => { const location = useLocation(); return location.pathname } const Navbar = () => { const isFocused = useIsFocused(); return ( <div className='h-screen flex flex-col bg-[#1C465E]'> <div className='bg-PeppsLogo h-20 w-20 bg-no-repeat place-self-center bg-center'></div> <ul className='flex flex-col flex-start h-72 w-20 text-white content-between justify-around'> <li > <NavLink to='/dashboard' style={({ isActive }) => (isActive ? { opacity: 1 } : { opacity: 0.5 })}> <div className='flex'> <div > {isFocused === '/dashboard' ? <svg width="6" height="46" viewBox="0 0 6 46" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect width="6" height="46" fill="white" /> </svg> : <svg className='invisible' width="6" height="46" viewBox="0 0 6 46" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect width="6" height="46" fill="white" /> </svg> } </div> </NavLink> </li> </ul> </div> ) }