Align to current screen size

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

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

@@ -15,7 +15,7 @@
  */
 
 import {
-  MobileSidebar,
+  Sidebar,
   sidebarConfig,
   SidebarContext,
   SidebarDivider,
@@ -84,7 +84,7 @@ const SidebarLogo = () => {
 export const Root = ({ children }: PropsWithChildren<{}>) => {
   return (
     <SidebarPage>
-      <MobileSidebar>
+      <Sidebar>
         <SidebarLogo />
         <SidebarGroup label="Search" icon={<SearchIcon />} to="/search">
           <SidebarSearch />
@@ -125,7 +125,7 @@ export const Root = ({ children }: PropsWithChildren<{}>) => {
         >
           <SidebarSettings />
         </SidebarGroup>
-      </MobileSidebar>
+      </Sidebar>
       {children}
     </SidebarPage>
   );

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

@@ -54,9 +54,8 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 const SearchPage = () => {
   const classes = useStyles();
-  // Think about abstraction to utils here
   const isMobileScreen = useMediaQuery<BackstageTheme>(theme =>
-    theme.breakpoints.up('xs'),
+    theme.breakpoints.down('xs'),
   );
 
   return (

packages/core-components/src/layout/Page/Page.tsx

@@ -19,18 +19,22 @@ import { BackstageTheme } from '@backstage/theme';
 import { makeStyles, ThemeProvider } from '@material-ui/core';
 import { sidebarConfig } from '../Sidebar';
 
-const useStyles = makeStyles<BackstageTheme>({
+const useStyles = makeStyles<BackstageTheme>(theme => ({
   root: {
     display: 'grid',
     gridTemplateAreas:
       "'pageHeader pageHeader pageHeader' 'pageSubheader pageSubheader pageSubheader' 'pageNav pageContent pageSidebar'",
     gridTemplateRows: 'max-content auto 1fr',
     gridTemplateColumns: 'auto 1fr auto',
-    // TODO: Only mobile
-    height: `calc(100vh - ${sidebarConfig.mobileSidebarHeight}px)`,
+    [theme.breakpoints.up('sm')]: {
+      height: '100vh',
+    },
+    [theme.breakpoints.down('xs')]: {
+      height: `calc(100vh - ${sidebarConfig.mobileSidebarHeight}px)`,
+    },
     overflowY: 'auto',
   },
-});
+}));
 
 type Props = {
   themeId: string;

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

@@ -21,6 +21,7 @@ import React, { useRef, useState, useContext, PropsWithChildren } from 'react';
 import { sidebarConfig, SidebarContext } from './config';
 import { BackstageTheme } from '@backstage/theme';
 import { SidebarPinStateContext } from './Page';
+import { MobileSidebar } from './MobileSidebar';
 
 export type SidebarClassKey = 'root' | 'drawer' | 'drawerOpen';
 
@@ -80,12 +81,11 @@ type Props = {
   closeDelayMs?: number;
 };
 
-export function Sidebar(props: PropsWithChildren<Props>) {
-  const {
-    openDelayMs = sidebarConfig.defaultOpenDelayMs,
-    closeDelayMs = sidebarConfig.defaultCloseDelayMs,
-    children,
-  } = props;
+const DesktopSidebar = ({
+  openDelayMs = sidebarConfig.defaultOpenDelayMs,
+  closeDelayMs = sidebarConfig.defaultCloseDelayMs,
+  children,
+}: PropsWithChildren<Props>) => {
   const classes = useStyles();
   const isSmallScreen = useMediaQuery<BackstageTheme>(theme =>
     theme.breakpoints.down('md'),
@@ -138,18 +138,30 @@ export function Sidebar(props: PropsWithChildren<Props>) {
         isOpen,
       }}
     >
-        <div
+      <div
         onMouseEnter={handleOpen}
         onFocus={handleOpen}
         onMouseLeave={handleClose}
         onBlur={handleClose}
         data-testid="sidebar-root"
-          className={clsx(classes.drawer, {
-            [classes.drawerOpen]: isOpen,
-          })}
-        >
-          {children}
-        </div>
-      </SidebarContext.Provider>
+        className={clsx(classes.drawer, {
+          [classes.drawerOpen]: isOpen,
+        })}
+      >
+        {children}
+      </div>
+    </SidebarContext.Provider>
   );
-}
+};
+
+export const Sidebar = ({ children }: React.PropsWithChildren<{}>) => {
+  const isMobileScreen = useMediaQuery<BackstageTheme>(theme =>
+    theme.breakpoints.down('xs'),
+  );
+
+  return isMobileScreen ? (
+    <MobileSidebar>{children}</MobileSidebar>
+  ) : (
+    <DesktopSidebar>{children}</DesktopSidebar>
+  );
+};

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

@@ -69,8 +69,9 @@ const useStyles = makeStyles<BackstageTheme>(theme => {
       justifyContent: 'center',
     },
     open: {
-      // Does not apply  on mobile
-      // width: drawerWidthOpen,
+      [theme.breakpoints.up('sm')]: {
+        width: drawerWidthOpen,
+      },
     },
     label: {
       // XXX (@koroeskohr): I can't seem to achieve the desired font-weight from the designs

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core';
 import React, {
   createContext,
   PropsWithChildren,
@@ -25,12 +25,20 @@ import { sidebarConfig } from './config';
 import { BackstageTheme } from '@backstage/theme';
 import { LocalStorage } from './localStorage';
 
-const useStyles = makeStyles<BackstageTheme, { isPinned: boolean }>({
-  root: {
-    width: '100%',
-    minHeight: '100%',
-    transition: 'padding-left 0.1s ease-out',
-  },
+const useStyles = makeStyles<BackstageTheme, { isPinned: boolean }>(
+  theme => ({
+    root: {
+      width: '100%',
+      minHeight: '100%',
+      transition: 'padding-left 0.1s ease-out',
+      [theme.breakpoints.up('sm')]: {
+        paddingLeft: ({ isPinned }) =>
+          isPinned
+            ? sidebarConfig.drawerWidthOpen
+            : sidebarConfig.drawerWidthClosed,
+      },
+    },
+  }),
   { name: 'BackstageSidebarPage' },
 );
 

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

@@ -20,6 +20,7 @@ import {
   BottomNavigationAction,
   BottomNavigationActionProps,
   makeStyles,
+  useMediaQuery,
 } from '@material-ui/core';
 import React, { useContext } from 'react';
 import { useLocation } from 'react-router-dom';
@@ -59,11 +60,15 @@ export const SidebarGroup = ({
   label,
   icon,
   value,
+  children,
 }: React.PropsWithChildren<SidebarGroupProps>) => {
   const classes = useStyles();
   const location = useLocation();
   const { selectedMenuItemIndex, setSelectedMenuItemIndex } =
     useContext(MobileSidebarContext);
+  const isMobileScreen = useMediaQuery<BackstageTheme>(theme =>
+    theme.breakpoints.down('xs'),
+  );
 
   const onChange = (_: React.ChangeEvent<{}>, value: number) => {
     if (value === selectedMenuItemIndex) {
@@ -79,8 +84,9 @@ export const SidebarGroup = ({
       !(selectedMenuItemIndex >= 0) &&
       to === location.pathname);
 
-  return (
-    // @ts-ignore Material UI issue: https://github.com/mui-org/material-ui/issues/27820
+  return isMobileScreen ? (
+    // Material UI issue: https://github.com/mui-org/material-ui/issues/27820
+    // @ts-ignore
     <BottomNavigationAction
       label={label}
       icon={icon}
@@ -91,5 +97,7 @@ export const SidebarGroup = ({
       selected={selected}
       classes={classes}
     />
+  ) : (
+    <>{children}</>
   );
 };

plugins/shortcuts/src/AddShortcut.tsx

@@ -31,7 +31,7 @@ import { alertApiRef, useApi } from '@backstage/core-plugin-api';
 
 const useStyles = makeStyles(theme => ({
   card: {
-    width: 400,
+    maxWidth: 400,
   },
   header: {
     marginBottom: theme.spacing(1),

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

@@ -13,17 +13,24 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
-import { List } from '@material-ui/core';
 import { InfoCard } from '@backstage/core-components';
+import { BackstageTheme } from '@backstage/theme';
+import { List, useMediaQuery } from '@material-ui/core';
+import React 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 isMobileScreen = useMediaQuery<BackstageTheme>(theme =>
+    theme.breakpoints.down('xs'),
+  );
+
+  return (
+    <InfoCard title="Appearance" variant="gridItem">
+      <List dense>
+        <UserSettingsThemeToggle />
+        {!isMobileScreen && <UserSettingsPinToggle />}
+      </List>
+    </InfoCard>
+  );
+};

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

@@ -28,7 +28,7 @@ type Props = {
 
 export const SettingsPage = ({ providerSettings }: Props) => {
   const isMobileScreen = useMediaQuery<BackstageTheme>(theme =>
-    theme.breakpoints.up('xs'),
+    theme.breakpoints.down('xs'),
   );
 
   return (