/Javascript/React/React navbar material ui

React navbar material ui

import React from "react";
import {
  AppBar,
  Toolbar,
  CssBaseline,
  Typography,
  makeStyles,
  useTheme,
  useMediaQuery,
} from "@material-ui/core";
import { Link } from "react-router-dom";
import DrawerComponent from "./Drawer";

const useStyles = makeStyles((theme) => ({
  navlinks: {
    marginLeft: theme.spacing(5),
    display: "flex",
  },
  logo: {
    flexGrow: "1",
    cursor: "pointer",
  },
  link: {
    textDecoration: "none",
    color: "white",
    fontSize: "20px",
    marginLeft: theme.spacing(20),
    "&:hover": {
      color: "yellow",
      borderBottom: "1px solid white",
    },
  },
}));

function Navbar() {
  const classes = useStyles();
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("md"));

  return (
    <AppBar position="static">
      <CssBaseline />
      <Toolbar>
        <Typography variant="h4" className={classes.logo}>
          Navbar
          
        </Typography>
        {isMobile ? (
          <DrawerComponent />
        ) : (
          <div className={classes.navlinks}>
            <Link to="/" className={classes.link}>
              Home
            </Link>
            <Link to="/about" className={classes.link}>
              About
            </Link>
            <Link to="/contact" className={classes.link}>
              Contact
            </Link>
            <Link to="/faq" className={classes.link}>
              FAQ
            </Link>
          </div>
        )}
      </Toolbar>
    </AppBar>
  );
}
export default Navbar;

Source: javascript.works-hub.com

Similar codes

0 vote139 views1 answer
Inline style to change background color react
Javascript React
0 vote158 views3 answers
React loop through array
Javascript React
13 votes138 views1 answer
React making post request
Javascript React
1 vote188 views1 answer
How to set height of material ui dialog react
Javascript React
0 vote158 views1 answer
Flatlist footer react native
Javascript React
0 vote146 views1 answer
Too many open files react native
Javascript React
0 vote187 views1 answer
Make a ReactNative component take the height and width of the current window
Javascript React
0 vote147 views1 answer
Put logo in qr code in react js qrcode.react
Javascript React
18 votes154 views3 answers
How to hide header in react navigation
Javascript React
12 votes101 views3 answers
React form hook npm
Javascript React