In the app view, all pages should also be shown as a list on the left menu bar

[prakhargupta1]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

When previewing an app that has multiple pages, we can show a toggle asking if the pages should appear in a menu bar on the left. This is how most admin panels look.

We can also ask the developer to set one of the pages as default and show it when the app opens.

This is just one way of implementing it, we can discuss more ways like adding this menu bar as a component.

Examples 🌈

Later on:

1. we can have a header nav bar
2. these 2 components can be prominent in assigning a theme to the app

Motivation

https://community.retool.com/t/building-side-nav-and-multiple-pages-dashboard/6219

Reference:
https://www.notion.so/mui-org/UI-layout-for-navigation-between-pages-5e69b677da7c4a469205b133c3133fa5

Benchmark

https://www.npmjs.com/package/react-pro-sidebar

High level tasks

• Add Toolpad shell = navigation sidebar
• Make Toolpad shell removable through query param ?toolpad-display=standalone
• Remove overview of apps
• initial page (first one for now?)
• preview button directly to the page When preview is initiated show active page #1547

[Janpot]

All apps I've seen created so far by internal dogfooding are one page only. Another idea could be to optimize for this use-case and remove the concept of pages altogether. Each app would be just one single page.

We could then later down the road provide multi-page organization with folders in the workspace.

[bharatkashyap]

Quick experiment for what this would look like:

Screen.Recording.2022-12-09.at.4.50.32.PM.mov

[prakhargupta1]

This looks good, much like react admin output. We would soon have to conclude how we should show pages, like this way or retool way (page and folders, no concept of app).

Until then, I think we should it. It makes the app look complete.
WDYT @mui/toolpad ?

[prakhargupta1]

I suggest we do it as it will definitely make the app look more complete. Let me know if there are any objections.
cc: @bharatkashyap

[bharatkashyap]

I suggest we do it as it will definitely make the app look more complete. Let me know if there are any objections. cc: @bharatkashyap

I realised that this creates an issue about authorisation, since in this case, sharing only one page of an app with a user is not possible any more.

[prakhargupta1]

Can we not just change this view to the one you showed while keeping everything else same?

[bharatkashyap]

Can we not just change this view to the one you showed while keeping everything else same?

The sidebar would show up across all pages, otherwise what would be the point of having a sidebar?

[prakhargupta1]

In the deploy pop-up, let's show 2 radio buttons asking how the user wants to deploy the app.

1. Without a side bar (default) => It will deploy like we do today.
2. With side bar => It will deploy like we have shown it in the video. For now, let's keep page1 as default.

[Janpot]

In the deploy pop-up, let's show 2 radio buttons asking how the user wants to deploy the app.

If we were to add this as an option, I believe it should be configurable separately from the deployment lifecycle. e.g. somewhere under "application options", or maybe even on a per page basis.

---

I'm also wondering:

• If we were to add this as an option, what would be the function of that overview page that lists all the pages?
• If we're planning on exploring removing multiple pages per application as a construct, does it still make sense to continue this effort?

[bharatkashyap]

In the deploy pop-up, let's show 2 radio buttons asking how the user wants to deploy the app.

If we were to add this as an option, I believe it should be configurable separately from the deployment lifecycle. e.g. somewhere under "application options", or maybe even on a per page basis.

Agreed, I think we must communicate clearly that one option means every page of the app is accessible to everyone with who the app is shared via URL, versus the other option allows sharing only individual pages via URL.

[prakhargupta1]

These points make me think that a navigational component like tabs can handle it all, I mean even if we make 1 app=1 page, if someone would want multiple pages on header bar they can use this component. Appsmith deploys like this.

Similarly, if we use drawer component, user would be able to have multiple pages on the left bar.

[prakhargupta1]

As discussed here we decided to show a deployed app with all pages listed on a left drawer. And that there will be default a page.

This will:

1. Break the Zendesk iframe app or the apps that we have embedded in notion. Though we discussed that a single page can be made accessible (like we do today) through query parameters.
2. Not go with direction 13 as a Toolpad page will be a react component there and the way to arrange all pages as apps is unclear.

So, maybe it makes sense to not take this forward till we get further clarity.

[Janpot]

@prakhargupta1 I'm not sure I follow, didn't we decide to add a drawer to the left:

• Containing a navigation UI for all the pages within the app
• Add an option that denotes a "home page" to be initially opened when navigating to the root of the app and remove the overview page
• Add an option to the app to disable this UI for the zendesk use-case (or we support a toolpad-hideShell query parameter or something to make this controlled on the consumer side)

[prakhargupta1]

Yes we did. Cool, let's take it forward then. Just reiterating how I understood it:

• the navigation UI will be there by default, even if it is a single page app.
• If there are 2 or more pages, then one of them will be default and it will be possible to change it from the page menu.
• It will be applicable both for preview and deploy view.
• When previewing the page separately from the right sidebar, it won't come with the navigation UI.
• About how to disable this UI, I think it applies only to our internal apps, so controlling it through a query parameter should be sufficient.

[prakhargupta1]

Retool has also started supporting sidebar navigation (in addition to header navigation). Example app

[bharatkashyap]

• When previewing the page separately from the right sidebar, it won't come with the navigation UI.

What does this mean?

[prakhargupta1]

What does this mean?

That we'll show page preview (like we show today) when previewing it from here: