What is the best way to align text on the right side of a mui AppBar/Toolbar component?

How can I modify the menu bar to include a log out button on the right side?

Here is the current 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 have been struggling with this issue for nearly an hour and a half, feeling exhausted.

cssmaterial-uitailwind-css

Answer №1

If you want to create a layout with div elements, you can use the classes justify-between and flex in order 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>

Answer №2

To achieve this effect in your CSS, simply insert the following code snippet. This code will target the final <Typography> element (in this case, the log out) within your <Toolbar> and position it on the far right side.

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

Answer №3

To create a responsive layout, I have used CSS flexbox in my implementation. By grouping the elements within a Box and applying CSS flexbox properties to it, I was able to achieve the desired layout.

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;

If you'd like to explore my implementation further, feel free to click here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The headline is being improperly rendered inside a black box on Firefox

A while back, I inquired about creating a black box with padding around a two-line headline. The solution worked well, except for older versions of Internet Explorer. However, in Firefox, there are occasional issues with the display looking jagged. This oc ...

cssfirefoxpaddinghtml

`Loading CSS files in Node.js with Express``

My CSS isn't loading properly when I run my HTML file. Even though the HTML is correctly linked to the CSS, it seems like express and node.js are not recognizing it. I find it confusing to understand the articles, tutorials, and stack overflow questio ...

javascripthtmlcssnode.jsexpress

Unchanging Dive Field

I'm having trouble understanding why this field isn't updating with the correct number. It seems that any value less than 1 is being rounded in the alert() function. I believe all numbers are simply getting rounded down, but I'm unsure of an ...

javascripthtmlcss

Error retrieving the potsdamer_platz_1k.hdr file. Unable to load the file

Currently, I am in the process of developing a custom t-shirt website using Three.js, but I have come across a persistent error while running the project. The same error occurs when attempting to run the project live as well. Despite including the file "pl ...

reactjsthree.jstailwind-cssreact-three-fiberreact-three-drei

Dynamic flexibility for content scrolling across components

Creating a mobile-friendly terms of service page with a title, content, and two buttons is my current project. The specific requirements are: All components should not exceed 100% of the viewport to allow for scrolling The buttons need to stay sticky at t ...

htmlcssreactjsmaterial-ui

Tips for ensuring all images are the same size within a div element

https://i.stack.imgur.com/EkmWq.jpg Is there a way to make sure all the images fit perfectly inside their respective border boxes without appearing stretched? I've tried setting fixed height and width within a div, but they always end up looking off. ...

javascripthtmlcssstyled-components

Applying CSS Styles to a Single Class Only

I have been using Zurb's Foundation to customize the navbar with my own styles, which has been successful so far. However, I encountered an issue with the responsive behavior of the navbar when the viewing container size changes. The navbar adds a sec ...

csszurb-foundation

Encountering a problem when trying to utilize material-ui icons in a React application

After installing the Material-UI core and icons packages using npm install @material-ui/core and npm install @material-ui/icons in my React app, I tried to use the FileUploadIcon. Here's how I imported it: import { FileUploadIcon } from '@materia ...

javascriptreactjsmaterial-ui

How can I utilize the input prop in Material UI's Select component?

According to the documentation: This is an Input element; it doesn't necessarily have to be a material-ui specific Input. It seems that when I use Material Input, everything works fine. However, when I try using <input/>, the open arrow icon ...

reactjsmaterial-ui

Modify the color of the H1 tag exclusively within specific classes

Struggling with a formatting issue here. I'm looking to customize the colors of h1, h2, h3... when they are inside specific classes. It's mostly working as intended, however, the problem arises when the headings outside of those classes don' ...

htmlcss

Tips for adjusting your design when a condition is met:

Currently implementing Material-UI with React framework class App extends Component { constructor() { super(); this.state = { drawerOpened: true }; }; render () { return( <div> <Drawer open={this.state.drawerOpened}> <di ...

reactjsmaterial-ui

DOMPDF - Comparing background URL rendering between Linux and Windows

When converting HTML to PDF, my image doesn't show on a Linux server. On localhost, the image displays properly. Here is my CSS code: background: red url("<?php echo __DIR__ ?/my_img.png"); However, on the Linux server, the image does not appea ...

phphtmlcsslinuxdompdf

Tips for populating the header of an angular-material card

I am working with an angular-material classic card that has the following template: <mat-card class="example-card"> <mat-card-header> <mat-card-title>Shiba Inu</mat-card-title> </mat-card-header> <mat-card-conten ...

angularangular-materialmaterial-designmaterial-ui

An issue arises in CSS when the styling is not correctly implemented on the HTML elements

I am currently trying to recreate this code on my own page: https://codepen.io/Vlad3356/pen/PoReJVg Here is the code I have written so far: https://codepen.io/Vlad3356/pen/GRxdMPz I'm puzzled as to why, when I click on a star in my version of the co ...

htmlcss

CSS Class ID selection for selectpicker

I have two classes: selectpicker with different IDs: selected_Test_Platforms and selected_SIL_relevant I am trying to assign a preselection from an array called "availableTestPlatforms" to the selected_Test_Platforms. Currently, when I use the selector $( ...

javascriptjquerycsscss-selectors

The expected response from CSS3 animated images may not be fully realized

I've been working on this project with 4 images. While hovering over one image causes the others to change size as intended, I can't figure out why the ones on the left are not following the same pattern even though I have specified that they sho ...

htmlcsshovertransformscale

Steps to create a div with a z-index of 1 that fills the entire height:

Looking at the image, I have a sidebar that opens over other elements (blue color) using z-index = 1. When the sidebar is open, I want to hide all other elements except for the sidebar. However, towards the end of the sidebar, I can still see other element ...

htmlcss

The error message InvalidCharacterError is displayed when the attempt to create a new element using the 'createElement' method on the 'Document' object fails. This is due to the tag name provided ('/static/media/tab1.fab25bc3.png') not being a valid name

Hey everyone! I'm new to using React and I decided to try cloning Netflix by following a tutorial on YouTube. However, I've encountered an issue with rendering an image in a functional component. The error message I'm receiving is as follow ...

javascriptcssreactjsimage

Restrict printing loops within the designated division layer

Is there a way to limit the number of rows displayed horizontally when using foreach? I only want to display 7 rows. Can this be achieved with CSS or pagination? Here is an image illustrating the issue: https://i.sstatic.net/yJx3N.png Currently, it print ...

phpcsslaravellaravel-5bootstrap-4

dynamically assigning a style attribute based on the dimensions of an image retrieved from a URL

My aim is to determine whether or not I should use an image based on its dimensions. To achieve this, I came across a function on stack overflow that can retrieve the dimensions of an image just by using its URL. Here is the code snippet they provided: f ...

javascriptcssreactjsimagematerial-ui