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;
live link in codesandbox:
https://codesandbox.io/s/responsivenavbarmaterial-ui-60czl
github :
https://github.com/ChittojiMuraliSreeKrishna/material-ui-testing
Top comments (4)
Its an Innovation!!
Thank you 🙂
Great work really 😁
Thank you 🙂