It is so easy to achieve the nested layout shown in the attached image. But I am trying to write a logic that will tell me all the ["parent", "child", "grand child"] links that are active at the moment. I have referred/read all the necessary docs, links, tweets regarding the nested layouts but I could not find a answer for my question.
Problem is - I have tried router asPath, pathname. But if I'm on the "grand child" (e.g. Invitations) then active logic for parent and child are not working. Either it is removing the tailwind active classes on parent, child or it is adding active classes for all the sibling links because router.asPath === href or router.asPath.includes(href) is not sufficient I believe.
Links that I have referred:
Adam's persistent layout - https://adamwathan.me/2019/10/17/persistent-layout-patterns-in-nextjs/
Lee's tweet - https://twitter.com/leeerob/status/1570032909460951045?s=20&t=_PGiQMCsZktT18DH66LDGg
Next.js examples - ActiveLink component.
Even I have tried to write a complex logic which is splitting the pathname e.g ["", "domain", "settings", "members", "invitation"] and then based the array index and layout number somehow I wanted to find the all the current active links but half way round I realised that this is giving me again the same problem as described - either all or nothing active.
Does anybody know how to achieve this logic? Any Github code link or blog link is really helpful.
Thank you.