How to track active link in next.js? - reactjs

Question

I have a sidebar component in my admin panel which has multiple links. Some of these links are in the dropdown menu. Now I want to add an active class based on an active link or if the active link is in the dropdown menu then to the dropdown toggle. Below is my code for a sidebar. Btw I am using antd framework for ui.
<Sider
width={260}
className={styles.sider}
collapsible
trigger={null}
collapsed={drawer}
breakpoint={"md"}
collapsedWidth={0}
>
<Menu mode="inline">
<Menu.Item
icon={<IoGrid />}
key="1"
onClick={(e) => {
toggleKey(e);
gotoPage("/");
}}
className={selectedKey == 1 ? styles.active_item : ""}
>
Dashboard
</Menu.Item>
<SubMenu
title="Settings"
key="2"
icon={<IoSettingsOutline />}
className={selectedKey == 2 ? styles.active_item : ""}
>
<Menu.Item
icon={<IoPersonAddOutline />}
key="2.1"
onClick={(e) => {
toggleKey(e);
gotoPage("/settings/profile");
}}
>
Profile
</Menu.Item>
</SubMenu>
</Menu>
</Sider>
Btw the selectedKey and toggleKey function comes from top level component and gotoPage is just router.push functionality.
Thanks.

Answer 1

As per this answer you should use useRouter hook to get current path.
For your use case instead of equality check you should probably use startsWith or maybe some other check. So it would look like this
Let's say you have
Settings -> /settings
Profile -> /settings/profile
Notifications /settings/notifications
You check if current path starts /settings and you assume that Settings group is active and you simply expand Settings submenu and add active class to Settings group.
If you are currently on /settings/notification this would mean that you can identify following:
active group
active dropdown
active sublink
I think it is better to have custom LinkGroup component that would check for its 'activeness' and would add specific styling and show/hide its submenu.