Posted on May 17, 2021 • Updated on Jun 18, 2021

Responsive Navbar @material-ui, react-router-dom

#react #webdev

I have done a Responsive navbar with material-ui and react-router-dom,

App.js

dependencies used:

npm install @material-ui/core
npm install @material-ui/icons
npm install @fontsource/roboto
npm install react-router-dom

customizing the theme

To customize the theme we have to import these modules first:

import Header from "./Components/Header";
// to use fontRoboto
import "fontsource-roboto";
// importing paper and container from core
import { Paper, Container } from "@material-ui/core";

// these are for customizing the theme
import { ThemeProvider, createMuiTheme } from "@material-ui/core/styles";
/* material shell also provide the colors we can import them like these */
import { green, orange } from "@material-ui/core/colors";

Customize the theme we have to create the variable with createMuiTheme:

const theme = createMuiTheme({
  typography: {
    h1: {
     /* this will change the font size for h1, we can also do 
        it for others, */
      fontSize: "3rem",
    },
  },
  palette: {
    /* this is used to turn the background dark, but we have 
        to use Paper for this inOrder to use it. */
    type: "dark",
    primary: {
     // main: colorName[hue],
     // we have to import the color first to use it
      main: green[600],
    },
    secondary: {
      main: orange[400],
    },
  },
});

now we have to wrap the components we use with ThemeProvider and now we pass the variable as prop to this

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Paper style={{ height: "200vh" }}>
        <Container>
          <Header />
        </Container>
      </Paper>
    </ThemeProvider>
  );
}

export default App;

the things which are inside the ThemeProvider can use the newly created theme

NavBar Starts from here

Header.js

TO use the
navgation bar with material-ui, we have to import {AppBar}, and using {ToolBar} for extra padding,
for making the nav bar responsive we have to use {useMediaQuery} for break the screen with breakpoints
to use the dropMenu we have to import {Menu, MenuItem}

For breaking the screen width in material-ui we can use px or buitin sizes ex: {xl,lg,mg,sm,xs} we are assigning a new variable and making it as boolean type:

import React from "react"
import { AppBar, Toolbar, Typography, useMediaQuery, Menu, MenuItem, Button } from "@material-ui/core"
import MenuIcon from "@material-ui/icons/Menu";

const Example () => {
/* Creating 2 variables for opening and closing the menu for mobile version */
const [anchor, setAnchor] = React.useState(null);
const open = Boolean(anchor);

/* Creating a function to handle manu: */
const handleMenu = (event) => {
    setAnchor(event.currentTarget);
 };

const isMobile = useMediaQuery((theme) => theme.breakpoints.down("sm"));
return(
<Appbar>
<Toolbar>
<Typography>
Example
</Typography>
{isMobile ? (<>
<IconButton onClick={handleMenu}>
<MenuIcon />
</IconButton>
<Menu
   id="menu-appbar"
   /* to open the anchor at the top below the cursor */
   anchorEl={anchor}
   /* anchor origin so that it open it that location */
   anchorOrigin={{
   vertical: "top",
   horizontal: "right"
   }}
   KeepMounted
   transformOrigin={{
   vertical: "top",
   horizontal: "right"
   }}
   open={open}
   >
   <MenuItem
   onClick={() => setAnchor(null)}
   >
  <ListItemIcon>
  <HomeIcon />
  </ListItemIcon>
  <Typography variant="h6"> Home</Typography>
  </MenuItem>
</Menu>
</>) : (<Button>Home</Button>)}
</Toolbar>
</Appbar>
)
}
export default Example

to use react-router-dom with material-ui:

import {Button} from "@material-ui/core"
// these are required components to work on
import { BrowserRouter, Route, Switch, Link } from "react-router-dom";

// importing pages
import Home from "./Home"
import Example from "./Example"

const browser = () =>{
return(
<div>
<BrowserRouter>
/* we can use this link in other pages also on any clickable 
   objects, but import it first. */
<Button component={Link} to={process.env.PUBLIC_URL + "/"}>Home</Button>
<Button component={Link} to={process.env.PUBLIC_URL + "/Example"}>Example</Button> 
<Switch>
/* you have to create the pages and import them if not it 
   shows error */
<Route exact path={process.env.PUBLIC_URL + "/"} component={Home} />
<Route exact path={process.env.PUBLIC_URL + "/Example"} component={Example}>
</Switch>
</BrowserRouter>
</div>
)
}
export default Browser;