Merge pull request #6905 from tudi2d/mobile-sidebar

Mobile sidebar
2022-01-14 16:55:14 +01:00
parent 81ad90ba28 374550ead0
commit 7e8cc7d24e
30 changed files with 1270 additions and 441 deletions
@@ -0,0 +1,10 @@
+---
+'@backstage/plugin-catalog': patch
+'@backstage/plugin-cost-insights': patch
+'@backstage/plugin-shortcuts': patch
+'@backstage/plugin-user-settings': patch
+---
+
+**@backstage/plugin-user-settings:** Hide Header on mobile screens to improve the UI & give more space to the content. Furthermore, the "Pin Sidebar" setting is removed on mobile screens, as the mobile sidebar is always pinned to the bottom.
+
+**Other plugins:** Smaller style adjustments across plugins to improve the UI on mobile devices.
@@ -0,0 +1,11 @@
+---
+'@backstage/core-components': patch
+---
+
+The `Bar` component will now render a `MobileSidebar` instead of the current sidebar on smaller screens. The state of the `MobileSidebar` will be treated as always open.
+
+---
+
+**Add MobileSidebar:** A navigation component, which sticks to the bottom. If there is no content in the Sidebar, it won't be rendered. If there are `children ` in the `Sidebar`, but no `SidebarGroup`s as `children`, it will render all `children` into a default overlay menu, which can be displayed by clicking a menu item. If `SidebarGroup`s are provided, it will render them in the bottom navigation. Additionally, a `MobileSidebarContext`, which wraps the component, will save the selected menu item.
+
+**Add SidebarGroup:** Groups items of the `Sidebar` together. On bigger screens, this won't have any effect at the moment. On smaller screens, it will render a given icon into the `MobileSidebar`. If a route is provided, clicking the `SidebarGroup` in the `MobileSidebar` will route to the page. If no route is provided, it will add a provided icon to the `MobileSidebar` as a menu item & will render the children into an overlay menu, which will be displayed when the menu item is clicked.
@@ -0,0 +1,51 @@
+---
+'@backstage/create-app': patch
+---
+
+You can now add `SidebarGroup`s to the current `Sidebar`. This will not affect how the current sidebar is displayed, but allows a customization on how the `MobileSidebar` on smaller screens will look like. A `SidebarGroup` will 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 descending order from left to right.
+
+```diff
+<SidebarGroup
+    label="Settings"
+    icon={<UserSettingsSignInAvatar />}
+    to="/settings"
+   priority={1}
+>
+    <SidebarSettings />
+</SidebarGroup>
+```
+
+If you decide against adding `SidebarGroup`s to your `Sidebar` the `MobileSidebar` will contain one default menu item, which will open a full-screen overlay menu displaying all the content of the current `Sidebar`.
+
+More information on the `SidebarGroup` & the `MobileSidebar` component can be found in the changeset for the `core-components`.