diff --git a/.changeset/lovely-walls-guess.md b/.changeset/lovely-walls-guess.md deleted file mode 100644 index eab92d8e9e..0000000000 --- a/.changeset/lovely-walls-guess.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -'@backstage/create-app': patch ---- - -Added `SidebarSubmenu` for all Kinds making it easier to discover them in the Catalog. - -To add this to an existing Backstage instance you will need to make the following to your `packages/app/src/components/Root/Root.tsx`: - -1. First add the following imports: - - ```ts - import ApiIcon from '@material-ui/icons/Extension'; - import ComponentIcon from '@material-ui/icons/Memory'; - import DomainIcon from '@material-ui/icons/Apartment'; - import ResourceIcon from '@material-ui/icons/Work'; - import SystemIcon from '@material-ui/icons/Category'; - import UserIcon from '@material-ui/icons/Person'; - ``` - -2. Then update the `@backstage/core-components` import like this: - - ```diff - import { - Sidebar, - sidebarConfig, - SidebarDivider, - SidebarGroup, - SidebarItem, - SidebarPage, - SidebarScrollWrapper, - SidebarSpace, - useSidebarOpenState, - Link, - + GroupIcon, - + SidebarSubmenu, - + SidebarSubmenuItem, - } from '@backstage/core-components'; - ``` - -3. Finally replace `` with this: - - ```ts - - - - - - - - - - - - - - ``` diff --git a/docs/assets/getting-started/sidebar-submenu-example.png b/docs/assets/getting-started/sidebar-submenu-example.png new file mode 100644 index 0000000000..0b30f0ca6a Binary files /dev/null and b/docs/assets/getting-started/sidebar-submenu-example.png differ diff --git a/docs/getting-started/app-custom-theme.md b/docs/getting-started/app-custom-theme.md index 146f160d71..3015c18011 100644 --- a/docs/getting-started/app-custom-theme.md +++ b/docs/getting-started/app-custom-theme.md @@ -393,6 +393,98 @@ You can add more icons, if the [default icons](https://github.com/backstage/back Note: If the icon is not available as one of the default icons or one you've added then it will fall back to Material UI's `LanguageIcon` +## Custom Sidebar + +As you've seen there are many ways that you can customize your Backstage app. The following section will show you how you can customize the sidebar. + +### Sidebar Submenu + +For this example we'll show you how you can expand the sidebar with a submenu: + +1. Open the `Root.tsx` file located in `packages/app/src/components/Root` as this is where the sidebar code lives +2. Then we want to add the following imports for the icons: + + ```ts + import ApiIcon from '@material-ui/icons/Extension'; + import ComponentIcon from '@material-ui/icons/Memory'; + import DomainIcon from '@material-ui/icons/Apartment'; + import ResourceIcon from '@material-ui/icons/Work'; + import SystemIcon from '@material-ui/icons/Category'; + import UserIcon from '@material-ui/icons/Person'; + ``` + +3. Then update the `@backstage/core-components` import like this: + + ```diff + import { + Sidebar, + sidebarConfig, + SidebarDivider, + SidebarGroup, + SidebarItem, + SidebarPage, + SidebarScrollWrapper, + SidebarSpace, + useSidebarOpenState, + Link, + + GroupIcon, + + SidebarSubmenu, + + SidebarSubmenuItem, + } from '@backstage/core-components'; + ``` + +4. Finally replace `` with this: + + ```ts + + + + + + + + + + + + + + ``` + +When you startup your Backstage app and hover over the Home option on the sidebar you'll now see a nice submenu appear with links to the various Kinds in your Catalog. It would look like this: + +![Sidebar submenu example](./../assets/getting-started/sidebar-submenu-example.png) + +You can see more ways to use this in the [Storybook Sidebar examples](https://backstage.io/storybook/?path=/story/layout-sidebar--sample-scalable-sidebar) + ## Custom Homepage In addition to a custom theme, a custom logo, you can also customize the diff --git a/packages/create-app/templates/default-app/packages/app/src/components/Root/Root.tsx b/packages/create-app/templates/default-app/packages/app/src/components/Root/Root.tsx index 0acaba7470..84882fa23f 100644 --- a/packages/create-app/templates/default-app/packages/app/src/components/Root/Root.tsx +++ b/packages/create-app/templates/default-app/packages/app/src/components/Root/Root.tsx @@ -74,47 +74,7 @@ export const Root = ({ children }: PropsWithChildren<{}>) => ( }> {/* Global nav, not org-specific */} - - - - - - - - - - - - - +