app: migrate to new navItems API

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

packages/create-app/templates/next-app/packages/app/src/modules/nav/Sidebar.tsx

@@ -1,4 +1,5 @@
 import {
+  Sidebar,
   SidebarDivider,
   SidebarGroup,
   SidebarItem,
@@ -6,20 +7,26 @@ import {
   SidebarSpace,
 } from '@backstage/core-components';
 import { compatWrapper } from '@backstage/core-compat-api';
-import { Sidebar } from '@backstage/core-components';
-import { NavContentBlueprint } from '@backstage/plugin-app-react';
+import { NavContentBlueprint, NavItem } from '@backstage/plugin-app-react';
 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';
 import SearchIcon from '@material-ui/icons/Search';
 import { SidebarSearchModal } from '@backstage/plugin-search';
 import { UserSettingsSignInAvatar, Settings as SidebarSettings } from '@backstage/plugin-user-settings';
 import { NotificationsSidebarItem } from '@backstage/plugin-notifications';
 
+function item(props?: NavItem) {
+  if (!props) {
+    return null;
+  }
+  return (
+    <SidebarItem icon={() => props.icon} to={props.href} text={props.title} />
+  );
+}
+
 export const SidebarContent = NavContentBlueprint.make({
   params: {
-    component: ({ items }) =>
+    component: ({ navItems }) =>
       compatWrapper(
         <Sidebar>
           <SidebarLogo />
@@ -28,20 +35,14 @@ export const SidebarContent = NavContentBlueprint.make({
           </SidebarGroup>
           <SidebarDivider />
           <SidebarGroup label="Menu" icon={<MenuIcon />}>
-            {/* Global nav, not org-specific */}
-            <SidebarItem icon={HomeIcon} to="catalog" text="Home" />
-            <SidebarItem
-              icon={CreateComponentIcon}
-              to="create"
-              text="Create..."
-            />
-            {/* End global nav */}
+            {item(navItems.take('page:catalog'))}
+            {item(navItems.take('page:scaffolder'))}
             <SidebarDivider />
             <SidebarScrollWrapper>
-              {/* Items in this group will be scrollable if they run out of space */}
-              {items.map((item, index) => (
-                <SidebarItem {...item} key={index} />
-              ))}
+              {navItems
+                .rest()
+                .sort((a, b) => a.title.localeCompare(b.title))
+                .map(item)}
             </SidebarScrollWrapper>
           </SidebarGroup>
           <SidebarSpace />