-
-
Notifications
You must be signed in to change notification settings - Fork 355
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
[DashboardLayout] Support route patterns in navigation #3991
[DashboardLayout] Support route patterns in navigation #3991
Conversation
In a further PR, will add further refactoring to keep track of one only selected list item and share that logic between Also create a separate issue for these improvements. |
|
||
- Standard paths: `/foo` | ||
- Named parameters: `/:foo/:bar` | ||
- Unnamed parameters: `/:foo/(.*)` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think named vs unnamed is relevant to us. I'd just say "Parameters" on the line above. I'd also use something slightly more real-life as an example, like "orders"
- Constant path: `/orders`
- Dynamic segment: `/orders/:segment`
- Zero or more segments: `/orders{/:segment}*`
- One or more segments: `/orders{/:segment}+`
- Optional segment: `/orders{/:segment}+?`
docs/data/toolpad/core/components/dashboard-layout/dashboard-layout.md
Outdated
Show resolved
Hide resolved
- Standard paths: `/foo` | ||
- Named parameters: `/:foo/:bar` | ||
- Unnamed parameters: `/:foo/(.*)` | ||
- Optional parameters: `/:foo{/:bar}?` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We could maybe add demo. a "product" page that has links to show the "next product" and the current path. e.g.
current path: /products/20
title: Item 20
[next product](/products/21)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Added a few suggestions. Would also add more tests. e.g. cases for when a /orders/new
is shadowed by a /orders/:id
, or /orders/:id
shadowed by /orders/*
. etc... All kinds of permutations you can think of that users could build. But these can go in follow-up
…ayout.md Co-authored-by: Jan Potoms <[email protected]> Signed-off-by: Pedro Ferreira <[email protected]>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good 👍
Closes #3974 (partially, must create new partial issue for
PageContainer
component and follow #3991 (comment) + #3991 (review)Adds an optional
pattern
property to navigation page items so that these can be marked as selected according to that pattern (using path-to-regexp), instead of the default behavior that uses theirsegment
property.https://deploy-preview-3991--mui-toolpad-docs.netlify.app/toolpad/core/react-dashboard-layout/#navigation-pattern-matching
Also simplifies the logic for the console warning in
DashboardLayout
for duplicate navigation items.No changes to
PageContainer
or any more complex behavior for now, those will be done separately, as well as refactored logic for the selected item.