diff --git a/packages/create-app/templates/next-app/packages/app/src/App.tsx b/packages/create-app/templates/next-app/packages/app/src/App.tsx
index 457d0cf9da..c0206fec07 100644
--- a/packages/create-app/templates/next-app/packages/app/src/App.tsx
+++ b/packages/create-app/templates/next-app/packages/app/src/App.tsx
@@ -1,11 +1,7 @@
import { createApp } from '@backstage/frontend-defaults';
import catalogPlugin from '@backstage/plugin-catalog/alpha';
-import { appModule } from './modules/app';
+import { navModule } from './modules/nav';
export default createApp({
- features: [
- catalogPlugin,
- appModule,
- ],
+ features: [catalogPlugin, navModule],
});
-
diff --git a/packages/create-app/templates/next-app/packages/app/src/modules/app.tsx b/packages/create-app/templates/next-app/packages/app/src/modules/app.tsx
deleted file mode 100644
index 2331df6250..0000000000
--- a/packages/create-app/templates/next-app/packages/app/src/modules/app.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { coreExtensionData, createFrontendModule } from '@backstage/frontend-plugin-api';
-import appPlugin from '@backstage/plugin-app';
-
-export const appModule = createFrontendModule({
- pluginId: 'app',
- extensions: [
- appPlugin.getExtension('app/nav').override({
- factory: () => [
- coreExtensionData.reactElement(
- // todo: sidebar
-
- )
- ]
- })
- ]
-})
\ No newline at end of file
diff --git a/packages/create-app/templates/next-app/packages/app/src/modules/nav/LogoFull.tsx b/packages/create-app/templates/next-app/packages/app/src/modules/nav/LogoFull.tsx
new file mode 100644
index 0000000000..95f69ae530
--- /dev/null
+++ b/packages/create-app/templates/next-app/packages/app/src/modules/nav/LogoFull.tsx
@@ -0,0 +1,28 @@
+import { makeStyles } from '@material-ui/core';
+
+const useStyles = makeStyles({
+ svg: {
+ width: 'auto',
+ height: 30,
+ },
+ path: {
+ fill: '#7df3e1',
+ },
+});
+
+export const LogoFull = () => {
+ const classes = useStyles();
+
+ return (
+
+ );
+};
diff --git a/packages/create-app/templates/next-app/packages/app/src/modules/nav/LogoIcon.tsx b/packages/create-app/templates/next-app/packages/app/src/modules/nav/LogoIcon.tsx
new file mode 100644
index 0000000000..38544dd156
--- /dev/null
+++ b/packages/create-app/templates/next-app/packages/app/src/modules/nav/LogoIcon.tsx
@@ -0,0 +1,28 @@
+import { makeStyles } from '@material-ui/core';
+
+const useStyles = makeStyles({
+ svg: {
+ width: 'auto',
+ height: 28,
+ },
+ path: {
+ fill: '#7df3e1',
+ },
+});
+
+export const LogoIcon = () => {
+ const classes = useStyles();
+
+ return (
+
+ );
+};
diff --git a/packages/create-app/templates/next-app/packages/app/src/modules/nav/Sidebar.tsx b/packages/create-app/templates/next-app/packages/app/src/modules/nav/Sidebar.tsx
new file mode 100644
index 0000000000..f90991f5d6
--- /dev/null
+++ b/packages/create-app/templates/next-app/packages/app/src/modules/nav/Sidebar.tsx
@@ -0,0 +1,41 @@
+import {
+ SidebarDivider,
+ SidebarGroup,
+ SidebarItem,
+ SidebarScrollWrapper,
+} from '@backstage/core-components';
+import { compatWrapper } from '@backstage/core-compat-api';
+import { Sidebar } from '@backstage/core-components';
+import { NavContentBlueprint } from '@backstage/frontend-plugin-api';
+import { SidebarLogo } from './SidebarLogo';
+import CreateComponentIcon from '@material-ui/icons/AddCircleOutline';
+import HomeIcon from '@material-ui/icons/Home';
+import MenuIcon from '@material-ui/icons/Menu';
+
+export const SidebarContent = NavContentBlueprint.make({
+ params: {
+ component: ({ items }) =>
+ compatWrapper(
+
+
+ }>
+ {/* Global nav, not org-specific */}
+
+
+ {/* End global nav */}
+
+
+ {/* Items in this group will be scrollable if they run out of space */}
+ {items.map((item, index) => (
+
+ ))}
+
+
+ ,
+ ),
+ },
+});
diff --git a/packages/create-app/templates/next-app/packages/app/src/modules/nav/SidebarLogo.tsx b/packages/create-app/templates/next-app/packages/app/src/modules/nav/SidebarLogo.tsx
new file mode 100644
index 0000000000..80df964d74
--- /dev/null
+++ b/packages/create-app/templates/next-app/packages/app/src/modules/nav/SidebarLogo.tsx
@@ -0,0 +1,36 @@
+import {
+ Link,
+ sidebarConfig,
+ useSidebarOpenState,
+} from '@backstage/core-components';
+import { makeStyles } from '@material-ui/core';
+import { LogoFull } from './LogoFull';
+import { LogoIcon } from './LogoIcon';
+
+const useSidebarLogoStyles = makeStyles({
+ root: {
+ width: sidebarConfig.drawerWidthClosed,
+ height: 3 * sidebarConfig.logoHeight,
+ display: 'flex',
+ flexFlow: 'row nowrap',
+ alignItems: 'center',
+ marginBottom: -14,
+ },
+ link: {
+ width: sidebarConfig.drawerWidthClosed,
+ marginLeft: 24,
+ },
+});
+
+export const SidebarLogo = () => {
+ const classes = useSidebarLogoStyles();
+ const { isOpen } = useSidebarOpenState();
+
+ return (
+
+
+ {isOpen ? : }
+
+
+ );
+};
diff --git a/packages/create-app/templates/next-app/packages/app/src/modules/nav/index.ts b/packages/create-app/templates/next-app/packages/app/src/modules/nav/index.ts
new file mode 100644
index 0000000000..abb61fc8af
--- /dev/null
+++ b/packages/create-app/templates/next-app/packages/app/src/modules/nav/index.ts
@@ -0,0 +1,7 @@
+import { createFrontendModule } from '@backstage/frontend-plugin-api';
+import { SidebarContent } from './Sidebar';
+
+export const navModule = createFrontendModule({
+ pluginId: 'app',
+ extensions: [SidebarContent],
+});