fix(sidebar): wrap long menu item label in sidebar

Signed-off-by: Yi Cai <[email protected]>

Author: ciiay

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

@@ -22,6 +22,7 @@ import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import ExpandMore from '@mui/icons-material/ExpandMore';
 import MuiMenuIcon from '@mui/icons-material/Menu';
 import SearchIcon from '@mui/icons-material/Search';
+import { SxProps } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Collapse from '@mui/material/Collapse';
 import List from '@mui/material/List';
@@ -117,21 +118,21 @@ const SideBarItemWrapper = (props: SidebarItemProps) => {
 
 const renderIcon = (iconName: string) => () => <MenuIcon icon={iconName} />;
 
-const renderExpandIcon = (expand: boolean, isSecondLevelMenuItem = false) => {
+const renderExpandIcon = (expand: boolean) => {
   return expand ? (
     <ExpandMore
       fontSize="small"
       style={{
         display: 'flex',
-        marginLeft: isSecondLevelMenuItem ? '' : '0.5rem',
+        marginLeft: 8,
       }}
     />
   ) : (
     <ChevronRightIcon
       fontSize="small"
       style={{
         display: 'flex',
-        marginLeft: isSecondLevelMenuItem ? '' : '0.5rem',
+        marginLeft: 8,
       }}
     />
   );
@@ -161,6 +162,30 @@ const getMenuItem = (menuItem: ResolvedMenuItem, isNestedMenuItem = false) => {
   );
 };
 
+interface ExpandableMenuListProps {
+  menuItems: ResolvedMenuItem[];
+  isOpen: boolean;
+  renderItem: (item: ResolvedMenuItem) => JSX.Element;
+  sx?: SxProps;
+}
+
+const ExpandableMenuList: React.FC<ExpandableMenuListProps> = ({
+  menuItems,
+  isOpen,
+  renderItem,
+  sx = {},
+}) => {
+  if (!menuItems || menuItems.length === 0) return null;
+
+  return (
+    <Collapse in={isOpen} timeout="auto" unmountOnExit>
+      <List disablePadding sx={sx}>
+        {menuItems.map(item => renderItem(item))}
+      </List>
+    </Collapse>
+  );
+};
+
 export const Root = ({ children }: PropsWithChildren<{}>) => {
   const {
     classes: { pageWithoutFixHeight },
@@ -197,85 +222,87 @@ export const Root = ({ children }: PropsWithChildren<{}>) => {
     isSubMenuOpen: boolean,
   ) => {
     return (
-      <>
-        {menuItem.children &&
-          menuItem.children.length > 0 &&
-          menuItem.children?.map(child => (
-            <Collapse
-              key={child.name}
-              in={isSubMenuOpen}
-              timeout="auto"
-              unmountOnExit
-            >
-              <List
-                disablePadding
-                sx={{
-                  paddingLeft: '4rem',
-                  fontSize: 12,
-                  '& span.MuiTypography-subtitle2': { fontSize: 12 },
-                  '& div': { width: '36px', boxShadow: '-1px 0 0 0 #3c3f42' },
-                }}
-              >
-                <SideBarItemWrapper
-                  icon={() => null}
-                  text={child.title}
-                  to={child.to ?? ''}
-                />
-              </List>
-            </Collapse>
-          ))}
-      </>
+      <ExpandableMenuList
+        menuItems={menuItem.children ?? []}
+        isOpen={isSubMenuOpen}
+        sx={{
+          paddingLeft: '4rem',
+          fontSize: 12,
+          '& span.MuiTypography-subtitle2': {
+            fontSize: 12,
+            whiteSpace: 'normal',
+          },
+          '& div': { width: 36, boxShadow: '-1px 0 0 0 #3c3f42' },
+          "& div[class*='BackstageSidebarItem-secondaryAction']": { width: 18 },
+          a: {
+            width: 'auto',
+            '@media (min-width: 600px)': { width: 160 },
+          },
+        }}
+        renderItem={child => (
+          <SideBarItemWrapper
+            key={child.title}
+            icon={() => null}
+            text={child.title}
+            to={child.to ?? ''}
+          />
+        )}
+      />
     );
   };
+
   const renderExpandableMenuItems = (
     menuItem: ResolvedMenuItem,
     isOpen: boolean,
   ) => {
     return (
-      <>
-        {menuItem.children &&
-          menuItem.children.length > 0 &&
-          menuItem.children?.map(child => {
-            const isNestedMenuOpen = openItems[child.name] || false;
-            return (
-              <Collapse
-                key={child.name}
-                in={isOpen}
-                timeout="auto"
-                unmountOnExit
-              >
-                <List disablePadding>
-                  {child.children && child.children.length === 0 && (
-                    <ListItem disableGutters disablePadding>
-                      {getMenuItem(child, true)}
-                    </ListItem>
-                  )}
-                  {child.children && child.children.length > 0 && (
-                    <ListItem
-                      disableGutters
-                      disablePadding
-                      sx={{
-                        display: 'block',
-                        '& .MuiButton-label': { paddingLeft: '2rem' },
-                      }}
-                    >
-                      <SideBarItemWrapper
-                        key={child.name}
-                        icon={renderIcon(child.icon ?? '')}
-                        text={child.title}
-                        onClick={() => handleClick(child.name)}
-                      >
-                        {child.children.length > 0 &&
-                          renderExpandIcon(isNestedMenuOpen, true)}
-                      </SideBarItemWrapper>
-                      {renderExpandableNestedMenuItems(child, isNestedMenuOpen)}
-                    </ListItem>
-                  )}
-                </List>
-              </Collapse>
-            );
-          })}
-      </>
+      <ExpandableMenuList
+        menuItems={menuItem.children ?? []}
+        isOpen={isOpen}
+        renderItem={child => {
+          const isNestedMenuOpen = openItems[child.name] || false;
+          return (
+            <ListItem
+              key={child.name}
+              disableGutters
+              disablePadding
+              sx={{
+                display: 'block',
+                '& .MuiButton-label': { paddingLeft: '2rem' },
+                "& span[class*='-subtitle2']": {
+                  width: 78,
+                  fontSize: 12,
+                  whiteSpace: 'normal',
+                },
+                "& div[class*='BackstageSidebarItem-secondaryAction']": {
+                  width:
+                    child.children && child.children.length === 0 ? 18 : 48,
+                },
+                a: {
+                  width: 'auto',
+                  '@media (min-width: 600px)': { width: 224 },
+                },
+              }}
+            >
+              {child.children && child.children.length === 0 ? (
+                getMenuItem(child, true)
+              ) : (
+                <>
+                  <SideBarItemWrapper
+                    icon={renderIcon(child.icon ?? '')}
+                    text={child.title}
+                    onClick={() => handleClick(child.name)}
+                  >
+                    {child.children!.length > 0 &&
+                      renderExpandIcon(isNestedMenuOpen)}
+                  </SideBarItemWrapper>
+                  {renderExpandableNestedMenuItems(child, isNestedMenuOpen)}
+                </>
+              )}
+            </ListItem>
+          );
+        }}
+      />
     );
   };