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.

Sign up for GitHub

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

docs: document nested UI routes #10104

Merged
merged 2 commits into from
Nov 15, 2024
Merged

docs: document nested UI routes #10104

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a6e7d65
docs: document nested UI routes
shahednasser Nov 14, 2024
4575e12
address PR feedback
shahednasser Nov 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions www/apps/book/app/learn/advanced-development/admin/ui-routes/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,41 @@ The configuration object is created using the `defineRouteConfig` function impor

The above example adds a new sidebar item with the label `Custom Route` and an icon from the [Medusa UI Icons package](!ui!/icons/overview).

### Nested UI Routes

Consider that along the UI route above at `src/admin/routes/custom/page.tsx` you create a nested UI route at `src/admin/routes/custom/nested/page.tsx` that also exports route configurations:

```tsx title="src/admin/routes/custom/nested/page.tsx"
import { defineRouteConfig } from "@medusajs/admin-sdk"
import { Container, Heading } from "@medusajs/ui"

const NestedCustomPage = () => {
return (
<Container className="divide-y p-0">
<div className="flex items-center justify-between px-6 py-4">
<Heading level="h2">This is my nested custom route</Heading>
</div>
</Container>
)
}

export const config = defineRouteConfig({
label: "Nested Route",
})

export default NestedCustomPage
```

This UI route is shown in the sidebar as an item nested in the parent "Custom Route" item. Nested items are only shown when the parent sidebar items (in this case, "Custom Route") are clicked.

#### Caveats

Some caveats for nested UI routes in the sidebar:

- Nested dynamic UI routes, such as one created at `src/admin/routes/custom/[id]/page.tsx` aren't added to the sidebar as it's not possible to link to a dynamic route. If the dynamic route exports route configurations, a warning is logged in the browser's console.
- Nested routes in setting pages aren't shown in the sidebar to follow the admin's design conventions.
shahednasser marked this conversation as resolved.
Show resolved Hide resolved
- The `icon` configuration is ignored for the sidebar item of nested UI route to follow the admin's design conventions.

---

## Create Settings Page
Expand Down
2 changes: 1 addition & 1 deletion www/apps/book/generated/edit-dates.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export const generatedEditDates = {
"app/learn/advanced-development/api-routes/http-methods/page.mdx": "2024-09-11T10:43:33.169Z",
"app/learn/advanced-development/admin/tips/page.mdx": "2024-10-07T12:50:36.335Z",
"app/learn/advanced-development/api-routes/cors/page.mdx": "2024-09-30T08:43:53.121Z",
"app/learn/advanced-development/admin/ui-routes/page.mdx": "2024-10-07T12:52:37.509Z",
"app/learn/advanced-development/admin/ui-routes/page.mdx": "2024-11-14T15:29:22.901Z",
"app/learn/advanced-development/api-routes/middlewares/page.mdx": "2024-09-11T10:45:31.861Z",
"app/learn/advanced-development/modules/isolation/page.mdx": "2024-07-04T17:26:03+03:00",
"app/learn/advanced-development/data-models/configure-properties/page.mdx": "2024-09-30T08:43:53.122Z",
Expand Down
Loading