MainMenuItem issue

[bxlkm]

please help me！！！ How to do the navigation menu ？ MainMenuItem is none。 // // <MainMenuItem // icon={} //> // Stake // // <MainMenuItem // active // icon={} // > // Wrap // // <MainMenuItem // icon={} // > // Wallet // //

[DiRaiks]

@bxlkm Hello! You can wrap MainMenuItem by MainMenu And use React router to check the current path with useRouter hook in next.js (or useLocation in React.js). You can find a simple example here - https://github.com/lidofinance/ui/blob/main/packages/main-menu/MainMenu.stories.tsx Docs for next useRouter - https://nextjs.org/docs/api-reference/next/router Docs for react useLocation - https://v5.reactrouter.com/web/api/Hooks/uselocation

This should be enough. If you have any questions - please let me know =)

const Component = () => {
  const router = useRouter();

  return (
    <MainMenu>
        <MainMenuItem active={router.pathname === '/stake'} icon={<Stake />}>
          Stake
        </MainMenuItem>
        <MainMenuItem active={router.pathname === '/wrap'} icon={<Wrap />}>
          Wrap
        </MainMenuItem>
        <MainMenuItem active={router.pathname === '/wallet'} icon={<Wallet />}>
          Wallet
        </MainMenuItem>
    </MainMenu>
  )
}