I want to use this logic to applying the corresponding class to an element:
<ul onClick={handleClick} className={click ? 'dropdown-menu clicked' : 'dropdown-menu'}>
But I am using styled components, I don't understand how I can use logic to totally change the component. Any ideas? I am using Next.js
You can pass a function ("interpolations") to a styled component's template literal to adapt it based on its props.
Read this section, Adapting based on props, in Styled Component documentation. In your case, because you didn't provide the details of the code, I can only give you an example:
const DropdownMenu = styled.div`
display: ${props => props.clicked ? "none" : "block"};
`;