From aedf77aab99d5504e60cc594b8b6f282da36dd88 Mon Sep 17 00:00:00 2001 From: Yi Cai Date: Wed, 12 Mar 2025 16:07:01 -0400 Subject: [PATCH 1/4] fix(sidebar): wrap long menu item label in sidebar Signed-off-by: Yi Cai --- packages/app/src/components/Root/Root.tsx | 177 +++++++++++++--------- 1 file changed, 102 insertions(+), 75 deletions(-) diff --git a/packages/app/src/components/Root/Root.tsx b/packages/app/src/components/Root/Root.tsx index 4f959a478b..2061b8a0ae 100644 --- a/packages/app/src/components/Root/Root.tsx +++ b/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,13 +118,13 @@ const SideBarItemWrapper = (props: SidebarItemProps) => { const renderIcon = (iconName: string) => () => ; -const renderExpandIcon = (expand: boolean, isSecondLevelMenuItem = false) => { +const renderExpandIcon = (expand: boolean) => { return expand ? ( ) : ( @@ -131,7 +132,7 @@ const renderExpandIcon = (expand: boolean, isSecondLevelMenuItem = false) => { 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 = ({ + menuItems, + isOpen, + renderItem, + sx = {}, +}) => { + if (!menuItems || menuItems.length === 0) return null; + + return ( + + + {menuItems.map(item => renderItem(item))} + + + ); +}; + 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 => ( - - - null} - text={child.title} - to={child.to ?? ''} - /> - - - ))} - + ( + 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 ( - - - {child.children && child.children.length === 0 && ( - - {getMenuItem(child, true)} - - )} - {child.children && child.children.length > 0 && ( - - handleClick(child.name)} - > - {child.children.length > 0 && - renderExpandIcon(isNestedMenuOpen, true)} - - {renderExpandableNestedMenuItems(child, isNestedMenuOpen)} - - )} - - - ); - })} - + { + const isNestedMenuOpen = openItems[child.name] || false; + return ( + + {child.children && child.children.length === 0 ? ( + getMenuItem(child, true) + ) : ( + <> + handleClick(child.name)} + > + {child.children!.length > 0 && + renderExpandIcon(isNestedMenuOpen)} + + {renderExpandableNestedMenuItems(child, isNestedMenuOpen)} + + )} + + ); + }} + /> ); }; From d39796516027323d2fb87cdfb9bf89461e4be19f Mon Sep 17 00:00:00 2001 From: Yi Cai Date: Wed, 12 Mar 2025 16:16:43 -0400 Subject: [PATCH 2/4] prettier fix Signed-off-by: Yi Cai --- packages/app/src/components/Root/Root.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/app/src/components/Root/Root.tsx b/packages/app/src/components/Root/Root.tsx index 2061b8a0ae..6f0c7b93bf 100644 --- a/packages/app/src/components/Root/Root.tsx +++ b/packages/app/src/components/Root/Root.tsx @@ -22,11 +22,11 @@ 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'; import ListItem from '@mui/material/ListItem'; +import { SxProps } from '@mui/material/styles'; import { makeStyles } from 'tss-react/mui'; import DynamicRootContext, { From 1cd3eb1dfeaaeff5109ec3ddf3322d009a9469fd Mon Sep 17 00:00:00 2001 From: Yi Cai Date: Wed, 19 Mar 2025 08:44:46 -0400 Subject: [PATCH 3/4] addressed the review comments Signed-off-by: Yi Cai --- packages/app/src/components/Root/Root.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/app/src/components/Root/Root.tsx b/packages/app/src/components/Root/Root.tsx index 6f0c7b93bf..726f96fb8e 100644 --- a/packages/app/src/components/Root/Root.tsx +++ b/packages/app/src/components/Root/Root.tsx @@ -226,7 +226,7 @@ export const Root = ({ children }: PropsWithChildren<{}>) => { menuItems={menuItem.children ?? []} isOpen={isSubMenuOpen} sx={{ - paddingLeft: '4rem', + paddingLeft: '4.25rem', fontSize: 12, '& span.MuiTypography-subtitle2': { fontSize: 12, From 9667ceba7d66a565b560aa9dd94abe36cf7b1212 Mon Sep 17 00:00:00 2001 From: Yi Cai Date: Fri, 21 Mar 2025 12:57:31 -0400 Subject: [PATCH 4/4] addressed review comments Signed-off-by: Yi Cai --- packages/app/src/components/Root/Root.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/app/src/components/Root/Root.tsx b/packages/app/src/components/Root/Root.tsx index 726f96fb8e..b1cb48f094 100644 --- a/packages/app/src/components/Root/Root.tsx +++ b/packages/app/src/components/Root/Root.tsx @@ -231,9 +231,11 @@ export const Root = ({ children }: PropsWithChildren<{}>) => { '& span.MuiTypography-subtitle2': { fontSize: 12, whiteSpace: 'normal', + wordBreak: 'break-word', + overflowWrap: 'break-word', }, '& div': { width: 36, boxShadow: '-1px 0 0 0 #3c3f42' }, - "& div[class*='BackstageSidebarItem-secondaryAction']": { width: 18 }, + "& div[class*='BackstageSidebarItem-secondaryAction']": { width: 20 }, a: { width: 'auto', '@media (min-width: 600px)': { width: 160 }, @@ -273,6 +275,8 @@ export const Root = ({ children }: PropsWithChildren<{}>) => { width: 78, fontSize: 12, whiteSpace: 'normal', + wordBreak: 'break-word', + overflowWrap: 'break-word', }, "& div[class*='BackstageSidebarItem-secondaryAction']": { width: