title: React - Why are my links being rendered below my button?
body: <p><a href="https://i.stack.imgur.com/Qmm4z.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Qmm4z.jpg" alt="enter image description here" /></a></p>
  <p>Here I have an image of the current header render. The headercomprises of a HeaderMenu and 3 Links. The links are working fine, but the HeaderMenu is causing the links to fall below it. HeaderMenu contains a div which wraps a Button and Popper, acting as a dropdown menu.</p>
  <p>I'm also not sure if this design structure is correct, but for the styles, I have one styles.js file which I pull from. I then pass these styles down as props to the smaller components for rendering. That's why the components here have a props classes that comes from useStyles in index.js.</p>
  <p><strong>Header.js</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { AppBar, Button, Link, Toolbar, Typography } from '@material-ui/core'
  import HeaderMenu from './HeaderMenu.js'
  
  const Header = (props) =&gt; {
    const { classes } = props
  
    return (
          &lt;AppBar position="static" color="default" elevation={0} className={classes.appBar}&gt;
          &lt;Toolbar className={classes.toolbar}&gt;
            &lt;Typography variant="h6" color="inherit" noWrap className={classes.toolbarTitle}&gt;
              Company name
            &lt;/Typography&gt;
            &lt;nav&gt;
              &lt;HeaderMenu classes={classes}/&gt;
              &lt;Link variant="button" color="textPrimary" href="#" className={classes.link}&gt;
                Here
              &lt;/Link&gt;
              &lt;Link variant="button" color="textPrimary" href="#" className={classes.link}&gt;
                Enterprise
              &lt;/Link&gt;
              &lt;Link variant="button" color="textPrimary" href="#" className={classes.link}&gt;
                Support
              &lt;/Link&gt;
            &lt;/nav&gt;
            &lt;Button href="#" color="primary" variant="outlined" className={classes.link}&gt;
              Login
            &lt;/Button&gt;
          &lt;/Toolbar&gt;
        &lt;/AppBar&gt;
    )
  }
  
  export default Header</code></pre>
  </div>
  </div>
  </p>
  <p><strong>HeaderMenu.js</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react'
  import { Button, ClickAwayListener, Grow, Paper, Popper, MenuItem, MenuList } from '@material-ui/core'
  
  const HeaderMenu = (props) =&gt; {
    const { classes } = props
    const [open, setOpen] = React.useState(false)
    const anchorRef = React.useRef(null)
  
    const handleToggle = () =&gt; {
      setOpen((prevOpen) =&gt; !prevOpen)
    }
  
    const handleClose = (event) =&gt; {
      if (anchorRef.current &amp;&amp; anchorRef.current.contains(event.target)) {
        return
      }
  
      setOpen(false)
    }
  
    function handleListKeyDown (event) {
      if (event.key === 'Tab') {
        event.preventDefault()
        setOpen(false)
      }
    }
  
    // return focus to the button when we transitioned from !open -&gt; open
    const prevOpen = React.useRef(open)
    React.useEffect(() =&gt; {
      if (prevOpen.current === true &amp;&amp; open === false) {
        anchorRef.current.focus()
      }
  
      prevOpen.current = open
    }, [open])
  
    return (
      &lt;div className={classes.link}&gt;
          &lt;Button
            ref={anchorRef}
            aria-controls={open ? 'menu-list-grow' : undefined}
            aria-haspopup="true"
            onClick={handleToggle}
          &gt;
            Details
          &lt;/Button&gt;
          &lt;Popper open={open} anchorEl={anchorRef.current} role={undefined} transition disablePortal&gt;
            {({ TransitionProps, placement }) =&gt; (
              &lt;Grow
                {...TransitionProps}
                style={{ transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }}
              &gt;
                &lt;Paper&gt;
                  &lt;ClickAwayListener onClickAway={handleClose}&gt;
                    &lt;MenuList autoFocusItem={open} id="menu-list-grow" onKeyDown={handleListKeyDown}&gt;
                      &lt;MenuItem onClick={handleClose}&gt;Profile&lt;/MenuItem&gt;
                      &lt;MenuItem onClick={handleClose}&gt;My account&lt;/MenuItem&gt;
                      &lt;MenuItem onClick={handleClose}&gt;Logout&lt;/MenuItem&gt;
                    &lt;/MenuList&gt;
                  &lt;/ClickAwayListener&gt;
                &lt;/Paper&gt;
              &lt;/Grow&gt;
            )}
          &lt;/Popper&gt;
      &lt;/div&gt;
    )
  }
  
  export default HeaderMenu</code></pre>
  </div>
  </div>
  </p>