Multiple Tabs Marked as Active in Navigation Bar When Switching Between Tabs

[JavidSumra]

Bug Description:
When navigating between tabs in the navigation bar, multiple tabs are displayed as active simultaneously, instead of only highlighting the currently selected tab.

Steps to Reproduce:

1. Navigate to the Facility Page.
2. Click on Users and then switch to Schedule.
3. Observe the issue where multiple tabs are marked as active.

Expected Behavior:
Only the currently active tab should be highlighted in the navigation bar.

Similar issues is occurring in the organisation page

Screenshots:

Desktop (please complete the following information):

• OS: Ubuntu
• Browser Firefox
• Version 133.0.3 (64-bit)

[saikiranpatil]

if this issue is available, i would like to work on this

[bodhish]

@saikiranpatil do you sugget how you are planning to fix the issue.

[JavidSumra]

@saikiranpatil do you sugget how you are planning to fix the issue.

@bodhish I'm working on it 😀
cc @saikiranpatil

[piyushyadav0191]

This issue is not assigned to anyone yet! Can you assign it to me @bodhish

[bodhish]

I will not assign unless you explain how you are planing to solve it.

[manmeetnagii]

I will not assign unless you explain how you are planing to solve it.

@bodhish the issue is related to activeClass and exactActiveClass attributes of ActiveLink component of raviger's package present in src/components/ui/sidebar/nav-main.tsx.

  <ActiveLink 
      href={link.url}
      activeClass="bg-white text-green-700 shadow"
      exactActiveClass="bg-white text-green-700 shadow"
  >
          {link.icon && <CareIcon icon={link.icon as IconName} />}
          <span className="group-data-[collapsible=icon]:hidden">
             {link.name}
          </span>
  </ActiveLink>

The uses of both attributes are as follow -

1. ActiveClass: If the link.url matches the start of the route path this will be applied.
2. exactActiveClass: If the link.url matches the route path exactly this will be applied.

Combining both will create a conflict between the matching of the routes, which is causing this issue. Also, the route of the resource page begins with '/resource' and the route of other pages begins with '/facility'. If a link.url matches both the start and the exact current path, both activeClass and exactActiveClass are applied.

Proposed Solution

We can change the path of resource page as '/facility/resource' or active the activeClass attribute only for '/resource' route. Below is the fixed version. Let me know if I can raise a PR for this if not done by anyone 😊

Screen.Recording.2025-01-03.055308.mp4

[JavidSumra]

I will not assign unless you explain how you are planing to solve it.

@bodhish already found the root cause and working on it I'm solving it using useActiveLink hook as @manmeetnagii said it's related to activeClass and exactActiveClass.

[bodhish]

@JavidSumra the fix doesn't work.

Also @manmeetnagii the solution you suggested will not work.

[rajku-dev]

@bodhish Sir, I have implemented a solution

• stores link.name in nav-main component state which only changes when user clicks on some other navlink
• active class is given to the navlink which is stored in state