workcation_header_component.js

import React, { useState } from 'react';
import { buildStyles } from '../../plugins/utils';

import AccountDropdown from '../account-dropdown/account-dropdown';

import rawStyles from './nav-bar.styles';

import logoUrl from '../../images/logo.svg';

const styles = buildStyles(rawStyles);

function NavBar() {
	const [isOpen, setIsOpen] = useState(false);

	return (
		<header className={styles.container}>
			<div className={styles.header}>
				<div>
					<svg className={styles.logo} viewBox="0 0 185 32" fill="none">...</svg>
				</div>
				<div className={styles.buttonContainer}>
					<button 
						type="button" 
						className={styles.button}
						onClick={() => setIsOpen(!isOpen)}
					>
						
						<svg className={styles.drawerIcon} viewBox="0 0 24 24">
							{isOpen &&
								<path fillRule="evenodd" clipRule="evenodd" d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z"/>
							}
							{!isOpen &&
								<path fillRule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/>
							}
						</svg>
					</button>
				</div>
			</div>

			<nav className={`${isOpen ? 'block' : 'hidden'} sm:flex sm:items-center`}>
				<div className={styles.drawerMainLinks}>
					<a href="#" className={styles.drawerLink}>List your property</a>
					<a href="#" className={`${styles.drawerLink} mt-1`}>Trips</a>
					<a href="#" className={`${styles.drawerLink} mt-1`}>Messages</a>
				</div>
				<AccountDropdown />
			</nav>
		</header>
	);
}

export default NavBar;