app-react: API cleanup and component utility for nav items

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

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

@@ -7,7 +7,7 @@ import {
   SidebarSpace,
 } from '@backstage/core-components';
 import { compatWrapper } from '@backstage/core-compat-api';
-import { NavContentBlueprint, NavItem } from '@backstage/plugin-app-react';
+import { NavContentBlueprint } from '@backstage/plugin-app-react';
 import { SidebarLogo } from './SidebarLogo';
 import MenuIcon from '@material-ui/icons/Menu';
 import SearchIcon from '@material-ui/icons/Search';
@@ -15,19 +15,17 @@ 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: ({ navItems }) =>
-      compatWrapper(
+    component: ({ navItems }) => {
+      const nav = navItems.withComponent(item => (
+        <SidebarItem
+          icon={() => item.icon}
+          to={item.href}
+          text={item.title}
+        />
+      ));
+      return compatWrapper(
         <Sidebar>
           <SidebarLogo />
           <SidebarGroup label="Search" icon={<SearchIcon />} to="/search">
@@ -35,14 +33,11 @@ export const SidebarContent = NavContentBlueprint.make({
           </SidebarGroup>
           <SidebarDivider />
           <SidebarGroup label="Menu" icon={<MenuIcon />}>
-            {item(navItems.take('page:catalog'))}
-            {item(navItems.take('page:scaffolder'))}
+            {nav.take('page:catalog')}
+            {nav.take('page:scaffolder')}
             <SidebarDivider />
             <SidebarScrollWrapper>
-              {navItems
-                .rest()
-                .sort((a, b) => a.title.localeCompare(b.title))
-                .map(item)}
+              {nav.rest({ sortBy: 'title' })}
             </SidebarScrollWrapper>
           </SidebarGroup>
           <SidebarSpace />
@@ -57,6 +52,7 @@ export const SidebarContent = NavContentBlueprint.make({
             <SidebarSettings />
           </SidebarGroup>
         </Sidebar>,
-      ),
+      );
+    },
   },
 });