0

I'm not sure how to add a click event to trigger the active class in my styled component. I'm using react hooks and functional component for this code.

Here is the code I'm trying to replicate with styled components

        <ul className={click ? 'nav-menu active' : 'nav-menu'}>

Right now it automatically shows the active class, but I only need it to show active if I click, but I don't know where I'd write that code to show if click is true or false?

        const NavMenu = styled.ul`
        display: flex;
        align-items: center;
        list-style: none;
        text-align: center;

        @media screen and (max-width: 960px) {
          display: flex;
          flex-direction: column;
          width: 100%;
          height: 90vh;
          position: absolute;
          top: 80px;
          left: -100%;
          opacity: 1;
          transition: all 0.5s ease;

          ${({ active }) =>
            active &&
            css`
              background: #1c2237;
              left: 0;
              opacity: 1;
              transition: all 0.6s ease;
              z-index: 1;
            `} 
        }
      `;

Then in my NavMenu I have the active added

      <NavMenu active></NavMenu>
designxd10
  • 57
  • 8
  • I'd recommend you to provide more context on exactly what you are trying to achieve. As it is right now the question is hard to understand and the code you are showing shows little relation to the question. – tehsis Sep 03 '20 at 13:52
  • I added my code for what I attempted so far. It's essentially a nav menu that should display when I click it and trigger the active class, but I'm not sure how to implement that with styled components – designxd10 Sep 03 '20 at 13:56
  • You may want to take a look at [this answer](https://stackoverflow.com/questions/48502647/conditional-rendering-in-styled-components) – Chris B. Sep 03 '20 at 13:57
  • @ChrisB I tried to follow those answers, but they use class components and I can't seem to get it to work with my hooks and functional component – designxd10 Sep 03 '20 at 14:09

1 Answers1

0

You can try like this.

<NavMenu active={click}>Your Menu</NavMenu>
phoenix
  • 36
  • 1
  • 5