From 2a5500427704ededcb17c3d599e3b61bbb07a8e9 Mon Sep 17 00:00:00 2001 From: Alisa Wong Date: Fri, 4 Mar 2022 12:26:55 -0500 Subject: [PATCH] add names to sidebar submenu styles Signed-off-by: Alisa Wong --- .../src/layout/Sidebar/SidebarSubmenu.tsx | 107 +++++++++--------- .../src/layout/Sidebar/SidebarSubmenuItem.tsx | 103 +++++++++-------- 2 files changed, 108 insertions(+), 102 deletions(-) diff --git a/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx b/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx index 60175e2439..5a511b2094 100644 --- a/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx +++ b/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx @@ -26,62 +26,65 @@ import { import { BackstageTheme } from '@backstage/theme'; const useStyles = (props: { left: number }) => - makeStyles(theme => ({ - root: { - zIndex: 1000, - position: 'relative', - overflow: 'visible', - width: theme.spacing(7) + 1, - }, - drawer: { - display: 'flex', - flexFlow: 'column nowrap', - alignItems: 'flex-start', - position: 'fixed', - [theme.breakpoints.up('sm')]: { - marginLeft: props.left, - transition: theme.transitions.create('margin-left', { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.shortest, - }), - }, - top: 0, - bottom: 0, - padding: 0, - background: theme.palette.navigation.submenu?.background ?? '#404040', - overflowX: 'hidden', - msOverflowStyle: 'none', - scrollbarWidth: 'none', - cursor: 'default', - width: submenuConfig.drawerWidthClosed, - transitionDelay: `${submenuConfig.defaultOpenDelayMs}ms`, - '& > *': { - flexShrink: 0, - }, - '&::-webkit-scrollbar': { - display: 'none', - }, - }, - drawerOpen: { - width: submenuConfig.drawerWidthOpen, - [theme.breakpoints.down('xs')]: { - width: '100%', + makeStyles( + theme => ({ + root: { + zIndex: 1000, position: 'relative', - paddingLeft: theme.spacing(3), - left: 0, + overflow: 'visible', + width: theme.spacing(7) + 1, + }, + drawer: { + display: 'flex', + flexFlow: 'column nowrap', + alignItems: 'flex-start', + position: 'fixed', + [theme.breakpoints.up('sm')]: { + marginLeft: props.left, + transition: theme.transitions.create('margin-left', { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.shortest, + }), + }, top: 0, + bottom: 0, + padding: 0, + background: theme.palette.navigation.submenu?.background ?? '#404040', + overflowX: 'hidden', + msOverflowStyle: 'none', + scrollbarWidth: 'none', + cursor: 'default', + width: submenuConfig.drawerWidthClosed, + transitionDelay: `${submenuConfig.defaultOpenDelayMs}ms`, + '& > *': { + flexShrink: 0, + }, + '&::-webkit-scrollbar': { + display: 'none', + }, }, - }, - title: { - fontSize: 24, - fontWeight: 500, - color: '#FFF', - padding: 20, - [theme.breakpoints.down('xs')]: { - display: 'none', + drawerOpen: { + width: submenuConfig.drawerWidthOpen, + [theme.breakpoints.down('xs')]: { + width: '100%', + position: 'relative', + paddingLeft: theme.spacing(3), + left: 0, + top: 0, + }, }, - }, - })); + title: { + fontSize: 24, + fontWeight: 500, + color: '#FFF', + padding: 20, + [theme.breakpoints.down('xs')]: { + display: 'none', + }, + }, + }), + { name: 'BackstageSidebarSubmenu' }, + ); /** * Holds a title for text Header of a sidebar submenu and children diff --git a/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx b/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx index d204728bcf..5c9dce010d 100644 --- a/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx +++ b/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx @@ -26,59 +26,62 @@ import ArrowDropUpIcon from '@material-ui/icons/ArrowDropUp'; import { SidebarItemWithSubmenuContext } from './config'; import { isLocationMatch } from './utils'; -const useStyles = makeStyles(theme => ({ - item: { - height: 48, - width: '100%', - '&:hover': { +const useStyles = makeStyles( + theme => ({ + item: { + height: 48, + width: '100%', + '&:hover': { + background: '#6f6f6f', + color: theme.palette.navigation.selectedColor, + }, + display: 'flex', + alignItems: 'center', + color: theme.palette.navigation.color, + padding: 20, + cursor: 'pointer', + position: 'relative', + background: 'none', + border: 'none', + }, + itemContainer: { + width: '100%', + }, + selected: { background: '#6f6f6f', - color: theme.palette.navigation.selectedColor, + color: '#FFF', }, - display: 'flex', - alignItems: 'center', - color: theme.palette.navigation.color, - padding: 20, - cursor: 'pointer', - position: 'relative', - background: 'none', - border: 'none', - }, - itemContainer: { - width: '100%', - }, - selected: { - background: '#6f6f6f', - color: '#FFF', - }, - label: { - margin: 14, - marginLeft: 7, - fontSize: 14, - }, - dropdownArrow: { - position: 'absolute', - right: 21, - }, - dropdown: { - display: 'flex', - flexDirection: 'column', - alignItems: 'end', - }, - dropdownItem: { - width: '100%', - padding: '10px 0 10px 0', - }, - textContent: { - color: theme.palette.navigation.color, - display: 'flex', - justifyContent: 'center', - [theme.breakpoints.down('xs')]: { - display: 'block', - paddingLeft: theme.spacing(4), + label: { + margin: 14, + marginLeft: 7, + fontSize: 14, }, - fontSize: '14px', - }, -})); + dropdownArrow: { + position: 'absolute', + right: 21, + }, + dropdown: { + display: 'flex', + flexDirection: 'column', + alignItems: 'end', + }, + dropdownItem: { + width: '100%', + padding: '10px 0 10px 0', + }, + textContent: { + color: theme.palette.navigation.color, + display: 'flex', + justifyContent: 'center', + [theme.breakpoints.down('xs')]: { + display: 'block', + paddingLeft: theme.spacing(4), + }, + fontSize: '14px', + }, + }), + { name: 'BackstageSidebarSubmenuItem' }, +); /** * Clickable item displayed when submenu item is clicked.