diff --git a/packages/app/src/modules/appModuleNav.tsx b/packages/app/src/modules/appModuleNav.tsx index 9da6358dd3..3ce2bc3cd7 100644 --- a/packages/app/src/modules/appModuleNav.tsx +++ b/packages/app/src/modules/appModuleNav.tsx @@ -29,7 +29,7 @@ import SearchIcon from '@material-ui/icons/Search'; import MenuIcon from '@material-ui/icons/Menu'; import BuildIcon from '@material-ui/icons/Build'; import { createFrontendModule } from '@backstage/frontend-plugin-api'; -import { NavContentBlueprint } from '@backstage/plugin-app-react'; +import { NavContentBlueprint, NavItem } from '@backstage/plugin-app-react'; import { SidebarSearchModal } from '@backstage/plugin-search'; import { NotificationsSidebarItem } from '@backstage/plugin-notifications'; import { @@ -98,39 +98,56 @@ const SidebarLogo = () => { ); }; +function item(props?: NavItem) { + if (!props) { + return null; + } + return ( + props.icon} to={props.href} text={props.title} /> + ); +} + export const appModuleNav = createFrontendModule({ pluginId: 'app', extensions: [ NavContentBlueprint.make({ params: { - component: ({ items }) => ( - - - } to="/search"> - - - - }> - - {items.map((item, index) => ( - - ))} - - - - - - } - to="/settings" - > - - - - - - ), + component: ({ navItems }) => { + navItems.take('page:home'); // Skip home + return ( + + + } to="/search"> + + + + }> + {item(navItems.take('page:home'))} + {item(navItems.take('page:catalog'))} + {item(navItems.take('page:scaffolder'))} + + + {navItems + .rest() + .sort((a, b) => a.title.localeCompare(b.title)) + .map(item)} + + + + + + } + to="/settings" + > + + + + + + ); + }, }, }), ], 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 index 9b7cd7a7e4..b3883aded3 100644 --- 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 @@ -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 ( + props.icon} to={props.href} text={props.title} /> + ); +} + export const SidebarContent = NavContentBlueprint.make({ params: { - component: ({ items }) => + component: ({ navItems }) => compatWrapper( @@ -28,20 +35,14 @@ export const SidebarContent = NavContentBlueprint.make({ }> - {/* Global nav, not org-specific */} - - - {/* End global nav */} + {item(navItems.take('page:catalog'))} + {item(navItems.take('page:scaffolder'))} - {/* Items in this group will be scrollable if they run out of space */} - {items.map((item, index) => ( - - ))} + {navItems + .rest() + .sort((a, b) => a.title.localeCompare(b.title)) + .map(item)}