You are on page 1of 3

Here's an example of how to create a menu toggle for a mobile screen in ReactJS:

import React, { useState } from "react";

const MenuToggle = () => {


const [isOpen, setIsOpen] = useState(false);

return (
<>
<button onClick={() => setIsOpen(!isOpen)}>
{isOpen ? "Close" : "Open"} Menu
</button>
{isOpen && (
<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</nav>
)}
</>
);
};

export default MenuToggle;

In this example, the MenuToggle component uses the useState hook to manage the
state of the menu, which is represented by the isOpen state variable. When the
button is clicked, the setIsOpen function is called to toggle the state of isOpen.
The navigation menu is displayed when isOpen is true.

Here's an example of how to create a menu toggle for a mobile screen using
Material-UI in ReactJS:

import React from "react";


import {
AppBar,
Toolbar,
IconButton,
Drawer,
List,
ListItem,
ListItemText,
makeStyles,
useTheme,
} from "@material-ui/core";
import { Menu as MenuIcon } from "@material-ui/icons";

const useStyles = makeStyles((theme) => ({


menuButton: {
marginRight: theme.spacing(2),
},
drawer: {
width: 240,
},
}));

const MenuToggle = () => {


const classes = useStyles();
const theme = useTheme();
const [isOpen, setIsOpen] = React.useState(false);

const handleDrawerToggle = () => {


setIsOpen(!isOpen);
};

return (
<>
<AppBar position="static">
<Toolbar>
<IconButton
edge="start"
className={classes.menuButton}
color="inherit"
aria-label="menu"
onClick={handleDrawerToggle}
>
<MenuIcon />
</IconButton>
</Toolbar>
</AppBar>
<Drawer
variant="temporary"
open={isOpen}
onClose={handleDrawerToggle}
classes={{
paper: classes.drawer,
}}
ModalProps={{
keepMounted: true, // Better open performance on mobile.
}}
>
<List>
<ListItem button>
<ListItemText primary="Item 1" />
</ListItem>
<ListItem button>
<ListItemText primary="Item 2" />
</ListItem>
<ListItem button>
<ListItemText primary="Item 3" />
</ListItem>
</List>
</Drawer>
</>
);
};

export default MenuToggle;

In this example, the MenuToggle component uses Material-UI's AppBar, Toolbar,


IconButton, and Drawer components to create the menu toggle. The component also
uses the useState hook to manage the state of the menu, which is represented by the
isOpen state variable. The handleDrawerToggle function is called when the menu
button is clicked to toggle the state of isOpen. The navigation menu is displayed
when isOpen is true.

You might also like