Apologies in advance if I miss any details - this marks my debut post on Stack Overflow.
The main objective of the function is to operate my hamburger menu, either opening or closing it. I have shared a snapshot of the JSX file pertaining to this issue: NavbarLinks.jsx. The problematic lines of code are 15 and 18 where I am attempting to declare a CSS module class as a variable.
const [navLinkOpen, navLinkToggle] = useState(false);
const handleNavLinksToggle = () => {
navLinkToggle(!navLinkOpen);
};
let classes = {`${styles.navLinks}`};
if (navLinkOpen) {
classes += {`${styles.active}`};
}
return classes;
};
Subsequently, I reference the returned class within the ul tag on line 27.
<ul className={renderClasses}>
I've experimented with various ways of defining this class as a variable, and what you see here is my latest attempt. I acknowledge that this particular attempt has disrupted the code - still getting the hang of JavaScript and prefer learning through trial and error rather than solely relying on tutorials from platforms like YouTube.
Please tackle the question at hand rather than suggesting alternate methods, as my primary aim is to enhance my understanding in this area! Nonetheless, I'm open to exploring alternative approaches that achieve the same goal as well.
Including a link to the CSS Module file I'm currently working on just in case it proves helpful: NavbarLinksStyle.module.css
Many thanks in advance for any assistance - I'll be available to address any queries.