If I have an AppBar, how can I make it so one group of icons plus the logo is on the left, and another group of icons are on the right of it?
Ex:
Left: (from left to right) 1 menu icon, logo
Right: (from right to left) 1 menu icon, 1 save icon, 1 edit icon
AppBar component:
<AppBar
className={classNames(classes.appBar, {
[classes.appBarShift]: open,
[classes[`appBarShift-left`]]: open,
[classes[`appBarShift-right`]]: !tools,
})}
position='static'
>
<Toolbar className={classNames(classes.topBar)}>
<IconButton
color="inherit"
aria-label="open drawer"
onClick={this.handleDrawerToggle}
className={classNames(classes.menuButton)}
>
<MenuIcon />
</IconButton>
<Typography variant="title" color="inherit" noWrap>React App</Typography>
<IconButton
color="inherit"
aria-label="open tool drawer"
onClick={this.handleToolDrawerToggle}
className={classNames(classes.menuButton)}
>
<MenuIcon />
</IconButton>
</Toolbar>
</AppBar>
You can use flexbox to control the alignment of elements in the toolbar...
One option is to add flex: 1 to the logo element. It will expand to fill the available space in container. All the elements after logo will be aligned to the right.
OR
Use margin-left: auto to align the second group of buttons to the right side of the flex container.
Here is a live example
const styles = {
// this group of buttons will be aligned to the right side
toolbarButtons: {
marginLeft: 'auto',
},
};
const Demo = ({ classes }) => (
<AppBar position="static">
<Toolbar>
<IconButton color="inherit">
<MenuIcon />
</IconButton>
<Typography variant="title" color="inherit">Title</Typography>
<div className={classes.toolbarButtons}>
<IconButton color="inherit"><EditIcon /></IconButton>
<IconButton color="inherit"><SaveIcon /></IconButton>
<IconButton color="inherit"><MoreVertIcon /></IconButton>
</div>
</Toolbar>
</AppBar>
);
I know it's been a while since you asked the question, I would like to provide an alternative solution. Add Box tag (similar to flexbox in CSS) around the components on the left and adjust the flexGrow attribute and it works for me:
import Box from '#material-ui/core/Box';
{/* BEFORE APPBAR*/}
<AppBar>
<Toolbar>
<Box display='flex' flexGrow={1}>
{/* whatever is on the left side */}
</Box>
{/* whatever is on the right side */}
</Toolbar>
</AppBar>
{/* AFTER APPBAR*/}
I tried using inline css inside Toolbar component itself, it worked for me;
<Toolbar style={{display:'flex', justifyContent:"space-between", width:'100%'}}>
Related
I'm trying to style and change position of a Link component, I'm trying to have the Link (Forget Password?) at the right end, but now it's centered as shown in the image below
Also I want to change the color of it, I tried color="black" but didn't work
I'm using grids trying to have the texts apart from each other.
The Code
{/* Password */}
<Grid container mt={4}>
<Grid item xs={6} justify={"flex-start"}>
<Typography
variant="h9"
gutterBottom
component="div"
style={{ fontWeight: "bold", textAlign: "left"}}
>
Password
</Typography>
</Grid>
<Grid item xs={6} justify={"flex-end"}>
<Typography
variant="body2"
gutterBottom
component={Link}
// align="right"
to="/register"
>
{/* <Link to="/register">Forget Password?</Link> */}
Forget Password?
</Typography>
</Grid>
</Grid>
If "black" isn't defined in your theme, that won't work. color="primary" should work, but if you can also define black as a color in your theme.
Alternatively, if you want only this link to be black, you can add the attribute sx={{ color: 'black' }} to <Link> and that should work.
If it's not necessary to do so, I wouldn't wrap the link in a typography; just apply all the styles directly to link, as link already uses a typography element under the hood.
Try this to right-align your password link:
<Grid item xs={6}>
<Box display="flex" justifyContent="flex-end">
<Typography
variant="body2"
gutterBottom
component={Link}
// align="right"
to="/register"
>
{/* <Link to="/register">Forget Password?</Link> */}
Forget Password?
</Typography>
</Box>
</Grid>
Using the React Material UI library (material-ui.com), how do you position the AppBar to the left side of the screen? The design I need to build has a the global nav (which you'd typically see across the top) along the left, with fixed position. There are also links in the nav that will slide panels out from the left (from "behind" the global nav).
I can't find anything in the documentation which supports this design. Is it possible?
Thanks
I was able to accomplish this using an AppBar in a flex container using flexDirection="row".
<React.Fragment>
<CssBaseline />
<Box display="flex" flexDirection="row" className={classes.root}>
<Box flexGrow={0}>
<AppBar elevation={0} position="sticky">
<div>Left</div>
<div>appBar</div>
<Button>try me</Button>
<Divider />
<Button>try me2</Button>
</AppBar>
</Box>
<Box display="flex" flexDirection="row" flexGrow={1}>
<Box
display="flex"
flexDirection="column"
className={classes.mainArea}
flexGrow={1}
></Box>
</Box>
<Box flexGrow={0}>
<AppBar elevation={0} position="sticky">
<div>Right</div>
<div>appBar</div>
<Button>try me</Button>
<Divider />
<Button>try me2</Button>
</AppBar>
</Box>
</Box>
</React.Fragment>
Code SandBox Demo
Following the documentation of material-ui (https://material-ui.com/components/dialogs/),
I see that the dialog can be full screen. However, when I use it with AppBar and ToolBar, the DialogContent does not get displayed.
Below is the code for my dialog.
<Button variant="outlined" color="primary" onClick={handleClickOpen}>
Open full-screen dialog
</Button>
<Dialog fullScreen open={open} onClose={handleClose} TransitionComponent={Transition}>
<AppBar style={{ backgroundColor: "#182026" }} className={classes.appBar}>
<Toolbar>
<IconButton edge="start" color="inherit" onClick={handleClose} aria-label="close">
<CloseIcon />
</IconButton>
<Typography variant="h6" className={classes.title}>
Sound
</Typography>
</Toolbar>
</AppBar>
<DialogContent>
<DialogContentText>
Let Google help apps determine location. This means sending anonymous location data to
Google, even when no apps are running.
</DialogContentText>
</DialogContent>
</Dialog>
This just gives me
When I inspect this, I can see that the content is hidden inside the header which is pretty weird.
Since this code is mostly from the demo, I am not sure how to fix it. Thanks in advance.
You need to add position relative to your app bar class.
const useStyles = makeStyles((theme) => ({
appBar: {
position: 'relative',
},
title: {
marginLeft: theme.spacing(2),
flex: 1,
},
}));
And on the actual appear apply
<AppBar className={classes.appBar} />
I am working on a React app using MaterialUI to create an Appbar and Drawer.
There is an extra space between the edge of the window and the Drawer.
The extra space is also covering up an IconButton I use to toggle opening and expanding the drawer. It looks like this:
Here's how I'm rendering the Appbar and Drawer:
render(){
const { classes,drawerOpen,theme } = this.props;
return(
<React.Fragment>
<AppBar
position="absolute"
className={classNames(classes.appBar,drawerOpen && classes.appBarShift)}
>
<Toolbar disableGutters={!this.state.open}>
<IconButton
color="inherit"
aria-label="open drawer"
onClick={this.handleDrawerOpen}
className={classNames(classes.menuButton, drawerOpen && classes.hide)}
>
<ToggleLeft />
</IconButton>
<Typography variant="title" color="inherit" noWrap>
MYAPP
</Typography>
</Toolbar>
</AppBar>
<Drawer
variant="permanent"
classes={{
paper: classNames(classes.drawerPaper, !drawerOpen && classes.drawerPaperClose),
}}
open={this.state.open}
>
<div className={classes.toolbar}>
<IconButton onClick={this.handleDrawerClose}>
{theme.direction === 'rtl' ? <ToggleLeft />:<ToggleRight />}
</IconButton>
</div>
<Divider />
<List><SideAccountsList {...this.props}/></List>
</Drawer>
</React.Fragment>
)
}
In this menuAppBar the first item in the menu is selected by default. Where in this menu the first item is not selected by default, and that what I want is the same to be in the manuAppBar menu.
The first example is implemented with the material-ui Menu component and the second example is implemented using components from the react-popper library.
In the first example, the first item is highlighted because it has focus. This is because Menu sets focus if it is open when mounted or updated. Take a look at the source:
class Menu extends React.Component {
componentDidMount() {
if (this.props.open) {
this.focus();
}
}
componentDidUpdate(prevProps) {
if (!prevProps.open && this.props.open) {
// Needs to refocus as when a menu is rendered into another Modal,
// the first modal might change the focus to prevent any leak.
this.focus();
}
}
If you prefer react-popper and would like to use it in an AppBar, you can:
<AppBar position="static">
<Toolbar>
<IconButton className={classes.menuButton} color="contrast" aria-label="Menu">
<MenuIcon />
</IconButton>
<Typography type="title" color="inherit" className={classes.flex}>
Title
</Typography>
{auth && (
<Manager>
<Target>
<IconButton
aria-owns={open ? 'menu-list' : null}
aria-haspopup="true"
onClick={this.handleMenu}
color="contrast"
>
<AccountCircle />
</IconButton>
</Target>
<Popper
placement="top-right"
eventsEnabled={open}
className={classNames({ [classes.popperClose]: !open })}
>
<ClickAwayListener onClickAway={this.handleClose}>
<Grow in={open} id="menu-list" style={{ transformOrigin: '0 0 0' }}>
<Paper>
<MenuList role="menu">
<MenuItem onClick={this.handleClose}>Profile</MenuItem>
<MenuItem onClick={this.handleClose}>My account</MenuItem>
<MenuItem onClick={this.handleClose}>Logout</MenuItem>
</MenuList>
</Paper>
</Grow>
</ClickAwayListener>
</Popper>
</Manager>
)}
</Toolbar>
</AppBar>
Here is a mashup of your two cited examples on codesandbox. It needs work and was only added here to illustrate react-popper as a possibility.