Move ExpandButton to Items & handle expanded as pinned

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

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

@@ -22,8 +22,8 @@ import BuildRoundedIcon from '@material-ui/icons/BuildRounded';
 import CreateComponentIcon from '@material-ui/icons/AddCircleOutline';
 import MenuBookIcon from '@material-ui/icons/MenuBook';
 import AcUnitIcon from '@material-ui/icons/AcUnit';
-import { Sidebar, SidebarExpandButton } from './Bar';
-import { SidebarItem, SidebarSearchField } from './Items';
+import { Sidebar } from './Bar';
+import { SidebarItem, SidebarSearchField, SidebarExpandButton } from './Items';
 import { SidebarSubmenuItem } from './SidebarSubmenuItem';
 import { SidebarSubmenu } from './SidebarSubmenu';
 import { SidebarPinStateContext } from '.';

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

@@ -17,19 +17,11 @@
 import { makeStyles } from '@material-ui/core/styles';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import classnames from 'classnames';
-import React, {
-  useState,
-  useContext,
-  PropsWithChildren,
-  useRef,
-  useEffect,
-} from 'react';
+import React, { useState, useContext, PropsWithChildren, useRef } from 'react';
 import { sidebarConfig, SidebarContext } from './config';
 import { BackstageTheme } from '@backstage/theme';
 import { SidebarPinStateContext } from './Page';
 import { MobileSidebar } from './MobileSidebar';
-import DoubleArrowRight from './icons/DoubleArrowRight';
-import DoubleArrowLeft from './icons/DoubleArrowLeft';
 
 export type SidebarClassKey = 'drawer' | 'drawerOpen';
 
@@ -60,19 +52,6 @@ const useStyles = makeStyles<BackstageTheme>(
         display: 'none',
       },
     },
