Professional Documents
Culture Documents
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>
)}
</>
);
};
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:
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>
</>
);
};