Can someone help me understand how to change the styling of my hamburger icon when it's clicked? I'm trying to add a new className to it using hooks and then target that class in Sass. The className is being added correctly, but the new styles aren't being applied.
I've played around with the nesting of my styles as I'm new to Sass and React, but I believe I'm targeting everything correctly.
import { useContext, useState } from "react";
import { Link } from "react-router-dom";
import classes from "./styles/MainNavigation.module.css";
import FavoritesContext from "../../store/favorites-context";
function MainNaviagtion() {
const [isOpen, setOpen] = useState(false);
const favoriteCtx = useContext(FavoritesContext);
const mobileMenuHandler = () => {
setOpen(!isOpen);
};
return (
<header className={classes.header}>
<div className={classes.logo}>Meet Up Tracker</div>
<nav>
<ul id={classes.menu}>
<li>
<Link className={classes.link} to="/">
All Meetups
</Link>
</li>
<li>
<Link className={classes.link} to="/new-meetups">
New Meetups
</Link>
</li>
<li>
<Link className={classes.link} to="/favorites">
My Favorites
<span className={classes.badge}>
{favoriteCtx.totalFavorites}
</span>
</Link>
</li>
</ul>
</nav>
<div id={classes.hamburgerIcon} onClick={mobileMenuHandler} className={isOpen ? 'open' : null}>
<div className={classes.bar1}></div>
<div className={classes.bar2}></div>
<div className={classes.bar3}></div>
<ul className={classes.mobileMenu}>
<li>
<Link className={classes.link} to="/">
All Meetups
</Link>
</li>
<li>
<Link className={classes.link} to="/new-meetups">
New Meetups
</Link>
</li>
<li>
<Link className={classes.link} to="/favorites">
My Favorites
<span className={classes.badge}>
{favoriteCtx.totalFavorites}
</span>
</Link>
</li>
</ul>
</div>
</header>
);
}
export default MainNaviagtion;
$mobile: 576px;
$tablet: 768px;
$laptop: 992px;
$desktop: 1200px;
.header {
width: 100%;
height: 5rem;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #77002e;
padding: 0 10%;
.logo {
font-size: 30px;
color: white;
font-weight: bold;
}
.badge {
background-color: #cc2062;
color: white;
border-radius: 12px;
padding: 0 1rem;
margin-left: 0.5rem;
}
}
#hamburgerIcon {
margin: auto 0;
display: none;
cursor: pointer;
div {
width: 35px;
height: 3px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
}
}
.open {
.bar1 {
-webkit-transform: rotate(-45deg) translate(-6px, 6px);
transform: rotate(-45deg) translate(-6px, 6px);
}
.bar2 {
opacity: 0;
}
.bar3 {
-webkit-transform: rotate(45deg) translate(-6px, -8px);
transform: rotate(45deg) translate(-6px, -8px);
}
.mobile-menu {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
}
.mobileMenu {
display: none;
position: absolute;
top: 50px;
left: 0;
height: calc(100vh - 50px);
width: 100%;
}
.header ul {
list-style: none;
margin: 0;
padding: 0;
display: -webkit-inline-box;
align-items: baseline;
}
.header li {
margin-left: 3rem;
}
.header a {
text-decoration: none;
font-size: 20px;
color: #fcb8d2;
}
.header a:hover,
.header a:active,
.header a.active {
color: white;
}
@media (max-width: $tablet) {
.header {
.logo {
font-size: 25px;
}
.link {
display: flex;
align-items: center;
font-size: 15px;
border: 2px solid black;
}
}
.header ul {
display: -webkit-inline-box;
}
.header li {
margin-left: 1rem;
}
}
@media (max-width: $mobile) {
#menu {
display: none;
}
#hamburgerIcon {
display: block !important;
}
}