DEV Community 👩‍💻👨‍💻

Chittoji Murali Sree Krishna
Chittoji Murali Sree Krishna

Posted on • Updated on

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

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
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

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],
    },
  },
});
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

live link in codesandbox:

https://codesandbox.io/s/responsivenavbarmaterial-ui-60czl

github :

https://github.com/ChittojiMuraliSreeKrishna/material-ui-testing

i tried my best to explain, Hope you guys like it. :)

Top comments (4)

Collapse
 
sakalpatil profile image
sakalpatil

Its an Innovation!!

Collapse
 
cmuralisree profile image
Chittoji Murali Sree Krishna Author

Thank you 🙂

Collapse
 
h4mzadevs profile image
Hamza Ghariani

Great work really 😁

Collapse
 
cmuralisree profile image
Chittoji Murali Sree Krishna Author

Thank you 🙂

🌙 Dark Mode?!

 
Turn it on in Settings