Here I have an image of the current header render. The headercomprises of a HeaderMenu and 3 Links. The links are working fine, but the HeaderMenu is causing the links to fall below it. HeaderMenu contains a div which wraps a Button and Popper, acting as a dropdown menu.
I'm also not sure if this design structure is correct, but for the styles, I have one styles.js file which I pull from. I then pass these styles down as props to the smaller components for rendering. That's why the components here have a props classes that comes from useStyles in index.js.
Header.js
import { AppBar, Button, Link, Toolbar, Typography } from '#material-ui/core'
import HeaderMenu from './HeaderMenu.js'
const Header = (props) => {
const { classes } = props
return (
<AppBar position="static" color="default" elevation={0} className={classes.appBar}>
<Toolbar className={classes.toolbar}>
<Typography variant="h6" color="inherit" noWrap className={classes.toolbarTitle}>
Company name
</Typography>
<nav>
<HeaderMenu classes={classes}/>
<Link variant="button" color="textPrimary" href="#" className={classes.link}>
Here
</Link>
<Link variant="button" color="textPrimary" href="#" className={classes.link}>
Enterprise
</Link>
<Link variant="button" color="textPrimary" href="#" className={classes.link}>
Support
</Link>
</nav>
<Button href="#" color="primary" variant="outlined" className={classes.link}>
Login
</Button>
</Toolbar>
</AppBar>
)
}
export default Header
HeaderMenu.js
import React from 'react'
import { Button, ClickAwayListener, Grow, Paper, Popper, MenuItem, MenuList } from '#material-ui/core'
const HeaderMenu = (props) => {
const { classes } = props
const [open, setOpen] = React.useState(false)
const anchorRef = React.useRef(null)
const handleToggle = () => {
setOpen((prevOpen) => !prevOpen)
}
const handleClose = (event) => {
if (anchorRef.current && anchorRef.current.contains(event.target)) {
return
}
setOpen(false)
}
function handleListKeyDown (event) {
if (event.key === 'Tab') {
event.preventDefault()
setOpen(false)
}
}
// return focus to the button when we transitioned from !open -> open
const prevOpen = React.useRef(open)
React.useEffect(() => {
if (prevOpen.current === true && open === false) {
anchorRef.current.focus()
}
prevOpen.current = open
}, [open])
return (
<div className={classes.link}>
<Button
ref={anchorRef}
aria-controls={open ? 'menu-list-grow' : undefined}
aria-haspopup="true"
onClick={handleToggle}
>
Details
</Button>
<Popper open={open} anchorEl={anchorRef.current} role={undefined} transition disablePortal>
{({ TransitionProps, placement }) => (
<Grow
{...TransitionProps}
style={{ transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }}
>
<Paper>
<ClickAwayListener onClickAway={handleClose}>
<MenuList autoFocusItem={open} id="menu-list-grow" onKeyDown={handleListKeyDown}>
<MenuItem onClick={handleClose}>Profile</MenuItem>
<MenuItem onClick={handleClose}>My account</MenuItem>
<MenuItem onClick={handleClose}>Logout</MenuItem>
</MenuList>
</ClickAwayListener>
</Paper>
</Grow>
)}
</Popper>
</div>
)
}
export default HeaderMenu
You should wrap all your links into a div and then add this to your <nav></nav>
display: flex;
justify-content: space-evenly;
align-items: center;
This will allow it to stay everything in the same line.
Related
I'm experiencing an issue with the <Link> component from react-router-dom.
The above error occurred in the <Link> component:
at LinkWithRef (http://localhost:3000/react-portfolio/static/js/bundle.js:64573:7)
at button
at http://localhost:3000/react-portfolio/static/js/bundle.js:3642:66
at ButtonBase (http://localhost:3000/react-portfolio/static/js/bundle.js:9678:82)
at http://localhost:3000/react-portfolio/static/js/bundle.js:3642:66
at Button (http://localhost:3000/react-portfolio/static/js/bundle.js:9381:59)
at div
at div
at http://localhost:3000/react-portfolio/static/js/bundle.js:3642:66
at Toolbar (http://localhost:3000/react-portfolio/static/js/bundle.js:20646:82)
at header
at http://localhost:3000/react-portfolio/static/js/bundle.js:3642:66
at Paper (http://localhost:3000/react-portfolio/static/js/bundle.js:18055:82)
at http://localhost:3000/react-portfolio/static/js/bundle.js:3642:66
at AppBar (http://localhost:3000/react-portfolio/static/js/bundle.js:8771:83)
at div
at http://localhost:3000/react-portfolio/static/js/bundle.js:3642:66
at Box (http://localhost:3000/react-portfolio/static/js/bundle.js:23577:72)
at div
at Navbar (http://localhost:3000/react-portfolio/static/js/bundle.js:629:5)
at div
at PortfolioContainer (http://localhost:3000/react-portfolio/static/js/bundle.js:1060:88)
at div
at App
at Router (http://localhost:3000/react-portfolio/static/js/bundle.js:66149:15)
at BrowserRouter (http://localhost:3000/react-portfolio/static/js/bundle.js:64481:5)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError # react-dom.development.js:18687
I'm guessing that this is located in my Navbar file somewhere, which you can see below:
import * as React from 'react';
import AppBar from '#mui/material/AppBar';
import Box from '#mui/material/Box';
import Toolbar from '#mui/material/Toolbar';
import Typography from '#mui/material/Typography';
import Button from '#mui/material/Button';
import { Link } from 'react-router-dom';
import IconButton from '#mui/material/IconButton';
import Menu from '#mui/material/Menu';
import MenuIcon from '#mui/icons-material/Menu';
import MenuItem from '#mui/material/MenuItem';
import '../styles/root.css';
import useWindowDimension from '../utils/windowDimensions';
import About from '../pages/About';
import Contact from '../pages/Contact';
import Portfolio from '../pages/Portfolio';
import Resume from '../pages/Resume';
export default function Navbar({ handlePageChange }) {
const { height, width } = useWindowDimension();
const [anchorEl, setAnchorEl] = React.useState(null);
const open = Boolean(anchorEl);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const [anchorElNav, setAnchorElNav] = React.useState(null);
const openNav = Boolean(anchorElNav);
const handleOpenNavMenu = (event) => {
setAnchorElNav(event.currentTarget);
};
const handleCloseNavMenu = () => {
setAnchorElNav(null);
}
const handleClose = () => {
setAnchorEl(null);
};
return (
<div>
<Box sx={{ flexGrow: 1, width: "100%" }} >
<AppBar position="static" id="navbar">
<Toolbar>
<Typography
id="nav-logo"
variant="h6"
component="div"
sx={{ flexGrow: 1 }}
fontFamily="reklame-script, sans-serif"
fontWeight="700"
fontStyle="normal"
fontSize="36px"
// onClick={() => handlePageChange('About')}
>
My Portfolio
</Typography>
{width >= 900
?
<div
style={{ display: "flex", direction: "row", flexWrap: "wrap", justifyContent: "space-evenly", alignContent: "center", fontWeight: "bold" }}
>
<Button
color="inherit"
onClose={handleClose}
// onClick={() => handlePageChange('About')}
>
<Link to={<About />}>
About Me
</Link>
</Button>
<Button
color="inherit"
onClose={handleClose}
// onClick={() => handlePageChange('Portfolio')}
>
<Link to={<Portfolio />}>
Portfolio
</Link>
</Button>
<Button
color="inherit"
onClose={handleClose}
// onClick={() => handlePageChange('Contact')}
>
<Link to={<Contact />}>
Contact Me
</Link>
</Button>
<Button
color="inherit"
onClose={handleClose}
// onClick={() => handlePageChange('Contact')}
>
<Link to={<Resume />}>
Resume
</Link>
</Button>
</div>
:
// Mobile Hamburger Menu
<Box id='hamburger-menu' sx={{ flexGrow: 1, display: { xs: "flex", md: "none" }, justifyContent: "right" }}>
<IconButton
id="menu-button"
size="large"
aria-controls={openNav ? 'menu-appbar' : undefined}
aria-haspopup="true"
aria-expanded={openNav ? 'true' : undefined}
onClick={handleOpenNavMenu}
color="inherit"
>
<MenuIcon />
</IconButton>
<Menu
id="menu-appbar"
anchorEl={anchorElNav}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
open={openNav}
onClose={handleCloseNavMenu}
sx={{
display: { xs: 'block', md: 'none' },
}}
>
<div>
<MenuItem className='mobileMenuItem' onClick={handleCloseNavMenu}>
<Button color="inherit" >
<Link style={{ textDecoration: "none", color: "black" }} to="/" onClose={handleClose}>
About Me
</Link>
</Button>
</MenuItem>
<MenuItem className='mobileMenuItem' onClick={handleCloseNavMenu}>
<Button color="inherit" onClose={handleClose}>
<Link style={{ textDecoration: "none", color: "black" }} to={"/portfolio"}>
Portfolio
</Link>
</Button>
</MenuItem>
<MenuItem className='mobileMenuItem' onClick={handleCloseNavMenu}>
<Button color="inherit" onClose={handleClose}>
<Link style={{ textDecoration: "none", color: "black" }} to="/contact">
Contact Me
</Link>
</Button>
</MenuItem>
<MenuItem className='mobileMenuItem' onClick={handleCloseNavMenu}>
<Button color="inherit" onClose={handleClose}>
<Link style={{ textDecoration: "none", color: "black" }} to="/resume">
Resume
</Link>
</Button>
</MenuItem>
<Menu
id="basic-menu"
anchorEl={anchorEl}
open={open}
MenuListProps={{
'aria-labelledby': 'basic-button',
}}
onClick={handleClick}
onClose={handleClose}
>
</Menu>
</div>
</Menu>
</Box>
}
</Toolbar>
</AppBar>
</Box>
</div>
);
}
If it's not there, perhaps it's in my PortfolioContainer file? This can be seen below.
import React, { useState } from "react";
import About from "../pages/About";
import Portfolio from "../pages/Portfolio";
import Contact from "../pages/Contact";
import Resume from "../pages/Resume";
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
export default function PortfolioContainer() {
const [currentPage, setCurrentPage] = useState('');
const renderPage = () => {
if (currentPage === '/') {
return <About />
}
if (currentPage === '/resume') {
return <Resume />;
}
if (currentPage === '/portfolio') {
return <Portfolio />;
}
if (currentPage === '/contact') {
return <Contact />;
}
// return <About />;
};
const handlePageChange = (page) => setCurrentPage(page);
return (
<div id="portfolioContainer">
<Navbar currentPage={currentPage} handlePageChange={handlePageChange} />
{renderPage()}
<Footer />
</div>
);
};
Thank you in advance for any and all help!
I assumed you are useing react-router-dom#6.6.1 (latest version). "to" prop from component expect a string but you provide the component. That's why you get cyclic object error. I took your code an defined a router in index.js file like this
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import App from "./App";
import Resume from "./Resume";
const router = createBrowserRouter([
{
path: "/",
element: <App />
},
{
path: "/resume",
element: <Resume />
}
]);
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
<StrictMode>
<RouterProvider router={router} />
</StrictMode>
);
and in my App.js file I used Link component like this
<Button
color="inherit"
onClose={handleClose}
>
<Link to="/resume">Resume</Link>
</Button>
The issue it seems is that you aren't using react-router to its fullest. The Link component should be specifying a to prop that matches a URL pathname that you are rendering a Route component for. PortfolioContainer should be rendering the routes you are trying to link to from the Navbar component.
Example:
PortfolioContainer
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import About from "../pages/About";
import Portfolio from "../pages/Portfolio";
import Contact from "../pages/Contact";
import Resume from "../pages/Resume";
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
export default function PortfolioContainer() {
return (
<BrowserRouter>
<div id="portfolioContainer">
<Navbar />
<Routes>
<Route path="/" element={<About />} />
<Route path="/resume" element={<Resume />} />
<Route path="/portfolio" element={<Portfolio />} />
<Route path="/contact" element={<Contact />} />
</Routes>
<Footer />
</div>
</BrowserRouter>
);
};
Navbar
...
<Link to="/">
About Me
</Link>
...
<Link to="/portfolio">
Portfolio
</Link>
...
This is Header.js where I have the button <ReactSvg>, inside <IconButton> when you click it, it will change the page theme with the switchTheme() function. When you hover over the button it also has a popover where it declares the function of the button (ex. switch theme).
For some reason I hover the button the popover comes out but doesn't let me click on the button even if I click very fast and vigorously. Somehow the popover has disabled the button.
Header file where the button is rendered:
import React, { useState } from 'react'
import ReactSvg from './reactSvg'
import { Box, Typography, Link, Container, IconButton } from '#material-ui/core'
import PhoneIcon from '#material-ui/icons/Phone'
import EmailIcon from '#material-ui/icons/Email'
import GitHubIcon from '#material-ui/icons/GitHub'
import LinkedInIcon from '#material-ui/icons/LinkedIn'
import { useStyles } from '../styles/customStyles'
import Image from 'material-ui-image'
import PopOver from './PopOver'
const styles = {
image: {
maxWidth: 200,
minWidth: 200,
},
}
export default function Header({ switchTheme }) {
const classes = useStyles()
const [anchorEl, setAnchorEl] = useState(null)
const handleTheme = () => {
switchTheme()
}
const handleHover = (e) => {
setAnchorEl(e.currentTarget)
}
return (
<>
<Box>
<IconButton onClick={() => handleTheme()} onMouseOver={(e) => handleHover(e)}>
<ReactSvg />
</IconButton>
<Typography variant="h3" color="primary">
Staz Christodoulakis
</Typography>
<Typography variant="body1" color="primary">
Software Engineer ยท Web/App
</Typography>
<hr className="solid" />
<Box
display="flex"
alignItems="center"
justifyContent="center"
className={classes.root}
flexWrap="wrap"
>
<Link color="secondary" variant="body1" href="tel: 650-409-6202">
<Box display="flex">
<PhoneIcon /> 650 409 6202
</Box>
</Link>
<Link color="secondary" variant="body1" href="mailto: staz.christo#gmail.com">
<Box display="flex">
<EmailIcon /> staz.christo#gmail.com
</Box>
</Link>
<Link href="https://github.com/stazcp" color="secondary" variant="body1">
<Box display="flex">
<GitHubIcon /> github.com/stazcp
</Box>
</Link>
<Link href="https://www.linkedin.com/in/staz-christo" color="secondary" variant="body1">
<Box display="flex">
<LinkedInIcon /> linkedin.com/in/staz-christo
</Box>
</Link>
</Box>
</Box>
<PopOver anchorEl={anchorEl} setAnchorEl={setAnchorEl} />
</>
)
}
Popover:
import React, { useState, useEffect } from 'react'
import { makeStyles } from '#material-ui/core/styles'
import Popover from '#material-ui/core/Popover'
import Typography from '#material-ui/core/Typography'
import Button from '#material-ui/core/Button'
const useStyles = makeStyles((theme) => ({
typography: {
padding: theme.spacing(2),
},
}))
export default function SimplePopover({ anchorEl, setAnchorEl }) {
const classes = useStyles()
const handleClose = () => {
setAnchorEl(null)
}
const open = Boolean(anchorEl)
const id = open ? 'simple-popover' : undefined
return (
<div>
<Popover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'center',
}}
>
<Typography className={classes.typography}>
Click on React Symbol to change theme!
</Typography>
</Popover>
</div>
)
}
Why is that the onMouseOver event blocking the onClick event?
Can you try stopPropagation?
const handleHover = (e) => {
e.stopPropagation();
setAnchorEl(e.currentTarget)
}
So I found a solution to my problem by using a Tooltip provided by Material UI.
https://material-ui.com/components/tooltips/
Like this:
<Tooltip title="Click Me!" placement="right" arrow>
<IconButton
onClick={() => handleTheme()}
// onMouseOver={(e) => handleHover(e)}
>
<GetIcon icon={reactLogo} className="reactLogo" />
</IconButton>
</Tooltip>
if anyone has managed to use different methods for mouse events on Material UI buttons please post here.
Thanks!
If I click to remove the first like on the first goal, I can see the Redux action firing (using Redux DevTools) for the like being updated. But the number beside is not updating. When I check the console it doesn't appear that anything is refreshing. When I refresh the page, it shows the updated number that was previously liked (the 0 becomes a 1), but I have to refresh the page to see this update. How can I get the number to update in real time without having to refresh the page?
import React, { useEffect } from "react";
import Moment from "react-moment";
import PropTypes from "prop-types";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import { addLike, removeLike } from "../../actions/goal";
import { getGoals } from "../../actions/goal";
import Spinner from "../layout/Spinner";
import Navbar from "../dashboard/Navbar";
import ThumbUpAltIcon from "#material-ui/icons/ThumbUpAlt";
import ThumbDownAltIcon from "#material-ui/icons/ThumbDownAlt";
import ChatIcon from "#material-ui/icons/Chat";
import DeleteIcon from "#material-ui/icons/Delete";
import DoneIcon from "#material-ui/icons/Done";
import {
Typography,
Container,
CssBaseline,
makeStyles,
Grid,
Avatar,
Paper,
Button
} from "#material-ui/core";
const useStyles = makeStyles(theme => ({
paper: {
height: "auto",
marginBottom: theme.spacing(3)
},
actionButtons: {
marginTop: "3vh"
},
profileHeader: {
textAlign: "center",
marginBottom: 20
},
avatar: {
width: theme.spacing(7),
height: theme.spacing(7)
}
}));
const Goals = ({
getGoals,
auth,
addLike,
removeLike,
goal: { goals, user, loading }
}) => {
useEffect(() => {
getGoals();
}, [getGoals]);
const classes = useStyles();
return loading ? (
<>
<Navbar />
<Container component="main" maxWidth="xs">
<CssBaseline />
<div className={classes.paper}>
<Spinner />
</div>
</Container>
</>
) : (
<>
<CssBaseline />
<Navbar />
<main>
<Container>
<Typography variant="h2" className={classes.profileHeader}>
Goals
</Typography>
{/* parent grid */}
<Grid container spacing={4}>
{goals.map(singleGoal => (
<Grid
className={classes.paper}
key={singleGoal._id}
spacing={1}
container
item
direction="row"
alignItems="center"
component={Paper}
>
<Grid
item
container
direction="column"
justify="center"
alignItems="center"
xs={3}
>
<Avatar className={classes.avatar} src={singleGoal.avatar} />
<Typography variant="caption">
{singleGoal.first_name} {singleGoal.last_name}
</Typography>
<Typography variant="caption" className={classes.postedOn}>
Posted on{" "}
<Moment format="MM/DD/YYYY">{singleGoal.date}</Moment>
</Typography>
</Grid>
<Grid container item direction="column" xs={9}>
<Typography variant="body1">{singleGoal.text}</Typography>
<Grid item className={classes.actionButtons}>
<Button size="small" onClick={e => addLike(singleGoal._id)}>
<ThumbUpAltIcon />
</Button>
<Typography variant="caption">
{singleGoal.likes.length}
</Typography>
<Button
size="small"
onClick={e => removeLike(singleGoal._id)}
>
<ThumbDownAltIcon />
</Button>
<Button href={`/goal/${singleGoal._id}`} size="small">
<ChatIcon />
</Button>
{!auth.loading && singleGoal.user === auth.user._id && (
<Button size="small">
<DoneIcon />
</Button>
)}
{!auth.loading && singleGoal.user === auth.user._id && (
<Button size="small">
<DeleteIcon />
</Button>
)}
</Grid>
</Grid>
</Grid>
))}
</Grid>
</Container>
</main>
</>
);
};
Goals.propTypes = {
getGoals: PropTypes.func.isRequired,
goal: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
goal: state.goal,
auth: state.auth
});
export default connect(mapStateToProps, { getGoals, addLike, removeLike })(
Goals
);
I will need to see the rest of your code to be sure, but it seems you are dispatching your action but you are not updating your store, it could be a mistake in your reducer.
I have little problems with my ReactJs app, I'm receiving message like:
./src/components/Navbar/index.js
Line 13:3: 'state' is not defined no-undef
Line 17:3: 'handleClick' is not defined no-undef
I'm beginner with JavaScript and it's seams it's easy fix, I just copied that code from another app where it works.
This is my code:
import React, { useState } from 'react';
import { Layout, Menu, Drawer, Icon } from 'antd';
import { Mobile, Default } from '../Responsive';
import './index.less';
const { Header } = Layout;
const { SubMenu } = Menu;
const Navbar = props => {
state = {
current: 'home',
};
handleClick = e => {
console.log('click ', e);
this.setState({
current: e.key,
});
};
const [visible, setVisible] = useState(false);
const menu = (
<Menu
theme="lite"
mode="horizontal"
defaultSelectedKeys={['2']}
style={{ lineHeight: '64px' }}
onClick={this.handleClick} selectedKeys={[this.state.current]} mode="horizontal">
<Menu.Item key="mail">
<Icon type="mail" />
Navigation One
</Menu.Item>
<Menu.Item key="app" disabled>
<Icon type="appstore" />
Navigation Two
</Menu.Item>
<SubMenu
title={
<span className="submenu-title-wrapper">
<Icon type="setting" />
Navigation Three - Submenu
</span>
}
>
<Menu.ItemGroup title="Item 1">
<Menu.Item key="setting:1">Option 1</Menu.Item>
<Menu.Item key="setting:2">Option 2</Menu.Item>
</Menu.ItemGroup>
<Menu.ItemGroup title="Item 2">
<Menu.Item key="setting:3">Option 3</Menu.Item>
<Menu.Item key="setting:4">Option 4</Menu.Item>
</Menu.ItemGroup>
</SubMenu>
<Menu.Item key="alipay">
<a href="https://ant.design" target="_blank" rel="noopener noreferrer">
Navigation Four - Link
</a>
</Menu.Item>
</Menu>
);
return (
<Header className="app-header">
<Default>{menu}</Default>
<Mobile>
<Icon type="bars" size="large" className="nav-icon" onClick={() => setVisible(true)} />
<Drawer
title=""
placement="left"
closable
onClose={() => setVisible(false)}
visible={visible}
className="nav-drawer"
>
{menu}
</Drawer>
</Mobile>
</Header>
);
};
export default Navbar;
I copied this state and handleClick from another app but it was class, I tried to change const Navbar with class NavBar extends Component but no success.
You are mixing react components and react hooks. You should either use hook (useState), or components (this).
Here is your code with hooks
import React, { useState } from 'react';
import { Layout, Menu, Drawer, Icon } from 'antd';
import { Mobile, Default } from '../Responsive';
import './index.less';
const { Header } = Layout;
const { SubMenu } = Menu;
function Navbar(props) {
const [current, setCurrent] = useState('home');
const [visible, setVisible] = useState(false);
function handleClick(e) {
console.log('click ', e);
setCurrent(e.key)
};
const menu = (
<Menu
theme="lite"
mode="horizontal"
defaultSelectedKeys={['2']}
style={{ lineHeight: '64px' }}
onClick={this.handleClick} selectedKeys={[current]} mode="horizontal">
<Menu.Item key="mail">
<Icon type="mail" />
Navigation One
</Menu.Item>
<Menu.Item key="app" disabled>
<Icon type="appstore" />
Navigation Two
</Menu.Item>
<SubMenu
title={
<span className="submenu-title-wrapper">
<Icon type="setting" />
Navigation Three - Submenu
</span>
}
>
<Menu.ItemGroup title="Item 1">
<Menu.Item key="setting:1">Option 1</Menu.Item>
<Menu.Item key="setting:2">Option 2</Menu.Item>
</Menu.ItemGroup>
<Menu.ItemGroup title="Item 2">
<Menu.Item key="setting:3">Option 3</Menu.Item>
<Menu.Item key="setting:4">Option 4</Menu.Item>
</Menu.ItemGroup>
</SubMenu>
<Menu.Item key="alipay">
<a href="https://ant.design" target="_blank" rel="noopener noreferrer">
Navigation Four - Link
</a>
</Menu.Item>
</Menu>
);
return (
<Header className="app-header">
<Default>{menu}</Default>
<Mobile>
<Icon type="bars" size="large" className="nav-icon" onClick={() => setVisible(true)} />
<Drawer
title=""
placement="left"
closable
onClose={() => setVisible(false)}
visible={visible}
className="nav-drawer"
>
{menu}
</Drawer>
</Mobile>
</Header>
);
};
export default Navbar;
Everything else looks fine except:
const [current, setCurrent] = useState('home') ;
const handleClick = e => {
console.log('click ', e);
setCurrent(e.key);
};
Actually you have to convert the this.state to hook as well.
I have an AppBar component and I want to combine it with a drawer, this is the AppBar code:
import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "material-ui/styles";
import AppBar from "material-ui/AppBar";
import Toolbar from "material-ui/Toolbar";
import Typography from "material-ui/Typography";
import Button from "material-ui/Button";
import IconButton from "material-ui/IconButton";
import MenuIcon from "material-ui-icons/Menu";
import TemporaryDrawer from "./Drawer";
const styles = {
root: {
width: "100%"
},
flex: {
flex: 1
},
menuButton: {
marginLeft: -12,
marginRight: 20
},
};
function ButtonAppBar(props) {
const { classes } = props;
return (
<div className={classes.root}>
<TemporaryDrawer/>
<AppBar position="static">
<Toolbar>
<IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
<MenuIcon />
</IconButton>
<Typography variant="title" color="inherit" className={classes.flex}>
Title
</Typography>
<Button color="inherit">Drawer</Button>
</Toolbar>
</AppBar>
</div>
);
}
ButtonAppBar.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(ButtonAppBar);
Currently I'm using material-ui v1.0.0-beta.33, what I want is to open a drawer on the left side when click on the Button I have in AppBar but I have no idea how to do this.
I'll appreciate the help on this.
If I understand you correctly you can do it this way - store the boolean value that indicates is the drawer is opened in the state of your component:
state = { drawerIsOpen: false }
You will change it when user clicks on your Button:
handleDrawerOpen = () => {
this.setState({ drawerIsOpen: true });
};
Your render method should look like this:
render() {
const { classes } = this.props;
return (
<div className={classes.root}>
<AppBar position="static">
<Toolbar>
<IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
<MenuIcon />
</IconButton>
<Typography variant="title" color="inherit" className={classes.flex}>
Title
</Typography>
<Button onClick={this.handleDrawerOpen} color="inherit">Drawer</Button>
</Toolbar>
</AppBar>
<Drawer
variant="persistent"
classes={{
paper: classes.drawerPaper,
}}
open={this.state.drawerIsOpen}
>
<div className={classes.drawerHeader}>
<IconButton onClick={this.handleDrawerClose}>
<ChevronLeftIcon />
</IconButton>
</div>
<div className={classes.drawerInner}>
<p>drawer content</p>
</div>
</Drawer>
</div>
);
}
Check this simplified demo (see demo.js file).