fix: Deeply nested document breadcrumb menu

app/components/DropdownMenu/DropdownMenu.js

@@ -21,7 +21,7 @@ type Props = {
   children?: Children,
   className?: string,
   style?: Object,
-  leftAlign?: boolean,
+  position?: 'left' | 'right' | 'center',
 };
 
 @observer
@@ -44,8 +44,10 @@ class DropdownMenu extends React.Component<Props> {
         const targetRect = currentTarget.getBoundingClientRect();
         this.top = targetRect.bottom - bodyRect.top;
 
-        if (this.props.leftAlign) {
+        if (this.props.position === 'left') {
           this.left = targetRect.left;
+        } else if (this.props.position === 'center') {
+          this.left = targetRect.left + targetRect.width / 2;
         } else {
           this.right = bodyRect.width - targetRect.left - targetRect.width;
         }
@@ -61,7 +63,7 @@ class DropdownMenu extends React.Component<Props> {
   };
 
   render() {
-    const { className, label, children } = this.props;
+    const { className, label, position, children } = this.props;
 
     return (
       <div className={className}>
@@ -77,24 +79,28 @@ class DropdownMenu extends React.Component<Props> {
                 {label}
               </Label>
               {portal(
-                <Menu
-                  onClick={
-                    typeof children === 'function'
-                      ? undefined
-                      : ev => {
-                          ev.stopPropagation();
-                          closePortal();
-                        }
-                  }
-                  style={this.props.style}
+                <Position
+                  position={position}
                   top={this.top}
                   left={this.left}
                   right={this.right}
                 >
-                  {typeof children === 'function'
-                    ? children({ closePortal })
-                    : children}
-                </Menu>
+                  <Menu
+                    onClick={
+                      typeof children === 'function'
+                        ? undefined
+                        : ev => {
+                            ev.stopPropagation();
+                            closePortal();
+                          }
+                    }
+                    style={this.props.style}
+                  >
+                    {typeof children === 'function'
+                      ? children({ closePortal })
+                      : children}
+                  </Menu>
+                </Position>
               )}
             </React.Fragment>
           )}
@@ -112,16 +118,19 @@ const Label = styled(Flex).attrs({
   cursor: pointer;
 `;
 
-const Menu = styled.div`
-  animation: ${fadeAndScaleIn} 200ms ease;
-  transform-origin: ${({ left }) => (left !== undefined ? '25%' : '75%')} 0;
-
+const Position = styled.div`
   position: absolute;
   ${({ left }) => (left !== undefined ? `left: ${left}px` : '')};
   ${({ right }) => (right !== undefined ? `right: ${right}px` : '')};
   top: ${({ top }) => top}px;
   z-index: 1000;
+  transform: ${props =>
+    props.position === 'center' ? 'translateX(-50%)' : 'initial'};
+`;
 
+const Menu = styled.div`
+  animation: ${fadeAndScaleIn} 200ms ease;
+  transform-origin: ${props => (props.left !== undefined ? '25%' : '75%')} 0;
   background: ${props => props.theme.menuBackground};
   border-radius: 2px;
   padding: 0.5em 0;