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>
  )
}