Navbar ul wont show up when the menu toggle is clicked

Question

I have encountered a problem with my navbar ul not showing up when the button is clicked. I'm using React and SCSS, my main problem is mainly the media query since when the button is clicked, it should show the ul in a flex-column direction but not even the background, the text or the color is showing up.

Image:

The JSX:

import React, {useState} from 'react'
import styles from "./HeroPage.module.scss"
import { FaBars, FaTimes } from 'react-icons/fa';

const HeroPage = () => {
  const [isOpen, setIsOpen] = useState(false);
  const toggleNav = () => {
    setIsOpen(!isOpen);
  } 

  return (
    <nav>
      <div className={styles.navbar}>
        <a href="/#" className={styles.logo}><h1>Max<span>Drift</span></h1></a>
        <div className={`${styles["nav_links"]} ${isOpen && "show"}`}>
            <ul>
              <li><a href="/#">Home</a></li>
              <li><a href="/#">About</a></li>
              <li><a href="/#">Services</a></li>
              <li><a href="/#">Galleries</a></li>
              <li><a href="/#">FAQ</a></li>
              <li><a href="/#">Contact</a></li>
            </ul>
        </div>
        <div className={styles.nav_toggle} onClick={toggleNav}>
          {isOpen ? <FaTimes /> : <FaBars />}
        </div>
      </div>
    </nav>
  )
}

export default HeroPage

Here is the SCSS

nav{
    width: 100%;
    height: 90px;
    background: #333;
    z-index: 1;
    transition: 0.5s ease-in;

}

.navbar{
    width: 80%;
    margin-inline: auto;
    @include flex(space-around);
    text-align: center;

    .logo{
        @include logoFont();
        font-size: 2.5rem;
        color: #D9D9D9;
        span{
            color: #F42F1E;
        }
    }
    
    .nav_links{
        ul{
            display: flex;
            gap: 2em;
        }

        a{
            @include textFont();
            color: #D9D9D9;

            &:hover{
                color: #F42F1E;
            }
        }
    }

    .nav_toggle{
        display: none;
        background-color: transparent;
        color: #FFF;
        font-size: 2rem;
    }

}//end of navbar

 //MEDIA QUERIES
@media screen and (max-width: 969px){
    .navbar{
        width: 100%;
        padding-top: .5em;
        
        .logo{
            font-size: 2rem;
        }
    
        .nav_toggle{
            display: block;
        }
    }  
    
    .nav_links{
        ul{
            width: 0;
            overflow: hidden;
            opacity: 0;
        }

        .show  ul{
            opacity: 1;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 90vh;
            position: absolute;
            top: 90px;
            left: 0;
            background-color: antiquewhite;
            transition: 0.5s ease-in-out;
            
        }
        
    }

}

My only problem is the media query, when the button/hamburger menu is clicked, I was hoping it would show up the .show ul but I can't seem to find the fix for it. Can anyone please help me on what mistake I made?

I tried to fix it by doing this:

.nav_links{
        ul{
            width: 0;
            overflow: hidden;
            opacity: 0;
        }

        // .show ul{
        //     opacity: 1;
        //     flex-direction: column;
        //     justify-content: center;
        //     align-items: center;
        //     width: 100%;
        //     height: 90vh;
        //     position: absolute;
        //     top: 90px;
        //     left: 0;
        //     background-color: antiquewhite;
        //     transition: 0.5s ease-in-out;
            
        // }
        
    }

    .nav_links.show{

        ul{
            opacity: 1;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 90vh;
            position: absolute;
            top: 90px;
            left: 0;
            background-color: antiquewhite;
            transition: 0.5s ease-in-out;  
        }
    }

but nothing changed unfortunately.

Answer 1

I can spot two potential mistakes:

When using CSS modules, the resulting classname will not be exactly that one you define on the .module.scss file. Instead, the values will be replaced by a unique value to avoid naming conflicts. If your intention with ${isOpen && "show"} is to use the .show classname, you should probably use styles.show instead of just "show" (Like so: ${isOpen && styles.show}). This will make you use the resulting className for the .show class.

Also, I see that the .show class is applied to the same component as the .nav_links. On your first sass stylesheet, you're using the .show class nested into the .nav_links. This rule would apply for .show elements that are children of .nav_links. I think your attempt to fix the issue was on the right track, by doing .nav_links.show. Another way to fix this would be simply use the & operator on the first example. So instead of

.nav_links {
...
   .show  ul{
   ...
   }
}

you could have

.nav_links {
...
   &.show  ul{
   ...
   }
}

That would make the .show class be selected for the same element as .nav_links (similar to what you did by using .nav_links.show)