Hi guys, I’m new to netlify and i deployed my portfolio through netlify and whenever i click the menu button to display the overlay navigation menu it works locally but it did not work after i deployed my portfolio
This is my code for the navbar:
import { Home, Icon, Logo, Nav, NavLinks } from ‘…/components/styles/Navbar.styled’;
import logo from ‘./…/logo.png’;
import { MdClose } from ‘react-icons/md’;
import { HiOutlineMenuAlt3 } from ‘react-icons/hi’;
import { useState } from ‘react’;
import { motion, AnimatePresence } from ‘framer-motion’;
const Navbar = () => {
const [ open, setOpen ] = useState(false);
const isOpen = () => {
setOpen(true);
}
const closeMenu = () => {
setOpen(false);
}
//animation
const item = {
exit: {
opacity: 0,
height: 0,
transition: {
ease: ‘easeInOut’,
duration: 0.3,
delay: .3
}
}
}
return (
<>
<img src={logo} alt=‘logo’ style={{ width:‘3.5rem’ }} />
Home
About
Portfolio
Contact
<HiOutlineMenuAlt3 style={{ color: ‘white’, fontSize: ‘30px’ }} onClick={isOpen}/>
{
open && (
<motion.div className=‘menu’
variants={item}
initial={{height: 0, opacity: 0}}
animate={{height: ‘100vh’, opacity: 1}}
transition={{duration: .3}}
exit=‘exit’
>
Home
About
Portfolio
Contact
</motion.div>
)
}
</>
)
}
export default Navbar
I would really appreciate help on this.
Thank You
