Merge pull request #6905 from tudi2d/mobile-sidebar

Mobile sidebar

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

@@ -23,12 +23,17 @@ import MapIcon from '@material-ui/icons/MyLocation';
 import LayersIcon from '@material-ui/icons/Layers';
 import LibraryBooks from '@material-ui/icons/LibraryBooks';
 import CreateComponentIcon from '@material-ui/icons/AddCircleOutline';
+import SearchIcon from '@material-ui/icons/Search';
+import MenuIcon from '@material-ui/icons/Menu';
 import MoneyIcon from '@material-ui/icons/MonetizationOn';
 import LogoFull from './LogoFull';
 import LogoIcon from './LogoIcon';
 import { NavLink } from 'react-router-dom';
 import { GraphiQLIcon } from '@backstage/plugin-graphiql';
-import { Settings as SidebarSettings } from '@backstage/plugin-user-settings';
+import {
+  Settings as SidebarSettings,
+  UserSettingsSignInAvatar,
+} from '@backstage/plugin-user-settings';
 import {
   SidebarSearchModal,
   SearchContextProvider,
@@ -36,15 +41,15 @@ import {
 import { Shortcuts } from '@backstage/plugin-shortcuts';
 import {
   Sidebar,
-  SidebarPage,
   sidebarConfig,
   SidebarContext,
-  SidebarItem,
   SidebarDivider,
-  SidebarSpace,
+  SidebarGroup,
+  SidebarItem,
+  SidebarPage,
   SidebarScrollWrapper,
+  SidebarSpace,
 } from '@backstage/core-components';
-import { AzurePullRequestsIcon } from '@backstage/plugin-azure-devops';
 
 const useSidebarLogoStyles = makeStyles({
   root: {
@@ -83,34 +88,43 @@ export const Root = ({ children }: PropsWithChildren<{}>) => (
   <SidebarPage>
     <Sidebar>
       <SidebarLogo />
-      <SearchContextProvider>
-        <SidebarSearchModal />
-      </SearchContextProvider>
+      <SidebarGroup label="Search" icon={<SearchIcon />} to="/search">
+        <SearchContextProvider>
+          <SidebarSearchModal />
+        </SearchContextProvider>
+      </SidebarGroup>
       <SidebarDivider />
-      {/* Global nav, not org-specific */}
-      <SidebarItem icon={HomeIcon} to="catalog" text="Home" />
-      <SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" />
-      <SidebarItem icon={LibraryBooks} to="docs" text="Docs" />
-      <SidebarItem icon={LayersIcon} to="explore" text="Explore" />
-      <SidebarItem icon={CreateComponentIcon} to="create" text="Create..." />
-      {/* End global nav */}
-      <SidebarDivider />
-      <SidebarScrollWrapper>
-        <SidebarItem icon={MapIcon} to="tech-radar" text="Tech Radar" />
-        <SidebarItem icon={RuleIcon} to="lighthouse" text="Lighthouse" />
-        <SidebarItem icon={MoneyIcon} to="cost-insights" text="Cost Insights" />
-        <SidebarItem icon={GraphiQLIcon} to="graphiql" text="GraphiQL" />
-        <SidebarItem
-          icon={AzurePullRequestsIcon}
-          to="azure-pull-requests"
-          text="Azure PRs"
-        />
-      </SidebarScrollWrapper>
-      <SidebarDivider />
-      <Shortcuts />
+      <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" />
+        <SidebarItem icon={LibraryBooks} to="docs" text="Docs" />
+        <SidebarItem icon={LayersIcon} to="explore" text="Explore" />
+        <SidebarItem icon={CreateComponentIcon} to="create" text="Create..." />
+        {/* End global nav */}
+        <SidebarDivider />
+        <SidebarScrollWrapper>
+          <SidebarItem icon={MapIcon} to="tech-radar" text="Tech Radar" />
+          <SidebarItem icon={RuleIcon} to="lighthouse" text="Lighthouse" />
+          <SidebarItem
+            icon={MoneyIcon}
+            to="cost-insights"
+            text="Cost Insights"
+          />
+          <SidebarItem icon={GraphiQLIcon} to="graphiql" text="GraphiQL" />
+        </SidebarScrollWrapper>
+        <SidebarDivider />
+        <Shortcuts />
+      </SidebarGroup>
       <SidebarSpace />
       <SidebarDivider />
-      <SidebarSettings />
+      <SidebarGroup
+        label="Settings"
+        icon={<UserSettingsSignInAvatar />}
+        to="/settings"
+      >
+        <SidebarSettings />
+      </SidebarGroup>
     </Sidebar>
     {children}
   </SidebarPage>

packages/app/src/components/search/SearchPage.tsx

@@ -21,6 +21,7 @@ import {
   Header,
   Lifecycle,
   Page,
+  SidebarPinStateContext,
 } from '@backstage/core-components';
 import { CatalogResultListItem } from '@backstage/plugin-catalog';
 import {
@@ -33,7 +34,7 @@ import {
 } from '@backstage/plugin-search';
 import { DocsResultListItem } from '@backstage/plugin-techdocs';
 import { Grid, List, makeStyles, Paper, Theme } from '@material-ui/core';
-import React from 'react';
+import React, { useContext } from 'react';
 
 const useStyles = makeStyles((theme: Theme) => ({
   bar: {
@@ -52,9 +53,11 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 const SearchPage = () => {
   const classes = useStyles();
+  const { isMobile } = useContext(SidebarPinStateContext);
+
   return (
     <Page themeId="home">
-      <Header title="Search" subtitle={<Lifecycle alpha />} />
+      {!isMobile && <Header title="Search" subtitle={<Lifecycle alpha />} />}
       <Content>
         <Grid container direction="row">
           <Grid item xs={12}>
@@ -62,37 +65,39 @@ const SearchPage = () => {
               <SearchBar debounceTime={100} />
             </Paper>
           </Grid>
-          <Grid item xs={3}>
-            <SearchType.Accordion
-              name="Result Type"
-              defaultValue="software-catalog"
-              types={[
-                {
-                  value: 'software-catalog',
-                  name: 'Software Catalog',
-                  icon: <CatalogIcon />,
-                },
-                {
-                  value: 'techdocs',
-                  name: 'Documentation',
-                  icon: <DocsIcon />,
-                },
-              ]}
-            />
-            <Paper className={classes.filters}>
-              <SearchFilter.Select
-                className={classes.filter}
-                name="kind"
-                values={['Component', 'Template']}
+          {!isMobile && (
+            <Grid item xs={3}>
+              <SearchType.Accordion
+                name="Result Type"
+                defaultValue="software-catalog"
+                types={[
+                  {
+                    value: 'software-catalog',
+                    name: 'Software Catalog',
+                    icon: <CatalogIcon />,
+                  },
+                  {
+                    value: 'techdocs',
+                    name: 'Documentation',
+                    icon: <DocsIcon />,
+                  },
+                ]}
               />
-              <SearchFilter.Checkbox
-                className={classes.filter}
-                name="lifecycle"
-                values={['experimental', 'production']}
-              />
-            </Paper>
-          </Grid>
-          <Grid item xs={9}>
+              <Paper className={classes.filters}>
+                <SearchFilter.Select
+                  className={classes.filter}
+                  name="kind"
+                  values={['Component', 'Template']}
+                />
+                <SearchFilter.Checkbox
+                  className={classes.filter}
+                  name="lifecycle"
+                  values={['experimental', 'production']}
+                />
+              </Paper>
+            </Grid>
+          )}
+          <Grid item xs>
             <SearchResult>
               {({ results }) => (
                 <List>