diff --git a/src/components/SideMenu/MenuItem.tsx b/src/components/SideMenu/MenuItem.tsx index 9d03725a..4f903e54 100644 --- a/src/components/SideMenu/MenuItem.tsx +++ b/src/components/SideMenu/MenuItem.tsx @@ -40,19 +40,24 @@ export class MenuItem extends React.Component { render() { const { item, withoutChildren } = this.props; return ( - + {item.type === 'operation' ? ( ) : ( - - {item.name} - {(item.depth > 0 && - item.items.length > 0 && ( - - )) || - null} - - )} + + {item.name} + {(item.depth > 0 && + item.items.length > 0 && ( + + )) || + null} + + )} {!withoutChildren && item.items && item.items.length > 0 && ( diff --git a/src/components/SideMenu/styled.elements.ts b/src/components/SideMenu/styled.elements.ts index f945b2b2..379cb24d 100644 --- a/src/components/SideMenu/styled.elements.ts +++ b/src/components/SideMenu/styled.elements.ts @@ -5,7 +5,7 @@ import styled, { css, withProps } from '../../styled-components'; export const OperationBadge = withProps<{ type: string }>(styled.span).attrs({ className: props => `operation-type ${props.type}`, -}) ` +})` width: 26px; display: inline-block; height: ${props => props.theme.code.fontSize};; @@ -70,7 +70,7 @@ function menuItemActiveBg(depth): string { } } -export const MenuItemUl = withProps<{ active: boolean }>(styled.ul) ` +export const MenuItemUl = withProps<{ active: boolean }>(styled.ul)` margin: 0; padding: 0; @@ -81,7 +81,7 @@ export const MenuItemUl = withProps<{ active: boolean }>(styled.ul) ` ${props => (props.active ? '' : 'display: none;')}; `; -export const MenuItemLi = withProps<{ depth: number }>(styled.li) ` +export const MenuItemLi = withProps<{ depth: number }>(styled.li)` list-style: none inside none; overflow: hidden; text-overflow: ellipsis; @@ -121,12 +121,13 @@ export const MenuItemLabel = withProps<{ classnames('-depth' + props.depth, { active: props.active, }), -}) ` +})` cursor: pointer; color: ${props => (props.active ? props.theme.colors.main : props.theme.colors.text)}; margin: 0; padding: 12.5px ${props => props.theme.spacingUnit}px; - ${({ depth, type, theme }) => type === 'section' && depth > 1 && 'padding-left: ' + theme.spacingUnit * 2 + 'px;' || ''} + ${({ depth, type, theme }) => + (type === 'section' && depth > 1 && 'padding-left: ' + theme.spacingUnit * 2 + 'px;') || ''} display: flex; justify-content: space-between; font-family: ${props => props.theme.headingsFont.family}; @@ -140,7 +141,7 @@ export const MenuItemLabel = withProps<{ } `; -export const MenuItemTitle = withProps<{ width?: string }>(styled.span) ` +export const MenuItemTitle = withProps<{ width?: string }>(styled.span)` display: inline-block; vertical-align: middle; width: ${props => (props.width ? props.width : 'auto')};