MenuItem and Menu are not defined

[saudalham]

import React from 'react';

import { AppBar, Toolbar, IconButton, Badge, MenuItem, Menu, Typography } from '@material-ui/core';

import { ShoppingCart } from '@material-ui/icons';

import { Link, useLocation } from 'react-router-dom'

import logo from '../../assets/Star Image.png';

import useStyles from './styles';

const Navbar = ({ totalItems }) => {

const classes = useStyles();

const location = useLocation();


return (

    <>

        <AppBar position="fixed" className={classes.appBar} color="inherit">

            <Toolbar>

                <Typography component={Link} to="/" variant="h6" className={classes.title} color="inherit">

                    <img src={logo} alt="Commerce.js" height="25px" className={classes.image} />

                    Commerce.js

                </Typography>

                <div className={classes.grow} />
                {location.pathname === '/' && (

                <div className={classes.button}>

                    <IconButton component={Link} to="/cart" aria-label="Show Cart Items" color="inherit">

                        <Badge badgeContent={totalItems} color="Secondary">

                            <ShoppingCart />

                        </Badge>

                    </IconButton>

                </div> )

            }</Toolbar>

        </AppBar>

    </>

)

}

export default Navbar

[shvkumar7777]

import { AppBar,Toolbar,IconButton,Badge,Menu,MenuItem,Typography } from '@mui/material';

i did this, and its working for me

[rjmead23]

I'm 1:57:45 into the video and as yet even though like you, MenuItem and Menu are imported/declared - their value is never read. I just have warnings in the console. The app works, seems so far these are not added into the UI on the NavBar component. Not sure if we will come back to it later in the class or not. If by the end we don't use them, I'll just remove them from the import.