create-app: add Sidebar and other app-wide components to app template

packages/create-app/templates/default-app/packages/app/package.json.hbs

@@ -5,7 +5,6 @@
   "dependencies": {
     "@material-ui/core": "^4.9.1",
     "@material-ui/icons": "^4.9.1",
-    "@material-ui/lab": "4.0.0-alpha.45",
     "@backstage/cli": "^{{version}}",
     "@backstage/core": "^{{version}}",
     "@backstage/test-utils": "^{{version}}",

packages/create-app/templates/default-app/packages/app/src/App.tsx

@@ -1,7 +1,13 @@
-import { createApp } from '@backstage/core';
 import React, { FC } from 'react';
+import {
+  createApp,
+  AlertDisplay,
+  OAuthRequestDialog,
+  SidebarPage,
+} from '@backstage/core';
 import { apis } from './apis';
 import * as plugins from './plugins';
+import { AppSidebar } from './sidebar';
 
 const app = createApp({
   apis,
@@ -14,8 +20,13 @@ const AppRoutes = app.getRoutes();
 
 const App: FC<{}> = () => (
   <AppProvider>
+    <AlertDisplay />
+    <OAuthRequestDialog />
     <AppRouter>
-      <AppRoutes />
+      <SidebarPage>
+        <AppSidebar />
+        <AppRoutes />
+      </SidebarPage>
     </AppRouter>
   </AppProvider>
 );

packages/create-app/templates/default-app/packages/app/src/sidebar.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import HomeIcon from '@material-ui/icons/Home';
+import CreateComponentIcon from '@material-ui/icons/AddCircleOutline';
+import {
+  Sidebar,
+  SidebarItem,
+  SidebarDivider,
+  SidebarSpace,
+  SidebarUserSettings,
+  SidebarThemeToggle,
+  SidebarPinButton,
+} from '@backstage/core';
+
+export const AppSidebar = () => (
+  <Sidebar>
+    <SidebarDivider />
+    {/* Global nav, not org-specific */}
+    <SidebarItem icon={HomeIcon} to="./" text="Home" />
+    <SidebarItem icon={CreateComponentIcon} to="create" text="Create..." />
+    {/* End global nav */}
+    <SidebarDivider />
+    <SidebarSpace />
+    <SidebarDivider />
+    <SidebarThemeToggle />
+    <SidebarUserSettings />
+    <SidebarPinButton />
+  </Sidebar>
+);