From 75decc011dfbc12972acca44b6a992e4bed3178c Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Thu, 13 Aug 2020 11:52:23 +0200
Subject: [PATCH] create-app: add Sidebar and other app-wide components to app
 template

---
 .../default-app/packages/app/package.json.hbs |  1 -
 .../default-app/packages/app/src/App.tsx      | 15 ++++++++--
 .../default-app/packages/app/src/sidebar.tsx  | 28 +++++++++++++++++++
 3 files changed, 41 insertions(+), 3 deletions(-)
 create mode 100644 packages/create-app/templates/default-app/packages/app/src/sidebar.tsx

diff --git a/packages/create-app/templates/default-app/packages/app/package.json.hbs b/packages/create-app/templates/default-app/packages/app/package.json.hbs
index c3de7ada80..2f3adcc5ca 100644
--- a/packages/create-app/templates/default-app/packages/app/package.json.hbs
+++ b/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}}",
diff --git a/packages/create-app/templates/default-app/packages/app/src/App.tsx b/packages/create-app/templates/default-app/packages/app/src/App.tsx
index 724b83d41b..c96bd9d05e 100644
--- a/packages/create-app/templates/default-app/packages/app/src/App.tsx
+++ b/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>
 );
diff --git a/packages/create-app/templates/default-app/packages/app/src/sidebar.tsx b/packages/create-app/templates/default-app/packages/app/src/sidebar.tsx
new file mode 100644
index 0000000000..1ced85cff2
--- /dev/null
+++ b/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>
+);