javascript - Can't get NAV buttons to move to the right in react

Question

Here is my current Mobile Header view:

I want to set it something like this, I've only been able to achevie so by setting specific left margins, which doesn't make it responsive. Both the profile avator and the menu icon are wrapped in the same <div>, yet I cant for the life of me figure out how to push the div to the RIGHT on my header.

          <Toolbar> 
                <div className={classes.toolbarTitle}>
                    {Logo}
                </div>
                <div style={{ float: 'right', display: "flex", alignItems: "right"}}>
                    {getUserAccount()}
                    <IconButton
                        {...{
                            edge: "start",
                            color: "inherit",
                            "aria-label": "menu",
                            "aria-haspopup": "true",
                            onClick: handleDrawerOpen,
                        }}
                    >
                        <MenuIcon/>
                    </IconButton>
                </div>
                <Drawer
                {...{
                    anchor: "right",
                    open: drawerOpen,
                    onClose: handleDrawerClose,
                }}
                >
                <div className={classes.drawerContainer}>{getDrawerChoices()}</div>
                <div className={classes.drawerContainer}>
                <Switch
                            checked={isDarkMode}
                            onChange={toggleDarkMode}
                        />
                        </div>  

                </Drawer>
          </Toolbar>
        );
      };

Specifically here is the wrapped container for the two elements. I've tried float and a bunch of other CSS but I cannot get it working, the div seems to just stick to the left of the screen!

                <div style={{ float: 'right', display: "flex", alignItems: "right"}}>
                    {getUserAccount()}
                    <IconButton
                        {...{
                            edge: "start",
                            color: "inherit",
                            "aria-label": "menu",
                            "aria-haspopup": "true",
                            onClick: handleDrawerOpen,
                        }}
                    >
                        <MenuIcon/>
                    </IconButton>
                </div>

Here are some styles I use:

const useStyles = makeStyles((theme) => ({
    appBar: {
        borderBottom: `1px solid ${ theme.palette.divider }`,
        flexGrow: 1,
        "@media (max-width: 950px)": {
            paddingLeft: 0,
        }
    },
    link: {
        margin: theme.spacing(1, 1.5),
        display: 'block',
    },
    toolBar: {
        display: "flex",
        justifyContent: "space-between",
    },
    toolbarTitle: {
        flexGrow: 1,
        fontFamily: 'Track',
        textAlign: "left",
        float: "left"
    },
    navLinks: {
        fontWeight: 700,
        size: "18px",
        marginLeft: "38px",
        padding: "0 1rem",
        float: "center"

    },
    drawerContainer: {
        padding: "20px 30px",
      },
    profileAvatar: {
        display: "flex",
        float: 'right',
        alignItems: "center",
    },
}));

Please let me know how I can solve this.

edit:

                <div  style={{ display: "flex", justifyContent: "space-between" }}>
                    <div className={classes.toolbarTitle}>
                        {Logo}
                    </div>
                    <div style={{ float: 'right', display: "flex", alignItems: "right"}}>
                        {getUserAccount()}
                        <IconButton
                            {...{
                                edge: "start",
                                color: "inherit",
                                "aria-label": "menu",
                                "aria-haspopup": "true",
                                onClick: handleDrawerOpen,
                            }}
                        >
                        <MenuIcon/>
                        </IconButton>
                    </div>
                </div>

question from:https://stackoverflow.com/questions/65945112/cant-get-nav-buttons-to-move-to-the-right-in-react

Answer 1

Wrap the logo in a div and then wrap the menu icon and icon button in another div, which you already have so you can style them independently

Wrap both those divs in a separate .container div and set the css to

.contianer {
   display: flex;
   justify-content: space-between;
}

You can then move them slightly from the edges of the screen with a little margin if you wish.