borisdiakur
commented
1 year ago Hi @zemirco 👋 Thank you for this issue 🙏
How do I highlight the current route in the main navigation?
One of our sandbox apps covers this exact use case of the ld-sidenav component: The nav items are highlighted based on the current route. Although the sandbox app is using Solid.js, usage with React and react-router should be pretty similar. Here are the relevant places in the code:
- https://stackblitz.com/github/emdgroup-liquid/liquid-sandbox-solid-tailwind?file=src%2FApp.tsx%3AL26 (this is where we pass the current path to the Sidenav component)
- https://stackblitz.com/github/emdgroup-liquid/liquid-sandbox-solid-tailwind?file=src%2Fcomponents%2FSidenav%2FSidenav.tsx%3AL106-L106 (this is where we set the selected prop on a nav item)
I fully understand that looking at a Solid based example signifies an additional context switch for a React developer and with regard to #459 we may need additional documentation and maybe a port of the Solid based sandbox app.
How would I dynamically build the breadcrumb so that it shows something like
This is also related to #459 I think. It looks like we need some React specific examples in our docs. But in general, to answer your question, something like this should work:
<LdBreadcrumbs>
{crumbs.map(crumb => (
<LdCrumb href={crumb.path}>{crumb.title}</LdCrumb>
))}
</LdBreadcrumbs>I'll keep this issue open for now, though we may close it in favor of #459 in the future.
zemirco
toastedtoast
React Router is more or less the default router in the React ecosystem. When building applications a developer usually faces two challenges:
Since those two questions regularly come up it would be nice a have them solved centrally, maybe as part of the documentation. I've seen that the
ld-sidenavcomponent even features multiple levels. In your docs you haveI would image that the corresponding URLs would look very similar, e.g.
When I go directly to the URL
/foundations/discrete-mathematicsI would expect the navigation item "Discrete Mathematics" to be highlighted. The second level of the navigation is visible and I should see the back button to go to the first level.How would I do that? That would be great to have in the documentation.
A similar feature request is more directed at the
ld-breadcrumbscomponent. Let's say I have an application that is similar to GitHub, i.e. organizations, users, repos, {settings, security, insights, etc.}. The URL would be something like thisHow would I dynamically build the breadcrumb so that it shows something like
Thank you very much! You're doing great.