paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 39 Packages Projects Releases Wiki Activity

Merge pull request #6905 from tudi2d/mobile-sidebar

Browse Source 
Mobile sidebar
This commit is contained in:
Fredrik Adelöw
2022-01-14 16:55:14 +01:00
committed by GitHub
parent 81ad90ba28 374550ead0
commit 7e8cc7d24e
30 changed files with 1270 additions and 441 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/getting-started/configure-app-with-plugins.md
+26
View File
@@ -90,3 +90,29 @@ extension to `.icon.svg`. For example:
```ts
import InternalToolIcon from './internal-tool.icon.svg';
```
On mobile devices the `Sidebar` is displayed at the bottom of the screen. For
customizing the experience you can group `SidebarItems` in a `SidebarGroup`
(Example 1) or create a `SidebarGroup` with a link (Example 2). All
`SidebarGroup`s are displayed in the bottom navigation with an icon.
```ts
// Example 1
<SidebarGroup icon={<MenuIcon />} label="Menu">
...
<SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" />
...
<SidebarGroup />
```
```ts
// Example 2
<SidebarGroup label="Search" icon={<SearchIcon />} to="/search">
...
<SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" />
...
<SidebarGroup />
```
If no `SidebarGroup` is provided a default menu will display the `Sidebar`
content.