Create responsive navbar and add it to new HomepageMUI page

src/AppRoutes.js

@@ -12,7 +12,8 @@ import {
 
 // import LoginPage from './pages/LoginPage/LoginPage';
 import LoginPage from './pages/LoginPage/LoginPageMUI';
-import HomePage from './pages/HomePage/HomePage';
+// import HomePage from './pages/HomePage/HomePage';
+import HomePage from './pages/HomePage/HomePageMUI';
 import NotFoundPage from './pages/ErrorPages/NotFoundPage';
 import ErrorPage from './pages/ErrorPages/ErrorPage';
 import ForgotPasswordPage from './pages/ForgotPasswordPage/ForgotPasswordPage';

src/components/MUI/DrawerComponent.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+	Drawer,
+	List,
+	ListItem,
+	ListItemButton,
+	ListItemIcon,
+	ListItemText,
+} from '@mui/material';
+
+const DrawerComponent = ({ open, toggleOpen }) => (
+	<Drawer anchor="right" open={open} onClose={toggleOpen}>
+		<List>
+			<ListItemButton divider onClick={toggleOpen}>
+				<ListItemIcon>
+					<ListItemText>Link 1</ListItemText>
+				</ListItemIcon>
+			</ListItemButton>
+			<ListItem divider onClick={toggleOpen}>
+				<ListItemIcon>
+					<ListItemText>Link 2</ListItemText>
+				</ListItemIcon>
+			</ListItem>
+			<ListItem divider onClick={toggleOpen}>
+				<ListItemText>Link 3</ListItemText>
+			</ListItem>
+		</List>
+	</Drawer>
+);
+
+DrawerComponent.propTypes = {
+	open: PropTypes.bool,
+	toggleOpen: PropTypes.func,
+};
+
+export default DrawerComponent;

src/components/MUI/MenuList.js

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import { Button, Menu, MenuItem } from '@mui/material';
+
+const MenuList = () => {
+	const [anchorEl, setAnchorEl] = useState(null);
+	const open = Boolean(anchorEl);
+	const handleClick = (event) => {
+		setAnchorEl(event.currentTarget);
+	};
+	const handleClose = () => {
+		setAnchorEl(null);
+	};
+
+	return (
+		<div>
+			<Button onClick={handleClick}>Menu List</Button>
+			<Menu id="menu-list" anchorEl={anchorEl} open={open} onClose={handleClose}>
+				<MenuItem onClick={handleClose}>Menu Item 1</MenuItem>
+				<MenuItem onClick={handleClose}>Menu Item 2</MenuItem>
+				<MenuItem onClick={handleClose}>Menu Item 3</MenuItem>
+			</Menu>
+		</div>
+	);
+};
+
+export default MenuList;

src/components/MUI/Navbar.js

@@ -0,0 +1,106 @@
+import React, { useState } from 'react';
+import {
+	AppBar,
+	Badge,
+	Box,
+	IconButton,
+	Toolbar,
+	Typography,
+	useMediaQuery,
+} from '@mui/material';
+import { useTheme } from '@mui/system';
+import MenuOutlinedIcon from '@mui/icons-material/MenuOutlined';
+import ShoppingBasketIcon from '@mui/icons-material/ShoppingBasket';
+import MenuList from './MenuList';
+import Drawer from './DrawerComponent';
+
+const Navbar = () => {
+	const [openDrawer, setOpenDrawer] = useState(false);
+	const theme = useTheme();
+	const matches = useMediaQuery(theme.breakpoints.down('sm'));
+
+	const handleToggleDrawer = () => {
+		setOpenDrawer(!openDrawer);
+	};
+
+	return (
+		<>
+			<AppBar elevation={2} sx={{ backgroundColor: 'background.default' }}>
+				<Toolbar>
+					<Box
+						component="div"
+						sx={{
+							display: 'flex',
+							justifyContent: 'space-between',
+							alignItems: 'center',
+							width: '100%',
+						}}
+					>
+						{matches ? (
+							<Drawer open={openDrawer} toggleOpen={handleToggleDrawer} />
+						) : (
+							<Box sx={{ display: 'flex' }}>
+								<Typography
+									variant="h6"
+									sx={{
+										marginRight: 3,
+										cursor: 'pointer',
+										color: 'text.primary',
+									}}
+								>
+									Link 1
+								</Typography>
+								<Typography
+									variant="body1"
+									sx={{
+										marginRight: 3,
+										cursor: 'pointer',
+										color: 'text.primary',
+									}}
+								>
+									Link 2
+								</Typography>
+								<Typography
+									variant="subtitle1"
+									sx={{
+										marginRight: 3,
+										cursor: 'pointer',
+										color: 'text.primary',
+									}}
+								>
+									Link 3
+								</Typography>
+							</Box>
+						)}
+						<Box>
+							<MenuList />
+						</Box>
+						<Box
+							sx={{
+								display: 'flex',
+								justifyContent: 'center',
+								alignItems: 'center',
+							}}
+						>
+							{matches ? (
+								<Box>
+									<IconButton onClick={handleToggleDrawer}>
+										<MenuOutlinedIcon />
+									</IconButton>
+								</Box>
+							) : (
+								<IconButton>
+									<Badge badgeContent={3} color="primary">
+										<ShoppingBasketIcon color="action" />
+									</Badge>
+								</IconButton>
+							)}
+						</Box>
+					</Box>
+				</Toolbar>
+			</AppBar>
+		</>
+	);
+};
+
+export default Navbar;

src/pages/HomePage/HomePageMUI.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import Navbar from '../../components/MUI/Navbar';
+
+const HomePage = () => {
+	return (
+        <Navbar />
+    )
+};
+
+export default HomePage;