Add app navigation sidebar

packages/toolpad-app/src/appDom/index.ts

@@ -79,12 +79,15 @@ export interface ConnectionNode<P = unknown> extends AppDomNodeBase {
   };
 }
 
+export type PageDisplayMode = 'standalone' | 'shell';
+
 export interface PageNode extends AppDomNodeBase {
   readonly type: 'page';
   readonly attributes: {
     readonly title: ConstantAttrValue<string>;
     readonly parameters?: ConstantAttrValue<[string, string][]>;
     readonly module?: ConstantAttrValue<string>;
+    readonly display?: ConstantAttrValue<PageDisplayMode>;
   };
 }
 
@@ -1105,6 +1108,7 @@ export function createDefaultDom(): AppDom {
     name: 'Page 1',
     attributes: {
       title: createConst('Page 1'),
+      display: createConst('shell'),
     },
   });
 

packages/toolpad-app/src/canvas/index.tsx

@@ -136,8 +136,8 @@ export default function AppCanvas({ catalog, basename, initialState = null }: Ap
           <ToolpadApp
             rootRef={onAppRoot}
             catalog={catalog}
-            hidePreviewBanner
-            version="preview"
+            hasShell={false}
+            version="development"
             basename={basename}
             state={state}
           />

packages/toolpad-app/src/routes.ts

@@ -2,3 +2,5 @@ export const APP_PAGE_ROUTE = '/app/pages/:nodeId';
 export const APP_API_ROUTE = '/app/apis/:nodeId';
 export const APP_CODE_COMPONENT_ROUTE = '/app/codeComponents/:nodeId';
 export const APP_CONNECTION_ROUTE = '/app/connections/:nodeId';
+
+export const PREVIEW_PAGE_ROUTE = '/preview/pages/:nodeId';

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { useNonNullableContext } from '@mui/toolpad-core/utils/react';
-import { VersionOrPreview } from '../types';
+import { AppVersion } from '../types';
 
 export interface AppContext {
-  version: VersionOrPreview;
+  version: AppVersion;
 }
 
 const Context = React.createContext<AppContext | null>(null);

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

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import {
+  Drawer,
+  Box,
+  List,
+  ListSubheader,
+  ListItem,
+  ListItemButton,
+  ListItemText,
+  Toolbar,
+} from '@mui/material';
+import { useNavigate, useLocation, useHref } from 'react-router-dom';
+import * as appDom from '../appDom';
+
+const DRAWER_WIDTH = 250; // px
+
+interface AppNavigationProps {
+  pages: appDom.PageNode[];
+  isPreview?: boolean;
+}
+
+export default function AppNavigation({ pages, isPreview = false }: AppNavigationProps) {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { search } = location;
+  const href = useHref('');
+
+  const handlePageClick = React.useCallback(
+    (page: appDom.PageNode) => () => {
+      navigate(`pages/${page.id}${search}`);
+    },
+    [navigate, search],
+  );
+
+  const activePagePath = location.pathname.replace(href, '');
+
+  const navListSubheaderId = React.useId();
+
+  return (
+    <Drawer
+      variant="permanent"
+      anchor="left"
+      open
+      sx={{
+        width: DRAWER_WIDTH,
+        flexShrink: 0,
+        [`& .MuiDrawer-paper`]: { width: DRAWER_WIDTH, boxSizing: 'border-box' },
+      }}
+    >
+      {isPreview ? <Toolbar /> : null}
+      <Box>
+        <List
+          component="nav"
+          subheader={
+            <ListSubheader id={navListSubheaderId} sx={{ px: 4 }}>
+              Pages
+            </ListSubheader>
+          }
+          aria-labelledby={navListSubheaderId}
+        >
+          {pages.map((page) => (
+            <ListItem key={page.id} onClick={handlePageClick(page)} disablePadding>
+              <ListItemButton selected={activePagePath === `/pages/${page.id}`}>
+                <ListItemText primary={page.name} sx={{ ml: 2 }} />
+              </ListItemButton>
+            </ListItem>
+          ))}
+        </List>
+      </Box>
+    </Drawer>
+  );
+}

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

@@ -39,6 +39,7 @@ import {
   Navigate,
   Location as RouterLocation,
   useNavigate,
+  matchPath,
 } from 'react-router-dom';
 import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
 import {
@@ -51,14 +52,13 @@ import ErrorIcon from '@mui/icons-material/Error';
 import EditIcon from '@mui/icons-material/Edit';
 import { useBrowserJsRuntime } from '@mui/toolpad-core/jsBrowserRuntime';
 import * as appDom from '../appDom';
-import { RuntimeState, VersionOrPreview } from '../types';
+import { RuntimeState, AppVersion } from '../types';
 import {
   getElementNodeComponentId,
   isPageLayoutComponent,
   isPageRow,
   PAGE_ROW_COMPONENT_ID,
 } from '../toolpadComponents';
-import AppOverview from './AppOverview';
 import AppThemeProvider from './AppThemeProvider';
 import evalJsBindings, {
   buildGlobalScope,
@@ -81,6 +81,8 @@ import { errorFrom } from '../utils/errors';
 import Header from '../toolpad/ToolpadShell/Header';
 import { ThemeProvider } from '../ThemeContext';
 import { BridgeContext } from '../canvas/BridgeContext';
+import AppNavigation from './AppNavigation';
+import { PREVIEW_PAGE_ROUTE } from '../routes';
 
 const ReactQueryDevtoolsProduction = React.lazy(() =>
   import('@tanstack/react-query-devtools/build/lib/index.prod.js').then((d) => ({
@@ -1078,17 +1080,13 @@ function RenderedPage({ nodeId }: RenderedNodeProps) {
 }
 
 interface RenderedPagesProps {
-  dom: appDom.AppDom;
+  pages: appDom.PageNode[];
+  defaultPage: appDom.PageNode;
 }
 
-function RenderedPages({ dom }: RenderedPagesProps) {
-  const root = appDom.getApp(dom);
-  const { pages = [] } = appDom.getChildNodes(dom, root);
-
+function RenderedPages({ pages, defaultPage }: RenderedPagesProps) {
   return (
     <Routes>
-      <Route path="/" element={<Navigate replace to="/pages" />} />
-      <Route path="/pages" element={<AppOverview dom={dom} />} />
       {pages.map((page) => (
         <Route
           key={page.id}
@@ -1103,6 +1101,7 @@ function RenderedPages({ dom }: RenderedPagesProps) {
           }
         />
       ))}
+      <Route path="/" element={<Navigate to={`pages/${defaultPage.id}`} replace />} />
     </Routes>
   );
 }
@@ -1139,12 +1138,75 @@ const queryClient = new QueryClient({
   },
 });
 
+export interface ToolpadAppLayoutProps {
+  dom: appDom.RenderTree;
+  hasShell?: boolean;
+  version: AppVersion;
+}
+
+function ToolpadAppLayout({ dom, version, hasShell: hasShellProp = true }: ToolpadAppLayoutProps) {
+  const root = appDom.getApp(dom);
+  const { pages = [] } = appDom.getChildNodes(dom, root);
+
+  const location = useLocation();
+  const { pathname, search } = location;
+  const urlParams = React.useMemo(() => new URLSearchParams(search), [search]);
+
+  const pageMatch = matchPath(PREVIEW_PAGE_ROUTE, `/preview${pathname}`);
+  const pageId = pageMatch?.params.nodeId;
+
+  const defaultPage = pages[0];
+  const page = pageId
+    ? (appDom.getNode<'page'>(dom, pageId as NodeId) as appDom.PageNode)
+    : defaultPage;
+
+  const pageDisplay = urlParams.get('toolpad-display') || page.attributes.display?.value;
+
+  const hasShell = hasShellProp && pageDisplay !== 'standalone';
+
+  const isPreview = version === 'preview';
+
+  return (
+    <React.Fragment>
+      {isPreview ? (
+        <ThemeProvider>
+          <Header
+            enableUserFeedback={false}
+            actions={
+              <Stack direction="row" spacing={1} alignItems="center">
+                <Typography variant="body2" sx={{ color: 'primary.main' }}>
+                  This is a preview version of the application.
+                </Typography>
+                <Button
+                  variant="outlined"
+                  endIcon={<EditIcon />}
+                  color="primary"
+                  component="a"
+                  href={pageId ? `/_toolpad/app/pages/${pageId}` : '/_toolpad/app'}
+                >
+                  Edit
+                </Button>
+              </Stack>
+            }
+          />
+        </ThemeProvider>
+      ) : null}
+      <Box sx={{ display: 'flex' }}>
+        {hasShell && pages.length > 0 ? (
+          <AppNavigation pages={pages} isPreview={isPreview} />
+        ) : null}
+        <RenderedPages pages={pages} defaultPage={defaultPage} />
+      </Box>
+    </React.Fragment>
+  );
+}
+
 export interface ToolpadAppProps {
   rootRef?: React.Ref<HTMLDivElement>;
   catalog?: Record<string, ToolpadComponent>;
-  hidePreviewBanner?: boolean;
+  hasShell?: boolean;
   basename: string;
-  version: VersionOrPreview;
+  version: AppVersion;
   state: RuntimeState;
 }
 
@@ -1153,7 +1215,7 @@ export default function ToolpadApp({
   catalog,
   basename,
   version,
-  hidePreviewBanner,
+  hasShell = true,
   state,
 }: ToolpadAppProps) {
   const { dom } = state;
@@ -1175,29 +1237,6 @@ export default function ToolpadApp({
         <DomContextProvider value={dom}>
           <AppThemeProvider dom={dom}>
             <CssBaseline enableColorScheme />
-            {version === 'preview' && !hidePreviewBanner ? (
-              <ThemeProvider>
-                <Header
-                  enableUserFeedback={false}
-                  actions={
-                    <Stack direction="row" spacing={1} alignItems="center">
-                      <Typography variant="body2" sx={{ color: 'primary.main' }}>
-                        This is a preview version of the application.
-                      </Typography>
-                      <Button
-                        variant="outlined"
-                        endIcon={<EditIcon />}
-                        color="primary"
-                        component="a"
-                        href={`/_toolpad/app`}
-                      >
-                        Edit
-                      </Button>
-                    </Stack>
-                  }
-                />
-              </ThemeProvider>
-            ) : null}
             <ErrorBoundary FallbackComponent={AppError}>
               <ResetNodeErrorsKeyProvider value={resetNodeErrorsKey}>
                 <React.Suspense fallback={<AppLoading />}>
@@ -1206,7 +1245,7 @@ export default function ToolpadApp({
                       <AppContextProvider value={appContext}>
                         <QueryClientProvider client={queryClient}>
                           <BrowserRouter basename={basename}>
-                            <RenderedPages dom={dom} />
+                            <ToolpadAppLayout dom={dom} version={version} hasShell={hasShell} />
                           </BrowserRouter>
                           {showDevtools ? (
                             <ReactQueryDevtoolsProduction initialIsOpen={false} />