-    expandButton: {
-      background: 'none',
-      border: 'none',
-      color: theme.palette.navigation.color,
-      width: '100%',
-      cursor: 'pointer',
-      position: 'relative',
-      height: 48,
-    },
-    arrows: {
-      position: 'absolute',
-      right: 10,
-    },
     drawerOpen: {
       width: sidebarConfig.drawerWidthOpen,
       transition: theme.transitions.create('width', {
@@ -109,7 +88,9 @@ const DesktopSidebar = ({
   );
   const [state, setState] = useState(State.Closed);
   const hoverTimerRef = useRef<number>();
-  const { isPinned } = useContext(SidebarPinStateContext);
+  const { isPinned, toggleSidebarPinState } = useContext(
+    SidebarPinStateContext,
+  );
 
   const handleOpen = () => {
     if (isPinned || disableExpandOnHover) {
@@ -152,8 +133,10 @@ const DesktopSidebar = ({
   const setOpen = (open: boolean) => {
     if (open) {
       setState(State.Open);
+      toggleSidebarPinState();
     } else {
       setState(State.Closed);
+      toggleSidebarPinState();
     }
   };
 
@@ -203,40 +186,3 @@ export const Sidebar = ({
     </DesktopSidebar>
   );
 };
-
-/**
- * A button which allows you to expand the sidebar when clicked.
- * Use optionally to replace sidebar's expand-on-hover feature with expand-on-click.
- *
- * @public
- */
-export const SidebarExpandButton = () => {
-  const classes = useStyles();
-  const { isOpen, setOpen } = useContext(SidebarContext);
-  const { isPinned } = useContext(SidebarPinStateContext);
-  const isSmallScreen = useMediaQuery<BackstageTheme>(
-    theme => theme.breakpoints.down('md'),
-    { noSsr: true },
-  );
-
-  if (isPinned || isSmallScreen || !setOpen) {
-    return null;
-  }
-
-  const handleClick = () => {
-    setOpen(!isOpen);
-  };
-
-  return (
-    <button
-      onClick={handleClick}
-      className={classes.expandButton}
-      aria-label="Expand Sidebar"
-      data-testid="sidebar-expand-button"
-    >
-      <div className={classes.arrows}>
-        {isOpen ? <DoubleArrowLeft /> : <DoubleArrowRight />}
-      </div>
-    </button>
-  );
-};

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

@@ -20,8 +20,8 @@ import { createEvent, fireEvent, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import HomeIcon from '@material-ui/icons/Home';
 import CreateComponentIcon from '@material-ui/icons/AddCircleOutline';
-import { Sidebar, SidebarExpandButton } from './Bar';
-import { SidebarItem, SidebarSearchField } from './Items';
+import { Sidebar } from './Bar';
+import { SidebarItem, SidebarSearchField, SidebarExpandButton } from './Items';
 import { renderHook } from '@testing-library/react-hooks';
 import { hexToRgb, makeStyles } from '@material-ui/core/styles';
 

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

@@ -50,8 +50,8 @@ import {
   SidebarSubmenuProps,
   SidebarSubmenu,
 } from '.';
-import { isLocationMatch } from './utils';
-import { Location } from 'history';
+import DoubleArrowLeft from './icons/DoubleArrowLeft';
+import DoubleArrowRight from './icons/DoubleArrowRight';
 
 export type SidebarItemClassKey =
   | 'root'
@@ -157,6 +157,19 @@ const useStyles = makeStyles<BackstageTheme>(
       submenuArrow: {
         display: 'flex',
       },
+      expandButton: {
+        background: 'none',
+        border: 'none',
+        color: theme.palette.navigation.color,
+        width: '100%',
+        cursor: 'pointer',
+        position: 'relative',
+        height: 48,
+      },
+      arrows: {
+        position: 'absolute',
+        right: 10,
+      },
       selected: {
         '&$root': {
           borderLeft: `solid ${selectedIndicatorWidth}px ${theme.palette.navigation.indicator}`,
@@ -706,3 +719,39 @@ export const SidebarScrollWrapper = styled('div')(({ theme }) => {
     '&:hover': scrollbarStyles,
   };
 });
+
+/**
+ * A button which allows you to expand the sidebar when clicked.
+ * Use optionally to replace sidebar's expand-on-hover feature with expand-on-click.
+ *
+ * @public
+ */
+export const SidebarExpandButton = () => {
+  const classes = useStyles();
+  const { isOpen, setOpen } = useContext(SidebarContext);
+  const isSmallScreen = useMediaQuery<BackstageTheme>(
+    theme => theme.breakpoints.down('md'),
+    { noSsr: true },
+  );
+
+  if (isSmallScreen || !setOpen) {
+    return null;
+  }
+
+  const handleClick = () => {
+    setOpen(!isOpen);
+  };
+
+  return (
+    <button
+      onClick={handleClick}
+      className={classes.expandButton}
+      aria-label="Expand Sidebar"
+      data-testid="sidebar-expand-button"
+    >
+      <div className={classes.arrows}>
+        {isOpen ? <DoubleArrowLeft /> : <DoubleArrowRight />}
+      </div>
+    </button>
+  );
+};

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

@@ -29,7 +29,6 @@ import { BackstageTheme } from '@backstage/theme';
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
 import ArrowDropUpIcon from '@material-ui/icons/ArrowDropUp';
 import { SidebarItemWithSubmenuContext } from './config';
-import { SidebarContext } from '../..';
 import { isLocationMatch } from './utils';
 
 const useStyles = makeStyles<BackstageTheme>(theme => ({
@@ -123,13 +122,9 @@ export const SidebarSubmenuItem = (props: SidebarSubmenuItemProps) => {
   const { title, to, icon: Icon, dropdownItems } = props;
   const classes = useStyles();
   const { setIsHoveredOn } = useContext(SidebarItemWithSubmenuContext);
-  const { setOpen } = useContext(SidebarContext);
 
   const closeSubmenu = () => {
     setIsHoveredOn(false);
-    if (setOpen) {
-      setOpen(false);
-    }
   };
   const toLocation = useResolvedPath(to);
   const currentLocation = useLocation();

packages/core-components/src/layout/Sidebar/index.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-export { Sidebar, SidebarExpandButton } from './Bar';
+export { Sidebar } from './Bar';
 export { MobileSidebar } from './MobileSidebar';
 export { SidebarGroup } from './SidebarGroup';
 export type { SidebarGroupProps } from './SidebarGroup';
@@ -35,6 +35,7 @@ export {
   SidebarSpace,
   SidebarSpacer,
   SidebarScrollWrapper,
+  SidebarExpandButton,
 } from './Items';
 export type {
   SidebarItemClassKey,