Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

link not active for the current route #499

Open
nivethan-me opened this issue Dec 14, 2024 · 3 comments
Open

link not active for the current route #499

nivethan-me opened this issue Dec 14, 2024 · 3 comments

Comments

@nivethan-me
Copy link

nivethan-me commented Dec 14, 2024

following is my current App routing

export default function App() {
  return (
    <Router>
      <Route path='/dashboard' component={Dashboard} />

      <Route path='/email-templates' nest>
        <Route path='/' component={EmailTemplates} />
        <Route path=':id' component={ManageEmail} />
      </Route>

      <Route path='/user-management' nest>
        <Route path='/manage' component={ManageUser} />
        <Route path='/register' component={RegisterUser} />
        <Route path='/edit/:id' component={EditUser} />

        <Route path='/roles' nest>
          <Route path='/' component={UserRoles} />
          <Route path='/edit' component={EditUserRoles} />
        </Route>

        <Route path='/permission' component={UserPermission} />
      </Route>
      
      <Route path='/audit-log' component={AuditLog} />
    </Router>
  );
}

Logic to get active state

export default function MultiLink(props: Props) {
  const { name, Icon, isSidebarOpen, href, subLinks } = props;

  const [isActive] = useRoute(href);
  console.log(parentHref, isActive);
  }

following is what i see on my console. isActive is not becoming true on nested routes. but working fine on other pages.

/dashboard true
/audit-log true

/email-templates false
/user-management false
@molefrog
Copy link
Owner

isActive is not becoming true on nested routes

It depends on where in your component tree this function is called. Is this a link that is inside <Route path='/email-templates' nest>? If so, then the href should be /

@nivethan-me
Copy link
Author

nivethan-me commented Dec 19, 2024

isActive is not becoming true on nested routes

It depends on where in your component tree this function is called. Is this a link that is inside <Route path='/email-templates' nest>? If so, then the href should be /

@molefrog thank you for the reply, i'm not sure i understand you fully, let me give you some more info

so basically i'm trying to highlight the active page on sidebar. i created a sidebar layout and wrap all page components using that like following. (let me know if i can improve this approach something like <Outlet /> in RR)

export default function EmailTemplates(props: Props) {
 const {} = props;
 return (
   <PrivateLayout>
     <div>
       <h1>Email Template</h1>
     </div>
   </PrivateLayout>
 );
}

This has the sidebar component

export default function PrivateLayout(props: Props) {
 const { children } = props;
 const [isSidebarOpen, setIsSidebarOpen] = useState(true);

 const toggleSidebar = () => {
   setIsSidebarOpen(!isSidebarOpen);
 };

 return (
   <div className=''>
     <NavigationBar isSidebarOpen={isSidebarOpen}  toggleSidebar={toggleSidebar} />

     <div className='flex mt-12'>
       <SideBar isSidebarOpen={isSidebarOpen} />
       <div className='w-full bg-violet-50/50'>{children}</div>
     </div>
   </div>
 );
}

<SideBar/> is basically a list of Links rendered by <SingleLink/> components

export default function SideBar(props: Props) {
 const { isSidebarOpen } = props;
 return (
   <aside
     className={`
       ${
         isSidebarOpen ? 'w-64' : 'w-16'
       } px-4 pt-4 overflow-hidden min-h-[calc(100vh_-_48px)] bg-white transition-all duration-500`}
   >
     <nav>
       <ul
         className={`flex flex-col gap-y-4 items-start ${
           isSidebarOpen ? '' : 'ite'
         }`}
       >
         <SingleLink
           name='Dashboard'
           href='/dashboard'
           Icon={RiDashboard3Line}
           isSidebarOpen={isSidebarOpen}
         />

         <SingleLink
           name='EmailTemplates'
           href='/email-templates'
           Icon={LuMail}
           isSidebarOpen={isSidebarOpen}
         />

         <MultiLink
           name='User Mangement'
           parentHref='/user-management'
           Icon={LuUsers}
           isSidebarOpen={isSidebarOpen}
           subLinks={[
             { name: 'Manage Users', href: '/manage' },
             { name: 'User roles', href: '/roles' },
             { name: 'User Permission', href: '/permission' },
           ]}
         />

         <SingleLink
           name='Audit Log'
           href='/audit-log'
           Icon={LuFileSearch2}
           isSidebarOpen={isSidebarOpen}
         />
       </ul>
     </nav>
   </aside>
 );
}

as you can see i'm passing /email-templates to SingleLink component but its not getting active when i go to that route. if i change the userRoute(href) into useRoute("/") like you said its highlighting multiple links like /dashboard , /email-template and /audit-log. what i'm doing wrong here?

thank you so much for your time


export default function SingleLink(props: Props) {
 const { name, href, Icon, isSidebarOpen } = props;
 // const params = useParams();
 const [isActive] = useRoute(href);
 console.log(href, isActive);

 return (
   <Link
     href={`~${href}`}
     className={`${
       isActive ? 'text-violet-400' : 'text-slate-600'
     } block py-1 text-sm text-slate-600 hover:text-violet-400`}
   >
     <li
       className={`flex w-full
          ${isSidebarOpen ? 'gap-x-2' : ''}
          `}
     >
       <Icon className='text-2xl' />
       <span
         className={` overflow-hidden transition-all text-nowrap ${
           isSidebarOpen ? '' : 'w-0'
         }`}
       >
         {name}
       </span>
     </li>
   </Link>
 );
}

@nivethan-me
Copy link
Author

@molefrog
can you have a look on my previous comment when you have time please. and if there is any example for a sidebar with Wouter v3 would be really helpful

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants