Василий Банников

import React, { Component } from 'react';
import styles from './Header.module.scss'

const Header = () => {
  const [active, setActive] = useState(false);
  const onAccordionClicked = () => setActive(!active);

  return (
            <header className={styles}>
                <div>
                    Hounter
                </div>
                <nav>
                    <ul>
                        <li style={{width: '96px'}}>About Us</li>
                        <li style={{width: '78px'}}>Article</li>
                        <li id='li_btn' style={{width: '122px'}}
                             className={styles.accordion + active ? styles.active : ""}
                             onClick={onAccordionClicked}>
                            Property 
                            <a className={styles.panel} href='#'>House</a>
                            <a className={styles.panel} href='#'>Villa</a>
                            <a className={styles.panel} href='#'>Appartment</a>
                        </li>
                    </ul>
                    <button className={styles.btn}>Sign Up!</button>
                </nav>
            </header>
        );
};

export default Header;

можно было поворачивать голову, а управление оставалось обычным.