Merge pull request #6905 from tudi2d/mobile-sidebar

Mobile sidebar

plugins/user-settings/src/components/General/UserSettingsAppearanceCard.tsx

@@ -13,17 +13,21 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
+import { InfoCard, SidebarPinStateContext } from '@backstage/core-components';
 import { List } from '@material-ui/core';
-import { InfoCard } from '@backstage/core-components';
+import React, { useContext } from 'react';
 import { UserSettingsPinToggle } from './UserSettingsPinToggle';
 import { UserSettingsThemeToggle } from './UserSettingsThemeToggle';
 
-export const UserSettingsAppearanceCard = () => (
-  <InfoCard title="Appearance" variant="gridItem">
-    <List dense>
-      <UserSettingsThemeToggle />
-      <UserSettingsPinToggle />
-    </List>
-  </InfoCard>
-);
+export const UserSettingsAppearanceCard = () => {
+  const { isMobile } = useContext(SidebarPinStateContext);
+
+  return (
+    <InfoCard title="Appearance" variant="gridItem">
+      <List dense>
+        <UserSettingsThemeToggle />
+        {!isMobile && <UserSettingsPinToggle />}
+      </List>
+    </InfoCard>
+  );
+};

plugins/user-settings/src/components/General/UserSettingsGeneral.tsx

@@ -21,10 +21,10 @@ import { UserSettingsAppearanceCard } from './UserSettingsAppearanceCard';
 export const UserSettingsGeneral = () => {
   return (
     <Grid container direction="row" spacing={3}>
-      <Grid item sm={12} md={6}>
+      <Grid item xs={12} md={6}>
         <UserSettingsProfileCard />
       </Grid>
-      <Grid item sm={12} md={6}>
+      <Grid item xs={12} md={6}>
         <UserSettingsAppearanceCard />
       </Grid>
     </Grid>

plugins/user-settings/src/components/General/UserSettingsPinToggle.test.tsx

@@ -26,7 +26,11 @@ describe('<UserSettingsPinToggle />', () => {
     const rendered = await renderWithEffects(
       wrapInTestApp(
         <SidebarPinStateContext.Provider
-          value={{ isPinned: false, toggleSidebarPinState: mockToggleFn }}
+          value={{
+            isPinned: false,
+            isMobile: false,
+            toggleSidebarPinState: mockToggleFn,
+          }}
         >
           <UserSettingsPinToggle />
         </SidebarPinStateContext.Provider>,

plugins/user-settings/src/components/SettingsPage.tsx

@@ -14,21 +14,27 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import {
+  Header,
+  Page,
+  SidebarPinStateContext,
+  TabbedLayout,
+} from '@backstage/core-components';
+import React, { useContext } from 'react';
 import { UserSettingsAuthProviders } from './AuthProviders';
 import { UserSettingsFeatureFlags } from './FeatureFlags';
 import { UserSettingsGeneral } from './General';
-import { Header, Page, TabbedLayout } from '@backstage/core-components';
 
 type Props = {
   providerSettings?: JSX.Element;
 };
 
 export const SettingsPage = ({ providerSettings }: Props) => {
+  const { isMobile } = useContext(SidebarPinStateContext);
+
   return (
     <Page themeId="home">
-      <Header title="Settings" />
-
+      {!isMobile && <Header title="Settings" />}
       <TabbedLayout>
         <TabbedLayout.Route path="general" title="General">
           <UserSettingsGeneral />