How to make text go on right side of mui AppBar/Toolbar component?-CodePudding

How do I make the following menu bar the same but with the log out button on the right side?

Code:

    <main>
      <AppBar>
        <Toolbar>
        <Typography style={{ marginRight: 16 }} variant="h6" className="text-lg cursor-pointer" onClick={() => redirect("/")}>
            Home
          </Typography> 
          <Typography style={{ marginRight: 16 }} variant="h6" className="text-lg cursor-pointer" onClick={() => redirect("/projects")}>
            Projects
          </Typography> 
          <Typography style={{ marginRight: 16 }} variant="h6" className="text-lg cursor-pointer" onClick={() => redirect("/team")}>
            Goals
          </Typography> 
          {!session &&
            <Typography style={{ marginRight: 16 }} variant="h6" className="text-lg cursor-pointer" onClick={() => redirect("/login")}>
              Log in
            </Typography> 
          }
          {session &&
            <Typography  variant="h6" className="text-lg cursor-pointer right-0" onClick={() => signOut()}>
              log out
            </Typography> 
          }
        </Toolbar>
      </AppBar>
      <Toolbar />
    </main>

I am very tired as I have been struggling with this flippin' error for the past 1.5 hours

CodePudding user response：

you can add divs like this and use justify-between and flex to add space between them.

<main>
  <AppBar>
    <Toolbar>
       <div className="flex justify-between">
         <div>
          <Typography style={{ marginRight: 16 }} variant="h6" className="text-lg cursor-pointer" onClick={() => redirect("/")}>
        Home
      </Typography> 
      <Typography style={{ marginRight: 16 }} variant="h6" className="text-lg cursor-pointer" onClick={() => redirect("/projects")}>
        Projects
      </Typography> 
      <Typography style={{ marginRight: 16 }} variant="h6" className="text-lg cursor-pointer" onClick={() => redirect("/team")}>
        Goals
      </Typography> 
      {!session &&
        <Typography style={{ marginRight: 16 }} variant="h6" className="text-lg cursor-pointer" onClick={() => redirect("/login")}>
          Log in
        </Typography> 
      }
      </div>
      <div>
        {session &&
        <Typography  variant="h6" className="text-lg cursor-pointer right-0" onClick={() => signOut()}>
          log out
        </Typography> 
      }
      </div>
       </div>
    </Toolbar>
  </AppBar>
  <Toolbar />
</main>

CodePudding user response：

Just add this in your CSS. It will select the last <Typography> (which in your case is log out) in your <Toolbar> and send it to the rightmost side.

Toolbar Typography:last-child {
  float: right;
}

CodePudding user response：

My implementation is to utilize css flexbox. I group the three elements with a Box and implement CSS flexbox on it.

import React from "react";
import { AppBar, Box, Toolbar, Typography } from "@mui/material";

function App() {
  return (
    <AppBar>
      <Toolbar sx={{ display: "flex" }}>
        <Box sx={{ display: "flex", flex: "1 1 0" }}>
          <Typography
            style={{ marginRight: 16 }}
            variant="subtitle2"
            className="text-lg cursor-pointer"
            // onClick={() => redirect("/")}
          >
            Home
          </Typography>
          <Typography
            style={{ marginRight: 16 }}
            variant="subtitle2"
            className="text-lg cursor-pointer"
            // onClick={() => redirect("/projects")}
          >
            Projects
          </Typography>
          <Typography
            style={{ marginRight: 16 }}
            variant="subtitle2"
            className="text-lg cursor-pointer"
            // onClick={() => redirect("/team")}
          >
            Goals
          </Typography>
        </Box>
        {/* session */}
        {false && (
          <Typography
            style={{ marginRight: 16 }}
            variant="subtitle2"
            className="text-lg cursor-pointer"
            // onClick={() => redirect("/login")}
          >
            Log in
          </Typography>
        )}
        {/* lets assume that session is true */}
        {true && (
          <Typography
            variant="subtitle2"
            className="text-lg cursor-pointer right-0"
            // onClick={() => signOut()}
          >
            log out
          </Typography>
        )}
      </Toolbar>
    </AppBar>
  );
}

export default App;

You may Interact my own implementation in the codesandbox just click here