Update changeset & documentation

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>

.changeset/stale-brooms-fry.md

@@ -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`.

app-config.yaml

@@ -23,9 +23,9 @@ app:
             title: '#backstage'
 
 backend:
-  baseUrl: http://localhost:7000
+  baseUrl: http://localhost:7001
   listen:
-    port: 7000
+    port: 7001
   database:
     client: sqlite3
     connection: ':memory:'

docs/getting-started/configure-app-with-plugins.md

@@ -92,12 +92,12 @@ 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` or
-create a `SidebarGroup` with a link. All `SidebarGroups` are displayed in the
-bottom navigation with an icon.
+customizing the experience you can group `SidebarItems` in a `SidebarGroup`
+(Example 1) or create a `SidebarGroup` with a link (Example 2). All
+`SidebarGroups` are displayed in the bottom navigation with an icon.
 
 ```ts
-// ... inside the AppSidebar component
+// Example 1
 <SidebarGroup icon={<MenuIcon />} label="Menu">
   ...
   <SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" />
@@ -105,5 +105,14 @@ bottom navigation with an icon.
 <SidebarGroup />
 ```
 
-If no `SidebarGroup`is provided a default menu will display the `Sidebar`
+```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.

packages/app/src/components/Root/Root.tsx

@@ -89,7 +89,7 @@ export const Root = ({ children }: PropsWithChildren<{}>) => (
         <SidebarSearchModal />
       </SidebarGroup>
       <SidebarDivider />
-      <SidebarGroup priority={0} label="Menu" icon={<MenuIcon />}>
+      <SidebarGroup label="Menu" icon={<MenuIcon />}>
         {/* Global nav, not org-specific */}
         <SidebarItem icon={HomeIcon} to="catalog" text="Home" />
         <SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" />

packages/core-components/src/layout/Sidebar/MobileSidebar.tsx

@@ -73,7 +73,7 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
 const sortSidebarGroupsForPriority = (children: React.ReactElement[]) =>
   orderBy(
     children,
-    ({ props: { priority } }) => (priority ? priority : -1),
+    ({ props: { priority } }) => (Number.isInteger(priority) ? priority : -1),
     'desc',
   );
 

packages/create-app/templates/default-app/packages/app/src/components/Root/Root.tsx

@@ -84,7 +84,7 @@ export const Root = ({ children }: PropsWithChildren<{}>) => (
         <SidebarSearchModal />
       </SidebarGroup>
       <SidebarDivider />
-      <SidebarGroup priority={0} label="Menu" icon={<MenuIcon />}>
+      <SidebarGroup label="Menu" icon={<MenuIcon />}>
         {/* Global nav, not org-specific */}
         <SidebarItem icon={HomeIcon} to="catalog" text="Home" />
         <SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" />