Add app navigation sidebar #1819

apedroferreira · 2023-03-27T19:44:15Z

Closes #813
Closes #1547

Show navigation sidebar with all pages when viewing a preview or production Toolpad app
Ability to hide navigation bar with ?toolpad-display=standalone
Remove app overview page and use first page as default page (it should be easy to set any default page later, so we can do it in a separate issue)
Remove preview button in right-side panel, as the "Preview" button in the top bar now opens the preview starting in the currently open page

Development:

Screen.Recording.2023-03-28.at.18.44.31.mov

Production

Screen.Recording.2023-03-27.at.20.43.07.mov

apedroferreira · 2023-03-27T19:50:11Z

packages/toolpad-app/src/toolpad/ToolpadShell/Header/index.tsx

+          </Box>
+        </Toolbar>
+      </AppBar>
+      <Toolbar />


This <Toolbar /> element adds spacing because the AppBar position was changed to fixed so that it's not constrained by the new sidebar.
As per recommended in MUI Drawer docs https://mui.com/material-ui/react-drawer/ ("Clipped under the app bar")

apedroferreira · 2023-03-27T19:51:36Z

packages/toolpad-app/src/runtime/ToolpadApp.tsx

+  version: VersionOrPreview;
+}
+
+function ToolpadAppLayout({ dom, version, hasShell: hasShellProp = true }: ToolpadAppLayoutProps) {


Moved these to their own component so that we can use React Router hooks.

prakhargupta1 · 2023-03-27T21:46:04Z

Nice! Is it that both preview options (1. right panel and 2. top bar) show the same result i.e, the preview for the entire app?
If Yes, then I think we can remove the one in the right bar.

If we want to make toolpad-display=standalone more discoverable, we can also put page preview available from the ellipsis menu of the page.

apedroferreira · 2023-03-28T15:49:13Z

Nice! Is it that both preview options (1. right panel and 2. top bar) show the same result i.e, the preview for the entire app?
If Yes, then I think we can remove the one in the right bar.

The option at the top opens the app in preview but starting in the default page, while the right-side option opens the app starting in that specific page. So I think it's fine to keep these separate options?

If we want to make toolpad-display=standalone more discoverable, we can also put page preview available from the ellipsis menu of the page.

I can add a "Preview" option from the ellipsis menu of each page, but I feel like it should open without toolpad-display=standalone so that the user can navigate from there if they want to? So it would be exactly the same as the option in the right-side panel.

Janpot · 2023-03-28T15:53:40Z

The option at the top opens the app in preview but starting in the default page, while the right-side option opens the app starting in that specific page. So I think it's fine to keep these separate options?

Intuitively what makes most sense to me is for the top button to open the current page and to remove the button on the right.

If we want to make toolpad-display=standalone more discoverable, we can also put page preview available from the ellipsis menu of the page.

As a start I would propose to just document this option in the docs and nothing more

apedroferreira · 2023-03-28T15:56:22Z

Intuitively what makes most sense to me is for the top button to open the current page and to remove the button on the right.

Agreed, didn't consider that but seems more intuitive, I'll do that instead.

… development version

Janpot · 2023-03-29T10:06:30Z

Would it make sense for the "edit" button on the Toolpad application to do the reverse operation? i.e. open the page editor of the page you were viewing.

prakhargupta1 · 2023-03-29T10:19:35Z

Would it make sense for the "edit" button on the Toolpad application to do the reverse operation? i.e. open the page editor of the page you were viewing.

Yes, I think that would make sense. Currently, it shows the first page in edit mode.

Janpot · 2023-03-29T14:08:59Z

packages/toolpad-app/src/runtime/AppNavigation.tsx

+        <List
+          component="nav"
+          subheader={
+            <ListSubheader id={NAV_LIST_SUBHEADER_ID} sx={{ px: 4 }}>


Perhaps you can leverage React.useId() here?

Janpot · 2023-03-30T08:14:06Z

I was thinking, this will break all embeds that are currently in notion already.

Our options:

Do nothing in Toolpad. Update all embeds in notion
Automatically set toolpad-display=standalone when an iframe is detected. use ?toolpad-display=shell to enable the navigation
Provide a page-level setting that sets the default for toolpad-display
Provide an app-level setting that sets the default for toolpad-display

Personally my preference goes out to 3. Would it be hard to implement? I'm fine dealing with this in a separate PR, but we need to prioritize it then so that it makes it in the same release as this one.

apedroferreira · 2023-03-30T14:45:18Z

I was thinking, this will break all embeds that are currently in notion already.
Our options:

I was thinking option 1 for now but 2 or 3 also seem fine.
Let's do 3 then, I'll try to include it in this PR as I think it shouldn't be that difficult.

bharatkashyap · 2023-03-30T22:40:21Z

I was thinking, this will break all embeds that are currently in notion already.

Our options:

Do nothing in Toolpad. Update all embeds in notion

Automatically set toolpad-display=standalone when an iframe is detected. use ?toolpad-display=shell to enable the navigation

Provide a page-level setting that sets the default for toolpad-display

Provide an app-level setting that sets the default for toolpad-display

Personally my preference goes out to 3. Would it be hard to implement? I'm fine dealing with this in a separate PR, but we need to prioritize it then so that it makes it in the same release as this one.

For me, an app-level setting is useful for this since it affects all pages. I was also wondering whether this is a good way to introduce "layouts" to the app: You can start with layout option 1 (a sidebar for navigation), or 2 (full page content, and a separate page for navigation) and then in the future, potentially, option 3 (tabs for navigation?), option 4 ...

apedroferreira · 2023-03-30T22:44:30Z

I was thinking, this will break all embeds that are currently in notion already.
Our options:

Do nothing in Toolpad. Update all embeds in notion

Automatically set toolpad-display=standalone when an iframe is detected. use ?toolpad-display=shell to enable the navigation

Provide a page-level setting that sets the default for toolpad-display

Provide an app-level setting that sets the default for toolpad-display

Personally my preference goes out to 3. Would it be hard to implement? I'm fine dealing with this in a separate PR, but we need to prioritize it then so that it makes it in the same release as this one.

For me, an app-level setting is useful for this since it affects all pages. I was also wondering whether this is a good way to introduce "layouts" to the app: You can start with layout option 1 (a sidebar for navigation), or 2 (full page content, and a separate page for navigation) and then in the future, potentially, option 3 (tabs for navigation?), option 4 ...

I just implemented option 3 but if we see it doesn't feel that useful we can try the other ones... I guess it would also depend on people's use cases, whether anyone would like different display settings per page or most people would use the same for every page.

Also this could definitely support different layouts / navigation UIs.

Janpot · 2023-03-31T06:16:46Z

I'm not sure the app-wide setting would be the best solution for us. The tools-public application has pages that we need to be chromeless, as well as pages that we need to have the sidebar.

apedroferreira · 2023-03-31T12:14:30Z

I'm not sure the app-wide setting would be the best solution for us. The tools-public application has pages that we need to be chromeless, as well as pages that we need to have the sidebar.

Ok that's good to hear, I guess option 3 should be good then.

apedroferreira · 2023-03-31T14:04:06Z

I've implemented option 3 as discussed:

Page options have a select input where Display mode can be set to App shell or No shell - this controls a new display property in the page node attributes
This can be overriden by the toolpad-display URL parameter, which can be set as standalone or shell

Screen.Recording.2023-03-31.at.14.59.11.mov

Let me know if you have any more feedback or I can merge it later today or early next week!

App navigation

38c3cd7

apedroferreira added the new feature New feature or request label Mar 27, 2023

apedroferreira self-assigned this Mar 27, 2023

apedroferreira changed the title ~~Add app navigation~~ Add app navigation sidebar Mar 27, 2023

Merge remote-tracking branch 'origin/master' into add-app-navigation

305c275

apedroferreira commented Mar 27, 2023

View reviewed changes

apedroferreira requested review from a team and removed request for a team March 27, 2023 19:51

apedroferreira marked this pull request as draft March 27, 2023 21:13

apedroferreira added 4 commits March 28, 2023 17:28

Fix tests, remove right-side preview, open current page from top, add…

3ce2600

… development version

Merge remote-tracking branch 'origin/master' into add-app-navigation

fec9be8

Fix navigation overlaying app content

2c34cf5

Improve go to page test method

0d5cc96

apedroferreira requested a review from a team March 28, 2023 18:00

apedroferreira marked this pull request as ready for review March 28, 2023 18:00

Janpot reviewed Mar 29, 2023

View reviewed changes

apedroferreira added 2 commits March 29, 2023 17:33

Merge remote-tracking branch 'origin/master' into add-app-navigation

37c008c

Open respective page in editor from preview

b811615

apedroferreira force-pushed the add-app-navigation branch from 280f2b9 to b811615 Compare March 29, 2023 17:03

apedroferreira added 3 commits March 29, 2023 18:04

unused import

f144507

Better fallback

d2926a2

Merge remote-tracking branch 'origin/master' into add-app-navigation

2297d2a

apedroferreira requested a review from Janpot March 29, 2023 19:10

Janpot approved these changes Mar 30, 2023

View reviewed changes

apedroferreira added 5 commits March 30, 2023 18:28

Merge remote-tracking branch 'origin/master' into add-app-navigation

56f1685

Merge remote-tracking branch 'origin/master' into add-app-navigation

f5c481a

Add page parameter for default page display

8345268

Fixed default value

49b5c1c

Keep display param between routes

7e69087

bharatkashyap approved these changes Mar 30, 2023

View reviewed changes

apedroferreira added 2 commits March 31, 2023 14:53

Set initial page display only

618d9b3

Merge remote-tracking branch 'origin/master' into add-app-navigation

96cc127

apedroferreira added 3 commits March 31, 2023 16:15

Revert previous changes and rename defaultDisplay to display

8332f20

Not sure what happened here

5de6db7

Remove uneeded URL params

8d846cd

apedroferreira merged commit 5dfb45a into master Mar 31, 2023

apedroferreira deleted the add-app-navigation branch March 31, 2023 16:00

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add app navigation sidebar #1819

Add app navigation sidebar #1819

apedroferreira commented Mar 27, 2023 •

edited

Loading

apedroferreira Mar 27, 2023 •

edited

Loading

apedroferreira Mar 27, 2023

prakhargupta1 commented Mar 27, 2023

apedroferreira commented Mar 28, 2023 •

edited

Loading

Janpot commented Mar 28, 2023

apedroferreira commented Mar 28, 2023

Janpot commented Mar 29, 2023

prakhargupta1 commented Mar 29, 2023

Janpot Mar 29, 2023

Janpot commented Mar 30, 2023

apedroferreira commented Mar 30, 2023

bharatkashyap commented Mar 30, 2023

apedroferreira commented Mar 30, 2023 •

edited

Loading

Janpot commented Mar 31, 2023 •

edited

Loading

apedroferreira commented Mar 31, 2023

apedroferreira commented Mar 31, 2023 •

edited

Loading

Add app navigation sidebar #1819

Add app navigation sidebar #1819

Conversation

apedroferreira commented Mar 27, 2023 • edited Loading

Development:

Production

apedroferreira Mar 27, 2023 • edited Loading

Choose a reason for hiding this comment

apedroferreira Mar 27, 2023

Choose a reason for hiding this comment

prakhargupta1 commented Mar 27, 2023

apedroferreira commented Mar 28, 2023 • edited Loading

Janpot commented Mar 28, 2023

apedroferreira commented Mar 28, 2023

Janpot commented Mar 29, 2023

prakhargupta1 commented Mar 29, 2023

Janpot Mar 29, 2023

Choose a reason for hiding this comment

Janpot commented Mar 30, 2023

apedroferreira commented Mar 30, 2023

bharatkashyap commented Mar 30, 2023

apedroferreira commented Mar 30, 2023 • edited Loading

Janpot commented Mar 31, 2023 • edited Loading

apedroferreira commented Mar 31, 2023

apedroferreira commented Mar 31, 2023 • edited Loading

apedroferreira commented Mar 27, 2023 •

edited

Loading

apedroferreira Mar 27, 2023 •

edited

Loading

apedroferreira commented Mar 28, 2023 •

edited

Loading

apedroferreira commented Mar 30, 2023 •

edited

Loading

Janpot commented Mar 31, 2023 •

edited

Loading

apedroferreira commented Mar 31, 2023 •

edited

Loading