guesstimate/client/src/components/header/index.tsx

import React, { FunctionComponent } from "react";
import style from "./style.module.css";

export interface HeaderProps {
    class?: string
}

const Header: FunctionComponent<HeaderProps> = ({ ...props}) => {
    return (
        <div className={`container ${style.header} ${props.class ? props.class : ''}`}>
            <div className="columns">
                <div className="column">
                    <nav className="navbar" role="navigation" aria-label="main navigation">
                        <div className="navbar-brand">
                            <a className="navbar-item" href="/">
                                <h1 className="title is-size-4">⏱️ Guesstimate</h1>
                            </a>
                            <a role="button" className="navbar-burger" aria-label="menu" aria-expanded="false">
                                <span aria-hidden="true"></span>
                                <span aria-hidden="true"></span>
                                <span aria-hidden="true"></span>
                            </a>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    );
};

export default Header;