Update changeset & documentation

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>
This commit is contained in:
Philipp Hugenroth
2021-11-15 11:55:17 +01:00
parent 7ba416be78
commit 4b8cefcf05
6 changed files with 66 additions and 11 deletions
+47 -1
View File
@@ -2,4 +2,50 @@
'@backstage/create-app': patch
---
// TODO
You can now add `SidebarGroups` to the current `Sidebar`. This will not affect how the current sidebar is displayed, but allows a customization on how the `MobileSidebar` on smaler screens will look like. A `SidebarGroup` wil be displayed with the given icon in the `MobileSidebar`.
A `SidebarGroup` can either link to an existing page (e.g. `/search` or `/settings`) or wrap components, which will be displayed in a full screen overlay menu (e.g. `Menu`).
```diff
<Sidebar>
<SidebarLogo />
+ <SidebarGroup label="Search" icon={<SearchIcon />} to="/search">
<SidebarSearchModal />
+ </SidebarGroup>
<SidebarDivider />
+ <SidebarGroup label="Menu" icon={<MenuIcon />}>
<SidebarItem icon={HomeIcon} to="catalog" text="Home" />
<SidebarItem icon={CreateComponentIcon} to="create" text="Create..." />
<SidebarDivider />
<SidebarScrollWrapper>
<SidebarItem icon={MapIcon} to="tech-radar" text="Tech Radar" />
</SidebarScrollWrapper>
+ </SidebarGroup>
<SidebarSpace />
<SidebarDivider />
+ <SidebarGroup
+ label="Settings"
+ icon={<UserSettingsSignInAvatar />}
+ to="/settings"
+ >
<SidebarSettings />
+ </SidebarGroup>
</Sidebar>
```
Additionally you can order the groups differently in the `MobileSidebar` than in the usual `Sidebar` simply by giving a group a priority. The groups will be displayed in a descending order from left to right.
```diff
<SidebarGroup
label="Settings"
icon={<UserSettingsSignInAvatar />}
to="/settings"
+ priority={1}
>
<SidebarSettings />
</SidebarGroup>
```
If you decide against adding `SidebarGroups` to your `Sidebar` the `MobileSidebar` will contain one default menu item, which will open a full screen overlay menu displaying all of the content of the current `Sidebar`.
More information on the `SidebarGroup` & the `MobileSidebar` component can be found in the changeset for the `core-components`.